ba7e05e2-37c0-44c6-8725-6f617aa0d43e

import { Component, ElementRef, OnChanges, Input, OnInit, ChangeDetectionStrategy, SimpleChanges } from '@angular/core';
import { InputBoolean, isThemeColor, ThyThemeColor } from 'ngx-tethys/core';
import { hexToRgb } from 'ngx-tethys/util';
import { useHostRenderer } from '@tethys/cdk/dom';

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"'
    },
    standalone: true
})
export class ThyTagComponent implements OnInit, OnChanges {
    private color: ThyTagColor = 'default';

    private hostRenderer = useHostRenderer();

    /**
     * 标签颜色，thyColor 的简写
     * @type primary | success | info | warning | danger | default | light | string
     * @default default
     */
    @Input()
    set thyTag(value: ThyTagColor) {
        if (value) {
            this.color = value;
        }
    }

    /**
     * 标签形状
     * @type pill | rectangle
     */
    @Input() thyShape: ThyTagShape = 'rectangle';

    /**
     * 标签颜色，支持设置主题色和颜色值，主题色为 default、primary、success、info、warning、danger
     */
    @Input()
    set thyColor(color: ThyTagColor) {
        this.color = color;
    }

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

    /**
     * 标签大小
     * @type sm | md | lg
     */
    @Input() thySize: ThyTagSize = 'md';

    /**
     * 可 Hover 悬停的标签，设置为 true 时会有一个 Hover 效果
     * @default false
     */
    @Input()
    @InputBoolean()
    thyHoverable: boolean | string;

    constructor(private elementRef: ElementRef) {}

    ngOnInit(): void {
        this.setColor();
    }

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

atinc / ngx-tethys / ba7e05e2-37c0-44c6-8725-6f617aa0d43e

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