d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { InputBoolean, InputNumber, isTextColor } from 'ngx-tethys/core';
import { coerceBooleanProperty } from 'ngx-tethys/util';

import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit } from '@angular/core';
import { NgIf } from '@angular/common';

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

/**
 * 徽标组件，支持组件`thy-badge`和`thyBadge`指令两种使用方式
 * @name thy-badge,[thyBadge]
 */
@Component({
    selector: 'thy-badge,[thyBadge]',
    templateUrl: './badge.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    host: {
        class: 'thy-badge-container',
        '[class.thy-badge-wrapper]': 'isWrapper'
    },
    standalone: true,
    imports: [NgIf]
})
export class ThyBadgeComponent implements OnInit {
    displayContent = '';

    badgeClassName = '';

    private nativeElement: any;

    private initialized = false;

    // 是否包裹在元素上
    protected isWrapper = false;

    public isShowBadge = true;

    private keepShowValue = false;

    private value: number | string = '';

    private valueHasBeenSet = false;

    private maxCount: number;

    private type: string;

    private size: ThyBadgeSize;

    private isDot: boolean;

    private isHollow: boolean;

    protected textColor: string;

    protected builtInTextColorClass: string;

    protected backgroundColor: string;

    protected builtInBackgroundColorClass: string;

    protected supClasses: string[] = [];

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

    /**
     * 徽标类型
     * @type default | primary | danger | warning | success
     * @default danger
     */
    @Input()
    set thyType(value: string) {
        this.type = value;
        if (this.initialized) {
            this.combineBadgeClasses();
        }
    }

    /**
     * 徽标内容数字
     * @type number
     */
    @Input()
    @InputNumber()
    set thyCount(value: number) {
        this.value = value;
        this.valueHasBeenSet = true;
        if (this.initialized) {
            this.combineBadgeDisplayContent();
            this.combineBadgeClasses();
        }
    }

    /**
     * 徽标内容文本
     * @type string
     */
    @Input()
    set thyContent(value: string) {
        this.value = value;
        this.valueHasBeenSet = true;
        if (this.initialized) {
            this.combineBadgeDisplayContent();
            this.combineBadgeClasses();
        }
    }

    /**
     * 已废弃，徽标内容文本，命名错误，请使用 thyContent
     * @deprecated
     */
    @Input()
    set thyContext(value: string) {
        this.thyContent = value;
    }

    /**
     * 徽标显示的最大值, 与 thyCount 一起使用,thyCount 超过了 thyMaxCount 设置的值时，徽标内容为 thyMaxCount+
     * @type number
     */
    @Input()
    @InputNumber()
    set thyMaxCount(value: number) {
        this.maxCount = value;
        if (this.initialized) {
            this.combineBadgeDisplayContent();
            this.combineBadgeClasses();
        }
    }

    /**
     * 徽标显示的大小
     * @type md | sm | lg
     * @default md
     */
    @Input()
    set thySize(value: ThyBadgeSize) {
        this.size = value;

        if (this.initialized) {
            this.combineBadgeClasses();
        }
    }

    /**
     * 已废弃，徽标是一个实心点，已经被废弃
     * @deprecated
     */
    @Input()
    @InputBoolean()
    set thyIsDot(value: boolean) {
        this.isDot = value;
        if (this.initialized) {
            this.combineBadgeClasses();
        }
    }

    /**
     * 已废弃，徽标是一个空心点
     * @deprecated
     */
    @Input()
    @InputBoolean()
    set thyIsHollow(value: boolean) {
        this.isHollow = value;
        if (this.initialized) {
            this.combineBadgeClasses();
        }
    }

    /**
     * thyCount 为 0 时，强制显示数字 0，默认不显示
     * @default false
     */
    @Input()
    @InputBoolean()
    set thyKeepShow(value: boolean) {
        this.keepShowValue = coerceBooleanProperty(value);
        if (this.initialized) {
            this.combineBadgeDisplayContent();
        }
    }

    /**
     * 设置徽标字体的颜色，支持内置颜色和自定义颜色 'primary' | '#87d068' | ...
     * @type string
     */
    @Input()
    set thyTextColor(value: string) {
        if (isTextColor(value)) {
            this.builtInTextColorClass = `text-${value}`;
            this.textColor = null;
        } else {
            this.textColor = value;
            this.builtInTextColorClass = null;
        }
        if (this.initialized) {
            this.combineBadgeClasses();
        }
    }

    /**
     * 设置徽标的背景颜色，支持内置颜色和自定义颜色 'primary' | '#87d068' | ...
     * @type string
     */
    @Input()
    set thyBackgroundColor(value: string) {
        if (isTextColor(value)) {
            this.builtInBackgroundColorClass = `bg-${value}`;
            this.backgroundColor = null;
        } else {
            this.backgroundColor = value;
            this.builtInBackgroundColorClass = null;
        }
        if (this.initialized) {
            this.combineBadgeClasses();
        }
    }

    ngOnInit() {
        let childNodeCount = 0;
        this.nativeElement.childNodes.forEach((n: HTMLElement) => {
            if (['#comment'].indexOf(n.nodeName) < 0) {
                childNodeCount++;
            }
        });
        this.isWrapper = childNodeCount > 0;

        this.combineBadgeClasses();

        if (this.valueHasBeenSet) {
            this.combineBadgeDisplayContent();
        }

        this.initialized = true;
    }

    private combineBadgeClasses() {
        const classes: string[] = [];
        classes.push(`thy-badge-${this.type || 'danger'}`);
        if (this.size) {
            classes.push(`thy-badge-${this.size}`);
        }
        if (this.isDot) {
            classes.push(`thy-badge-dot`);
        } else if (this.isHollow) {
            classes.push(`thy-badge-hollow`);
        } else {
            classes.push(`thy-badge-count`);
        }

        if (this.builtInTextColorClass) {
            classes.push(this.builtInTextColorClass);
        }
        if (this.builtInBackgroundColorClass) {
            classes.push(this.builtInBackgroundColorClass);
        }
        this.badgeClassName = classes.join(' ');
    }

    private combineBadgeDisplayContent() {
        this.displayContent = this.value as string;
        if (this.value && this.maxCount != undefined && this.value > this.maxCount) {
            this.displayContent = `${this.maxCount}+`;
        }

        if (!this.value && !this.keepShowValue) {
            this.isShowBadge = false;
        } else {
            this.isShowBadge = true;
        }
    }
}

1	import { InputBoolean, InputNumber, isTextColor } from 'ngx-tethys/core';
2	import { coerceBooleanProperty } from 'ngx-tethys/util';
3
4	import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit } from '@angular/core';
5	import { NgIf } from '@angular/common';
6
7	export type ThyBadgeSize = 'md' \| 'sm' \| 'lg';
8
9	/**
10	* 徽标组件，支持组件`thy-badge`和`thyBadge`指令两种使用方式
11	* @name thy-badge,[thyBadge]	1✔
12	*/
13	@Component({	×
14	selector: 'thy-badge,[thyBadge]',	×
15	templateUrl: './badge.component.html',	×
16	changeDetection: ChangeDetectionStrategy.OnPush,	×
17	host: {
18	class: 'thy-badge-container',	×
19	'[class.thy-badge-wrapper]': 'isWrapper'	×
20	},	×
21	standalone: true,	×
22	imports: [NgIf]	×
23	})	×
24	export class ThyBadgeComponent implements OnInit {	×
25	displayContent = '';
26
27	badgeClassName = '';	×
28		×
29	private nativeElement: any;	×
30
31	private initialized = false;
32
33	// 是否包裹在元素上	×
34	protected isWrapper = false;	×
35		×
36	public isShowBadge = true;	×
37		×
38	private keepShowValue = false;
39
40	private value: number \| string = '';
41		×
42	private valueHasBeenSet = false;	×
43		×
44	private maxCount: number;	×
45		×
46	private type: string;
47
48	private size: ThyBadgeSize;
49		×
50	private isDot: boolean;
51
52	private isHollow: boolean;	×
53		×
54	protected textColor: string;	×
55		×
56	protected builtInTextColorClass: string;
57
58	protected backgroundColor: string;
59		×
60	protected builtInBackgroundColorClass: string;	×
61		×
62	protected supClasses: string[] = [];
63
64	constructor(private elementRef: ElementRef) {
65	this.nativeElement = this.elementRef.nativeElement;	×
66	}	×
67		×
68	/**
69	* 徽标类型
70	* @type default \| primary \| danger \| warning \| success
71	* @default danger	×
72	*/	×
73	@Input()	×
74	set thyType(value: string) {
75	this.type = value;
76	if (this.initialized) {
77	this.combineBadgeClasses();	×
78	}	×
79	}	×
80
81	/**
82	* 徽标内容数字
83	* @type number	×
84	*/	×
85	@Input()	×
86	@InputNumber()
87	set thyCount(value: number) {
88	this.value = value;	×
89	this.valueHasBeenSet = true;	×
90	if (this.initialized) {
91	this.combineBadgeDisplayContent();	×
92	this.combineBadgeClasses();	×
93	}
94	}
95
96	/**	×
97	* 徽标内容文本	×
98	* @type string	×
99	*/
100	@Input()
101	set thyContent(value: string) {	×
102	this.value = value;	×
103	this.valueHasBeenSet = true;
104	if (this.initialized) {	×
105	this.combineBadgeDisplayContent();	×
106	this.combineBadgeClasses();
107	}
108	}
109		×
110	/**	×
111	* 已废弃，徽标内容文本，命名错误，请使用 thyContent	×
112	* @deprecated	×
113	*/
114	@Input()
115	set thyContext(value: string) {	×
116	this.thyContent = value;	×
117	}	×
118		×
119	/**
120	* 徽标显示的最大值, 与 thyCount 一起使用,thyCount 超过了 thyMaxCount 设置的值时，徽标内容为 thyMaxCount+	×
121	* @type number
122	*/
123	@Input()	×
124	@InputNumber()	×
125	set thyMaxCount(value: number) {	×
126	this.maxCount = value;	×
127	if (this.initialized) {
128	this.combineBadgeDisplayContent();	×
129	this.combineBadgeClasses();	×
130	}
131	}	×
132		×
133	/**
134	* 徽标显示的大小
135	* @type md \| sm \| lg	×
136	* @default md
137	*/	×
138	@Input()	×
139	set thySize(value: ThyBadgeSize) {
140	this.size = value;	×
141		×
142	if (this.initialized) {
143	this.combineBadgeClasses();	×
144	}
145	}
146		×
147	/**	×
148	* 已废弃，徽标是一个实心点，已经被废弃	×
149	* @deprecated
150	*/	×
151	@Input()	×
152	@InputBoolean()
153	set thyIsDot(value: boolean) {
154	this.isDot = value;	×
155	if (this.initialized) {
156	this.combineBadgeClasses();
157	}	1✔
158	}
159
160	/**	1✔
161	* 已废弃，徽标是一个空心点
162	* @deprecated
163	*/
164	@Input()
165	@InputBoolean()
166	set thyIsHollow(value: boolean) {
167	this.isHollow = value;
168	if (this.initialized) {
169	this.combineBadgeClasses();
170	}
171	}
172
173	/**
174	* thyCount 为 0 时，强制显示数字 0，默认不显示	1✔
175	* @default false
176	*/
177	@Input()
178	@InputBoolean()
179	set thyKeepShow(value: boolean) {	1✔
180	this.keepShowValue = coerceBooleanProperty(value);
181	if (this.initialized) {
182	this.combineBadgeDisplayContent();
183	}
184	}	1✔
185
186	/**
187	* 设置徽标字体的颜色，支持内置颜色和自定义颜色 'primary' \| '#87d068' \| ...
188	* @type string
189	*/	1✔
190	@Input()
191	set thyTextColor(value: string) {
192	if (isTextColor(value)) {
193	this.builtInTextColorClass = `text-${value}`;
194	this.textColor = null;	1✔
195	} else {
196	this.textColor = value;
197	this.builtInTextColorClass = null;
198	}
199	if (this.initialized) {	1✔
200	this.combineBadgeClasses();
201	}
202	}
203
204	/**
205	* 设置徽标的背景颜色，支持内置颜色和自定义颜色 'primary' \| '#87d068' \| ...
206	* @type string
207	*/
208	@Input()
209	set thyBackgroundColor(value: string) {
210	if (isTextColor(value)) {
211	this.builtInBackgroundColorClass = `bg-${value}`;
212	this.backgroundColor = null;
213	} else {
214	this.backgroundColor = value;
215	this.builtInBackgroundColorClass = null;
216	}
217	if (this.initialized) {
218	this.combineBadgeClasses();
219	}
220	}
221
222	ngOnInit() {
223	let childNodeCount = 0;
224	this.nativeElement.childNodes.forEach((n: HTMLElement) => {
225	if (['#comment'].indexOf(n.nodeName) < 0) {
226	childNodeCount++;
227	}
228	});
229	this.isWrapper = childNodeCount > 0;
230
231	this.combineBadgeClasses();
232
233	if (this.valueHasBeenSet) {
234	this.combineBadgeDisplayContent();
235	}
236
237	this.initialized = true;
238	}
239
240	private combineBadgeClasses() {
241	const classes: string[] = [];
242	classes.push(`thy-badge-${this.type \|\| 'danger'}`);
243	if (this.size) {
244	classes.push(`thy-badge-${this.size}`);
245	}
246	if (this.isDot) {
247	classes.push(`thy-badge-dot`);
248	} else if (this.isHollow) {
249	classes.push(`thy-badge-hollow`);
250	} else {
251	classes.push(`thy-badge-count`);
252	}
253
254	if (this.builtInTextColorClass) {
255	classes.push(this.builtInTextColorClass);
256	}
257	if (this.builtInBackgroundColorClass) {
258	classes.push(this.builtInBackgroundColorClass);
259	}
260	this.badgeClassName = classes.join(' ');
261	}
262
263	private combineBadgeDisplayContent() {
264	this.displayContent = this.value as string;
265	if (this.value && this.maxCount != undefined && this.value > this.maxCount) {
266	this.displayContent = `${this.maxCount}+`;
267	}
268
269	if (!this.value && !this.keepShowValue) {
270	this.isShowBadge = false;
271	} else {
272	this.isShowBadge = true;
273	}
274	}
275	}

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