atinc / ngx-tethys / #55

Committed 30 Jul 2025 07:08AM UTC coverage: 9.866% (-80.4%) from 90.297%

Build # #55

Build Type

push

Committed by

Commit Message

feat(empty): add setMessage for update display text #TINFR-2616

Run Details

92 of 6794 branches covered (1.35%)

Branch coverage included in aggregate %.

2014 of 14552 relevant lines covered (13.84%)

6.15 hits per line

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

10.61

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

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

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

const sizeClassesMap: Record<string, string[]> = {
    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,
    host: {
        class: 'btn btn-icon',
        '[class.btn-icon-light]': 'thyLight()',
        '[class.btn-icon-active]': 'thyActive()'
    },
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [ThyIcon, NgClass]
})
export class ThyButtonIcon {
    /**
     * 大小
     * @type xs | sm | md | lg
     * @default 36px
     */
    readonly thySize = input<string>();

    /**
     * 图标, 和`thyButtonIcon`相同，当使用`thy-button-icon`时，只能使用 thyIcon 设置图标
     */
    readonly thyIcon = input<string>();

    /**
     * 图标按钮的图标
     */
    readonly thyButtonIcon = input<string>();

    /**
     * 展示的形状，默认只显示字体图标图标，circle-dashed, circle-solid 展示成虚线,实线边框圆形图标, circle-thick-dashed, circle-thick-solid 边框加粗
     */
    readonly thyShape = input<ThyButtonIconShape>();

    /**
     * 亮色，颜色更浅，适合左侧导航顶部的按钮
     * @default false
     */
    readonly thyLight = input<boolean, ThyBooleanInput>(false, { transform: coerceBooleanProperty });

    /**
     * 设置为选中状态
     * @default false
     */
    readonly thyActive = input<boolean, ThyBooleanInput>(false, { transform: coerceBooleanProperty });

    /**
     * 按钮展示类型，默认图标移上去显示主色， danger-weak 鼠标移上去显示 danger 红色
     */
    readonly thyTheme = input<string>();

    readonly thyColor = input<string>();

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

    private hostRenderer = useHostRenderer();

    private icon = computed(() => {
        return this.thyButtonIcon() || this.thyIcon();
    });

    private isWtfIcon = computed(() => {
        const icon = this.icon();
        return icon && icon.includes('wtf');
    });

    protected svgIconName = computed(() => {
        if (!this.isWtfIcon()) {
            return this.icon();
        }
        return null;
    });

    protected iconClasses = computed<string[]>(() => {
        const icon = this.icon();
        if (this.isWtfIcon()) {
            const classes = icon.split(' ');
            if (classes.length === 1) {
                classes.unshift('wtf');
            }
            return classes;
        }
        return null;
    });

    private setClasses() {
        const size = this.thySize();
        const shape = this.thyShape();
        const theme = this.thyTheme();
        const classes = sizeClassesMap[size] ? [...sizeClassesMap[size]] : [];
        if (shape && shapeClassesMap[shape]) {
            shapeClassesMap[shape].forEach((className: string) => {
                classes.push(className);
            });
        }
        if (theme && themeClassesMap[theme]) {
            themeClassesMap[theme].forEach((className: string) => {
                classes.push(className);
            });
        }
        this.hostRenderer.updateClass(classes);
    }
}

1	import { NgClass } from '@angular/common';
2	import { ChangeDetectionStrategy, Component, HostBinding, Input, OnInit, ViewEncapsulation, computed, effect, input } from '@angular/core';
3	import { useHostRenderer } from '@tethys/cdk/dom';
4	import { ThyIcon } from 'ngx-tethys/icon';
5	import { coerceBooleanProperty, ThyBooleanInput } from 'ngx-tethys/util';
6
7	export type ThyButtonIconShape = '' \| 'circle-dashed' \| 'circle-solid' \| 'circle-thick-dashed' \| 'circle-thick-solid' \| 'self-icon';
8
9	const sizeClassesMap: Record<string, string[]> = {	1✔
10	lg: ['btn-icon-lg'],
11	md: ['btn-icon-md'],
12	sm: ['btn-icon-sm'],
13	xs: ['btn-icon-xs']
14	};
15		1✔
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']
22	};	1✔
23
24	const themeClassesMap: any = {
25	'danger-weak': ['btn-icon-danger-weak']
26	};
27
28	/**
29	* 操作按钮图标，支持`thy-button-icon`组件和`thyButtonIcon`指令两种形式
30	* @name thy-button-icon,[thy-button-icon],[thyButtonIcon]	1✔
31	* @order 20
32	*/	×
33	@Component({	×
34	selector: 'thy-button-icon,[thy-button-icon],[thyButtonIcon]',	×
35	templateUrl: './button-icon.component.html',	×
36	encapsulation: ViewEncapsulation.None,	×
37	host: {	×
38	class: 'btn btn-icon',	×
39	'[class.btn-icon-light]': 'thyLight()',	×
40	'[class.btn-icon-active]': 'thyActive()'	×
41	},	×
42	changeDetection: ChangeDetectionStrategy.OnPush,	×
43	imports: [ThyIcon, NgClass]
44	})	×
45	export class ThyButtonIcon {	×
46	/**	×
47	* 大小
48	* @type xs \| sm \| md \| lg	×
49	* @default 36px	×
50	*/	×
51	readonly thySize = input<string>();
52		×
53	/**
54	* 图标, 和`thyButtonIcon`相同，当使用`thy-button-icon`时，只能使用 thyIcon 设置图标	×
55	*/	×
56	readonly thyIcon = input<string>();	×
57		×
58	/**	×
59	* 图标按钮的图标	×
60	*/
61	readonly thyButtonIcon = input<string>();	×
62
63	/**	×
64	* 展示的形状，默认只显示字体图标图标，circle-dashed, circle-solid 展示成虚线,实线边框圆形图标, circle-thick-dashed, circle-thick-solid 边框加粗
65	*/	×
66	readonly thyShape = input<ThyButtonIconShape>();	×
67
68	/**
69	* 亮色，颜色更浅，适合左侧导航顶部的按钮
70	* @default false	×
71	*/	×
72	readonly thyLight = input<boolean, ThyBooleanInput>(false, { transform: coerceBooleanProperty });	×
73		×
74	/**	×
75	* 设置为选中状态	×
76	* @default false	×
77	*/
78	readonly thyActive = input<boolean, ThyBooleanInput>(false, { transform: coerceBooleanProperty });
79		×
80	/**	×
81	* 按钮展示类型，默认图标移上去显示主色， danger-weak 鼠标移上去显示 danger 红色	×
82	*/
83	readonly thyTheme = input<string>();
84		×
85	readonly thyColor = input<string>();
86		1✔
87	constructor() {	1✔
88	effect(() => {
89	this.setClasses();
90	});
91	}
92
93	private hostRenderer = useHostRenderer();
94
95	private icon = computed(() => {
96	return this.thyButtonIcon() \|\| this.thyIcon();
97	});
98		1✔
99	private isWtfIcon = computed(() => {
100	const icon = this.icon();
101	return icon && icon.includes('wtf');
102	});
103
104	protected svgIconName = computed(() => {
105	if (!this.isWtfIcon()) {
106	return this.icon();
107	}
108	return null;
109	});
110
111	protected iconClasses = computed<string[]>(() => {
112	const icon = this.icon();
113	if (this.isWtfIcon()) {
114	const classes = icon.split(' ');
115	if (classes.length === 1) {
116	classes.unshift('wtf');
117	}
118	return classes;
119	}
120	return null;
121	});
122
123	private setClasses() {
124	const size = this.thySize();
125	const shape = this.thyShape();
126	const theme = this.thyTheme();
127	const classes = sizeClassesMap[size] ? [...sizeClassesMap[size]] : [];
128	if (shape && shapeClassesMap[shape]) {
129	shapeClassesMap[shape].forEach((className: string) => {
130	classes.push(className);
131	});
132	}
133	if (theme && themeClassesMap[theme]) {
134	themeClassesMap[theme].forEach((className: string) => {
135	classes.push(className);
136	});
137	}
138	this.hostRenderer.updateClass(classes);
139	}
140	}

atinc / ngx-tethys / #55

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