d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { Component, ElementRef, Input, Output, EventEmitter, HostBinding } from '@angular/core';
import { coerceBooleanProperty } from 'ngx-tethys/util';
import { helpers } from 'ngx-tethys/util';
import { useHostRenderer } from '@tethys/cdk/dom';
import { ThyIconComponent } from 'ngx-tethys/icon';
import { NgIf, NgStyle, NgClass } from '@angular/common';
import { InputNumber } from 'ngx-tethys/core';

export type ThyLabelType = 'default' | 'primary' | 'success' | 'info' | 'warning' | 'danger';

export type ThyLabelTypeSize = 'sm' | 'default' | 'md' | 'lg' | 'xlg';

const labelTypeClassesMap = {
    default: ['thy-label', 'thy-label-default'],
    primary: ['thy-label', 'thy-label-primary'],
    success: ['thy-label', 'thy-label-success'],
    info: ['thy-label', 'thy-label-info'],
    warning: ['thy-label', 'thy-label-warning'],
    danger: ['thy-label', 'thy-label-danger']
};

/**
 * 标签组件
 * @name thyLabel
 * @order 10
 */
@Component({
    // eslint-disable-next-line @angular-eslint/component-selector
    selector: '[thyLabel]',
    templateUrl: './label.component.html',
    standalone: true,
    imports: [NgIf, ThyIconComponent, NgStyle, NgClass]
})
export class ThyLabelComponent {
    @HostBinding('class.label-has-hover') _thyHasHover = false;

    @HostBinding('class.thy-label--sm') _classNameSM = false;

    @HostBinding('class.thy-label--md') _classNameDM = false;

    @HostBinding('class.thy-label--lg') _classNameLG = false;

    @HostBinding('class.thy-label--xlg') _classNameXLG = false;

    // 字体前缀，默认 wtf
    @Input() thyIconPrefix: string;

    /**
     * 标签大小
     * @type sm | default | md | lg | xlg
     * @default default
     */
    @Input('thySize')
    set thySize(value: string) {
        this._classNameSM = value === 'sm';
        this._classNameDM = value === 'md';
        this._classNameLG = value === 'lg';
        this._classNameXLG = value === 'xlg';
    }

    private nativeElement: HTMLElement;

    private _typeClassNames: string[] = [];

    private _labelClass?: string;

    private _type?: string;

    private _labelType?: string;

    private _icon: string;

    public beforeIconName: string;

    public beforeIconClass: string[];

    public afterIconName: string;

    public afterIconClass: string[];

    public _color?: string;

    public _backgroundOpacity?: number = 0.1;

    private hostRenderer = useHostRenderer();

    /**
     * 标签支持移除操作
     */
    @Output() thyOnRemove: EventEmitter<any> = new EventEmitter<any>();

    constructor(private el: ElementRef) {
        this.nativeElement = this.el.nativeElement;
    }

    /**
     * 标签是否支持鼠标滑过有效果，一般在标签有操作时使用
     * @default false
     */
    @Input('thyHasHover')
    set thyHasHover(value: string) {
        this._thyHasHover = coerceBooleanProperty(value);
    }

    /**
     * 标签的类型
     * @type default | primary | success | info | warning | danger | success | emboss-default | emboss-primary | emboss-warning | emboss-danger | outline
     */
    @Input()
    set thyLabel(value: ThyLabelType) {
        this._type = value;
        this._setClassesByType();
    }

    /**
     * 标签支持自定义颜色，需要与`thyLabel`属性同时使用
     */
    @Input()
    set thyLabelColor(color: string) {
        this._color = color;
        this._setLabelCustomColor();
    }

    /**
     * 标签支持自定义背景颜色透明度，配合`thyLabelColor`使用，范围为：0～1
     * @default 0.1
     */
    @Input()
    @InputNumber()
    set thyBackgroundOpacity(opacity: number) {
        if (opacity && opacity > 0 && this._backgroundOpacity !== opacity) {
            this._backgroundOpacity = opacity;
            this._setLabelCustomColor();
        }
    }

    /**
     * 标签状态类型
     * @type state | pill
     * @default state
     */
    @Input()
    set thyLabelType(labelType: string) {
        this._labelType = labelType;
        this._setClassesByType();
    }

    /**
     * 标签支持在显示文案前添加图标
     */
    @Input()
    set thyBeforeIcon(icon: string) {
        this._icon = icon;
        if (this._icon) {
            if (this._icon.includes('wtf')) {
                const iconPrefix = this.thyIconPrefix || 'wtf';
                this.beforeIconClass = [iconPrefix, `${this._icon}`];
            } else {
                this.beforeIconName = `${this._icon}`;
            }
        } else {
            this.beforeIconClass = null;
            this.beforeIconName = null;
        }
    }

    /**
     * 标签支持在显示文案后添加图标
     */
    @Input()
    set thyAfterIcon(icon: string) {
        this._icon = icon;
        if (this._icon) {
            if (this._icon.includes('wtf')) {
                const iconPrefix = this.thyIconPrefix || 'wtf';
                this.afterIconClass = [iconPrefix, `${this._icon}`];
            } else {
                this.afterIconName = `${this._icon}`;
            }
        } else {
            this.afterIconClass = null;
            this.afterIconName = null;
        }
    }

    private _setClassesByType() {
        let classNames: string[] = null;
        if (labelTypeClassesMap[this._type]) {
            classNames = labelTypeClassesMap[this._type];
        } else {
            classNames = ['thy-label'];
            classNames.push(`thy-label-${this._type}`);
        }
        if (this._labelType) {
            classNames = [...classNames, `thy-label-${this._labelType}`];
        }
        // remove old classes
        this._typeClassNames.forEach(className => {
            this._removeClass(className);
        });
        // add new classes
        this._typeClassNames = classNames;
        this._typeClassNames.forEach(className => {
            this._addClass(className);
        });
    }

    private _setLabelCustomColor() {
        if (this._color) {
            if (this._type.indexOf('emboss') > -1) {
                if (this._type === 'emboss-status') {
                    this.el.nativeElement.style.color = '#333';
                } else {
                    this.el.nativeElement.style.color = this._color;
                }
                this.el.nativeElement.style.backgroundColor = helpers.hexToRgb(this._color, this._backgroundOpacity);
            } else if (this._type.indexOf('outline') > -1) {
                this.el.nativeElement.style.color = this._color;
                this.el.nativeElement.style.borderColor = this._color;
            } else {
                this.el.nativeElement.style.backgroundColor = this._color;
            }
        }
    }

    private _addClass(className: string) {
        this.hostRenderer.addClass(className);
    }

    private _removeClass(className: string) {
        this.hostRenderer.removeClass(className);
    }

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

1	import { Component, ElementRef, Input, Output, EventEmitter, HostBinding } from '@angular/core';
2	import { coerceBooleanProperty } from 'ngx-tethys/util';
3	import { helpers } from 'ngx-tethys/util';
4	import { useHostRenderer } from '@tethys/cdk/dom';
5	import { ThyIconComponent } from 'ngx-tethys/icon';
6	import { NgIf, NgStyle, NgClass } from '@angular/common';
7	import { InputNumber } from 'ngx-tethys/core';
8
9	export type ThyLabelType = 'default' \| 'primary' \| 'success' \| 'info' \| 'warning' \| 'danger';
10		1✔
11	export type ThyLabelTypeSize = 'sm' \| 'default' \| 'md' \| 'lg' \| 'xlg';
12
13	const labelTypeClassesMap = {
14	default: ['thy-label', 'thy-label-default'],
15	primary: ['thy-label', 'thy-label-primary'],
16	success: ['thy-label', 'thy-label-success'],
17	info: ['thy-label', 'thy-label-info'],
18	warning: ['thy-label', 'thy-label-warning'],
19	danger: ['thy-label', 'thy-label-danger']
20	};
21
22	/**
23	* 标签组件	1✔
24	* @name thyLabel
25	* @order 10	×
26	*/	×
27	@Component({	×
28	// eslint-disable-next-line @angular-eslint/component-selector	×
29	selector: '[thyLabel]',
30	templateUrl: './label.component.html',
31	standalone: true,	×
32	imports: [NgIf, ThyIconComponent, NgStyle, NgClass]	×
33	})	×
34	export class ThyLabelComponent {	×
35	@HostBinding('class.label-has-hover') _thyHasHover = false;	×
36		×
37	@HostBinding('class.thy-label--sm') _classNameSM = false;	×
38		×
39	@HostBinding('class.thy-label--md') _classNameDM = false;	×
40		×
41	@HostBinding('class.thy-label--lg') _classNameLG = false;	×
42
43	@HostBinding('class.thy-label--xlg') _classNameXLG = false;
44		×
45	// 字体前缀，默认 wtf
46	@Input() thyIconPrefix: string;
47		×
48	/**	×
49	* 标签大小
50	* @type sm \| default \| md \| lg \| xlg
51	* @default default	×
52	*/	×
53	@Input('thySize')
54	set thySize(value: string) {
55	this._classNameSM = value === 'sm';	×
56	this._classNameDM = value === 'md';	×
57	this._classNameLG = value === 'lg';	×
58	this._classNameXLG = value === 'xlg';
59	}
60
61	private nativeElement: HTMLElement;	×
62		×
63	private _typeClassNames: string[] = [];
64
65	private _labelClass?: string;	×
66		×
67	private _type?: string;	×
68		×
69	private _labelType?: string;	×
70
71	private _icon: string;
72		×
73	public beforeIconName: string;
74
75	public beforeIconClass: string[];
76		×
77	public afterIconName: string;	×
78
79	public afterIconClass: string[];
80
81	public _color?: string;	×
82		×
83	public _backgroundOpacity?: number = 0.1;	×
84		×
85	private hostRenderer = useHostRenderer();	×
86
87	/**
88	* 标签支持移除操作	×
89	*/
90	@Output() thyOnRemove: EventEmitter<any> = new EventEmitter<any>();
91
92	constructor(private el: ElementRef) {	×
93	this.nativeElement = this.el.nativeElement;	×
94	}
95
96	/**
97	* 标签是否支持鼠标滑过有效果，一般在标签有操作时使用	×
98	* @default false	×
99	*/	×
100	@Input('thyHasHover')
101	set thyHasHover(value: string) {
102	this._thyHasHover = coerceBooleanProperty(value);	×
103	}	×
104
105	/**	×
106	* 标签的类型	×
107	* @type default \| primary \| success \| info \| warning \| danger \| success \| emboss-default \| emboss-primary \| emboss-warning \| emboss-danger \| outline
108	*/
109	@Input()	×
110	set thyLabel(value: ThyLabelType) {	×
111	this._type = value;
112	this._setClassesByType();
113	}	×
114		×
115	/**	×
116	* 标签支持自定义颜色，需要与`thyLabel`属性同时使用
117	*/
118	@Input()
119	set thyLabelColor(color: string) {	×
120	this._color = color;	×
121	this._setLabelCustomColor();	×
122	}	×
123
124	/**
125	* 标签支持自定义背景颜色透明度，配合`thyLabelColor`使用，范围为：0～1	×
126	* @default 0.1
127	*/	×
128	@Input()
129	@InputNumber()	×
130	set thyBackgroundOpacity(opacity: number) {	×
131	if (opacity && opacity > 0 && this._backgroundOpacity !== opacity) {	×
132	this._backgroundOpacity = opacity;
133	this._setLabelCustomColor();
134	}	×
135	}
136
137	/**
138	* 标签状态类型
139	* @type state \| pill	×
140	* @default state
141	*/
142	@Input()	×
143	set thyLabelType(labelType: string) {
144	this._labelType = labelType;
145	this._setClassesByType();	×
146	}
147		1✔
148	/**
149	* 标签支持在显示文案前添加图标
150	*/	1✔
151	@Input()
152	set thyBeforeIcon(icon: string) {
153	this._icon = icon;
154	if (this._icon) {
155	if (this._icon.includes('wtf')) {
156	const iconPrefix = this.thyIconPrefix \|\| 'wtf';
157	this.beforeIconClass = [iconPrefix, `${this._icon}`];
158	} else {
159	this.beforeIconName = `${this._icon}`;
160	}
161	} else {
162	this.beforeIconClass = null;
163	this.beforeIconName = null;
164	}
165	}
166
167	/**
168	* 标签支持在显示文案后添加图标	1✔
169	*/
170	@Input()
171	set thyAfterIcon(icon: string) {
172	this._icon = icon;
173	if (this._icon) {	1✔
174	if (this._icon.includes('wtf')) {
175	const iconPrefix = this.thyIconPrefix \|\| 'wtf';
176	this.afterIconClass = [iconPrefix, `${this._icon}`];
177	} else {
178	this.afterIconName = `${this._icon}`;
179	}
180	} else {
181	this.afterIconClass = null;
182	this.afterIconName = null;
183	}
184	}
185
186	private _setClassesByType() {
187	let classNames: string[] = null;
188	if (labelTypeClassesMap[this._type]) {
189	classNames = labelTypeClassesMap[this._type];
190	} else {
191	classNames = ['thy-label'];
192	classNames.push(`thy-label-${this._type}`);
193	}
194	if (this._labelType) {
195	classNames = [...classNames, `thy-label-${this._labelType}`];
196	}
197	// remove old classes
198	this._typeClassNames.forEach(className => {
199	this._removeClass(className);
200	});
201	// add new classes
202	this._typeClassNames = classNames;
203	this._typeClassNames.forEach(className => {
204	this._addClass(className);
205	});
206	}
207
208	private _setLabelCustomColor() {
209	if (this._color) {
210	if (this._type.indexOf('emboss') > -1) {
211	if (this._type === 'emboss-status') {
212	this.el.nativeElement.style.color = '#333';
213	} else {
214	this.el.nativeElement.style.color = this._color;
215	}
216	this.el.nativeElement.style.backgroundColor = helpers.hexToRgb(this._color, this._backgroundOpacity);
217	} else if (this._type.indexOf('outline') > -1) {
218	this.el.nativeElement.style.color = this._color;
219	this.el.nativeElement.style.borderColor = this._color;
220	} else {
221	this.el.nativeElement.style.backgroundColor = this._color;
222	}
223	}
224	}
225
226	private _addClass(className: string) {
227	this.hostRenderer.addClass(className);
228	}
229
230	private _removeClass(className: string) {
231	this.hostRenderer.removeClass(className);
232	}
233
234	remove($event: Event) {
235	this.thyOnRemove.emit($event);
236	}
237	}

atinc / ngx-tethys / d9ae709b-3c27-4b69-b125-b8b80b54f90b

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