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.45

/src/button/button-icon.component.ts

import { NgClass } from '@angular/common';
import { ChangeDetectionStrategy, Component, HostBinding, Input, OnInit, ViewEncapsulation } from '@angular/core';
import { useHostRenderer } from '@tethys/cdk/dom';
import { ThyIcon } from 'ngx-tethys/icon';
import { coerceBooleanProperty } from 'ngx-tethys/util';

export type ThyButtonIconShape = '' | 'circle-dashed' | 'circle-solid' | 'circle-thick-dashed' | 'circle-thick-solid' | 'self-icon';

const sizeClassesMap = {
    lg: ['btn-icon-lg'],
    md: ['btn-icon-md'],
    sm: ['btn-icon-sm'],
    xs: ['btn-icon-xs']
};

const shapeClassesMap = {
    'circle-dashed': ['btn-icon-circle', 'circle-dashed'],
    'circle-solid': ['btn-icon-circle', 'circle-solid'],
    'circle-thick-dashed': ['btn-icon-circle', 'circle-dashed', 'border-thick'],
    'circle-thick-solid': ['btn-icon-circle', 'circle-solid', 'border-thick'],
    'self-icon': ['btn-icon-self-circle']
};

const themeClassesMap: any = {
    'danger-weak': ['btn-icon-danger-weak']
};

/**
 * 操作按钮图标，支持`thy-button-icon`组件和`thyButtonIcon`指令两种形式
 * @name thy-button-icon,[thy-button-icon],[thyButtonIcon]
 * @order 20
 */
@Component({
    selector: 'thy-button-icon,[thy-button-icon],[thyButtonIcon]',
    templateUrl: './button-icon.component.html',
    encapsulation: ViewEncapsulation.None,
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [ThyIcon, NgClass]
})
export class ThyButtonIcon implements OnInit {
    /**
     * 大小
     * @type xs | sm | md | lg
     * @default 36px
     */
    @Input()
    set thySize(size: string) {
        this.size = size;
        this.setClasses();
    }

    /**
     * 图标, 和`thyButtonIcon`相同，当使用`thy-button-icon`时，只能使用 thyIcon 设置图标
     */
    @Input()
    set thyIcon(icon: string) {
        this.setIconClass(icon);
    }

    /**
     * 图标按钮的图标
     */
    @Input()
    set thyButtonIcon(icon: string) {
        this.setIconClass(icon);
    }

    /**
     * 展示的形状，默认只显示字体图标图标，circle-dashed, circle-solid 展示成虚线,实线边框圆形图标, circle-thick-dashed, circle-thick-solid 边框加粗
     */
    @Input()
    set thyShape(value: ThyButtonIconShape) {
        this.shape = value;
        this.setClasses();
    }

    /**
     * 亮色，颜色更浅，适合左侧导航顶部的按钮
     * @default false
     */
    @Input({ transform: coerceBooleanProperty })
    set thyLight(value: boolean) {
        this._isLighted = value;
    }

    /**
     * 设置为选中状态
     * @default false
     */
    @Input({ transform: coerceBooleanProperty })
    set thyActive(value: boolean) {
        this._isActive = value;
    }

    /**
     * 按钮展示类型，默认图标移上去显示主色， danger-weak 鼠标移上去显示 danger 红色
     */
    @Input()
    set thyTheme(value: string) {
        this.theme = value;
        this.setClasses();
    }

    constructor() {}

    private initialized = false;

    private shape: ThyButtonIconShape;

    private size: string;

    private hostRenderer = useHostRenderer();

    iconPrefix = 'wtf';

    iconClasses: string[];

    icon: string;

    theme: string;

    svgIconName: string;

    @HostBinding('class.btn') _isBtn = true;
    @HostBinding('class.btn-icon') _isBtnIcon = true;
    @HostBinding('class.btn-icon-light') _isLighted = false;
    @HostBinding('class.btn-icon-active') _isActive = false;

    @Input() thyColor: string;

    private setIconClass(icon: string) {
        if (icon) {
            if (icon.includes('wtf')) {
                const classes = icon.split(' ');
                if (classes.length === 1) {
                    classes.unshift('wtf');
                }
                this.iconClasses = classes;
                this.svgIconName = null;
            } else {
                this.svgIconName = icon;
            }
        } else {
            this.iconClasses = null;
            this.svgIconName = null;
        }
    }

    private setClasses(first = false) {
        // 设置样式判断是否已经初始化，未初始化直接返回，除非是初次调用
        // 只有 ngOnInit 调用会传入 first = true
        if (!first && !this.initialized) {
            return;
        }
        const classes = sizeClassesMap[this.size] ? [...sizeClassesMap[this.size]] : [];
        if (this.shape && shapeClassesMap[this.shape]) {
            shapeClassesMap[this.shape].forEach((className: string) => {
                classes.push(className);
            });
        }
        if (this.theme && themeClassesMap[this.theme]) {
            themeClassesMap[this.theme].forEach((className: string) => {
                classes.push(className);
            });
        }
        this.hostRenderer.updateClass(classes);
    }

    ngOnInit() {
        this.setClasses(true);
        this.initialized = true;
    }
}

1	import { NgClass } from '@angular/common';
2	import { ChangeDetectionStrategy, Component, HostBinding, Input, OnInit, ViewEncapsulation } from '@angular/core';
3	import { useHostRenderer } from '@tethys/cdk/dom';
4	import { ThyIcon } from 'ngx-tethys/icon';
5	import { coerceBooleanProperty } from 'ngx-tethys/util';
6
7	export type ThyButtonIconShape = '' \| 'circle-dashed' \| 'circle-solid' \| 'circle-thick-dashed' \| 'circle-thick-solid' \| 'self-icon';
8		1✔
9	const sizeClassesMap = {
10	lg: ['btn-icon-lg'],
11	md: ['btn-icon-md'],
12	sm: ['btn-icon-sm'],
13	xs: ['btn-icon-xs']
14	};	1✔
15
16	const shapeClassesMap = {
17	'circle-dashed': ['btn-icon-circle', 'circle-dashed'],
18	'circle-solid': ['btn-icon-circle', 'circle-solid'],
19	'circle-thick-dashed': ['btn-icon-circle', 'circle-dashed', 'border-thick'],
20	'circle-thick-solid': ['btn-icon-circle', 'circle-solid', 'border-thick'],
21	'self-icon': ['btn-icon-self-circle']	1✔
22	};
23
24	const themeClassesMap: any = {
25	'danger-weak': ['btn-icon-danger-weak']
26	};
27
28	/**
29	* 操作按钮图标，支持`thy-button-icon`组件和`thyButtonIcon`指令两种形式	1✔
30	* @name thy-button-icon,[thy-button-icon],[thyButtonIcon]
UNCOV 31	* @order 20	×
UNCOV 32	*/	×
33	@Component({
34	selector: 'thy-button-icon,[thy-button-icon],[thyButtonIcon]',
UNCOV 35	templateUrl: './button-icon.component.html',	×
36	encapsulation: ViewEncapsulation.None,
37	changeDetection: ChangeDetectionStrategy.OnPush,
UNCOV 38	imports: [ThyIcon, NgClass]	×
39	})
40	export class ThyButtonIcon implements OnInit {
UNCOV 41	/**	×
UNCOV 42	* 大小	×
43	* @type xs \| sm \| md \| lg
44	* @default 36px
UNCOV 45	*/	×
46	@Input()
47	set thySize(size: string) {
UNCOV 48	this.size = size;	×
49	this.setClasses();
50	}
UNCOV 51		×
UNCOV 52	/**	×
53	* 图标, 和`thyButtonIcon`相同，当使用`thy-button-icon`时，只能使用 thyIcon 设置图标
54	*/
UNCOV 55	@Input()	×
UNCOV 56	set thyIcon(icon: string) {	×
UNCOV 57	this.setIconClass(icon);	×
UNCOV 58	}	×
UNCOV 59		×
UNCOV 60	/**	×
UNCOV 61	* 图标按钮的图标	×
62	*/
63	@Input()
UNCOV 64	set thyButtonIcon(icon: string) {	×
UNCOV 65	this.setIconClass(icon);	×
UNCOV 66	}	×
UNCOV 67		×
UNCOV 68	/**	×
69	* 展示的形状，默认只显示字体图标图标，circle-dashed, circle-solid 展示成虚线,实线边框圆形图标, circle-thick-dashed, circle-thick-solid 边框加粗
UNCOV 70	*/	×
UNCOV 71	@Input()	×
72	set thyShape(value: ThyButtonIconShape) {
73	this.shape = value;
UNCOV 74	this.setClasses();	×
75	}
76
77	/**
UNCOV 78	* 亮色，颜色更浅，适合左侧导航顶部的按钮	×
UNCOV 79	* @default false	×
80	*/
81	@Input({ transform: coerceBooleanProperty })
82	set thyLight(value: boolean) {	×
83	this._isLighted = value;
84	}
UNCOV 85		×
UNCOV 86	/**	×
87	* 设置为选中状态
UNCOV 88	* @default false	×
UNCOV 89	*/	×
UNCOV 90	@Input({ transform: coerceBooleanProperty })	×
UNCOV 91	set thyActive(value: boolean) {	×
92	this._isActive = value;
93	}
UNCOV 94		×
UNCOV 95	/**	×
UNCOV 96	* 按钮展示类型，默认图标移上去显示主色， danger-weak 鼠标移上去显示 danger 红色	×
97	*/
98	@Input()
UNCOV 99	set thyTheme(value: string) {	×
100	this.theme = value;
101	this.setClasses();
UNCOV 102	}	×
UNCOV 103		×
104	constructor() {}
105		1✔
106	private initialized = false;	1✔
107
108	private shape: ThyButtonIconShape;
109
110	private size: string;
111
112	private hostRenderer = useHostRenderer();
113
114	iconPrefix = 'wtf';
115
116	iconClasses: string[];
117
118	icon: string;
119
120	theme: string;
121		1✔
122	svgIconName: string;
123
124	@HostBinding('class.btn') _isBtn = true;
125	@HostBinding('class.btn-icon') _isBtnIcon = true;
126	@HostBinding('class.btn-icon-light') _isLighted = false;
127	@HostBinding('class.btn-icon-active') _isActive = false;
128
129	@Input() thyColor: string;
130
131	private setIconClass(icon: string) {
132	if (icon) {
133	if (icon.includes('wtf')) {
134	const classes = icon.split(' ');
135	if (classes.length === 1) {
136	classes.unshift('wtf');
137	}
138	this.iconClasses = classes;
139	this.svgIconName = null;
140	} else {
141	this.svgIconName = icon;
142	}
143	} else {
144	this.iconClasses = null;
145	this.svgIconName = null;
146	}
147	}
148
149	private setClasses(first = false) {
150	// 设置样式判断是否已经初始化，未初始化直接返回，除非是初次调用
151	// 只有 ngOnInit 调用会传入 first = true
152	if (!first && !this.initialized) {
153	return;
154	}
155	const classes = sizeClassesMap[this.size] ? [...sizeClassesMap[this.size]] : [];
156	if (this.shape && shapeClassesMap[this.shape]) {
157	shapeClassesMap[this.shape].forEach((className: string) => {
158	classes.push(className);
159	});
160	}
161	if (this.theme && themeClassesMap[this.theme]) {
162	themeClassesMap[this.theme].forEach((className: string) => {
163	classes.push(className);
164	});
165	}
166	this.hostRenderer.updateClass(classes);
167	}
168
169	ngOnInit() {
170	this.setClasses(true);
171	this.initialized = true;
172	}
173	}

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