d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { Component, Input, OnInit, ContentChild, TemplateRef, OnChanges, ChangeDetectionStrategy, SimpleChanges } from '@angular/core';
import { isString } from 'ngx-tethys/util';
import { useHostRenderer } from '@tethys/cdk/dom';
import { ThyIconComponent } from 'ngx-tethys/icon';
import { NgIf, NgTemplateOutlet } from '@angular/common';
import { InputBoolean } from 'ngx-tethys/core';

const weakTypes = ['primary-weak', 'success-weak', 'warning-weak', 'danger-weak'];

type ThyAlertType =
    | 'success'
    | 'warning'
    | 'danger'
    | 'info'
    | 'primary'
    | 'primary-weak'
    | 'success-weak'
    | 'warning-weak'
    | 'danger-weak';

export type ThyAlertTheme = 'fill' | 'bordered' | 'naked';

const typeIconsMap: Record<string, string> = {
    success: 'check-circle-fill',
    warning: 'waring-fill',
    danger: 'close-circle-fill',
    info: 'minus-circle-fill',
    primary: 'info-circle-fill',
    'primary-weak': 'info-circle-fill',
    'success-weak': 'check-circle-fill',
    'warning-weak': 'waring-fill',
    'danger-weak': 'close-circle-fill'
};

/**
 * 警告提示，展现需要关注的信息
 * @name thy-alert
 * @order 10
 */
@Component({
    selector: 'thy-alert',
    templateUrl: './alert.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    host: {
        class: 'thy-alert',
        '[class.thy-alert-hidden]': 'hidden'
    },
    standalone: true,
    imports: [NgIf, ThyIconComponent, NgTemplateOutlet]
})
export class ThyAlertComponent implements OnInit, OnChanges {
    private hidden = false;

    private showIcon = true;

    private icon: string;

    private type: ThyAlertType = 'info';

    private hostRenderer = useHostRenderer();

    public theme: ThyAlertTheme = 'fill';

    messageTemplate: TemplateRef<HTMLElement>;

    messageText: string;

    /**
     * 指定警告提示的类型
     * @type success | warning | danger | info | primary | primary-weak | success-weak | warning-weak | danger-weak
     * @default info
     */
    @Input() set thyType(value: ThyAlertType) {
        this.type = value;
    }

    /**
     * 指定警告提示的主题
     * @type fill | bordered | naked
     * @default fill
     */
    @Input() set thyTheme(value: ThyAlertTheme) {
        this.theme = value;
    }

    /**
     * 显示警告提示的内容
     */
    @Input() set thyMessage(value: string | TemplateRef<HTMLElement>) {
        if (value instanceof TemplateRef) {
            this.messageTemplate = value;
        } else {
            this.messageText = value;
        }
    }

    /**
     * 显示自定义图标，可传 true/false 控制是否显示图标，或者传字符串去指定图标名称
     */
    @Input()
    set thyIcon(value: boolean | string) {
        if (value) {
            this.showIcon = true;
            this.icon = isString(value) ? value.toString() : null;
        } else {
            this.showIcon = false;
        }
    }

    get thyIcon() {
        if (this.showIcon) {
            return this.icon || typeIconsMap[this.type];
        } else {
            return null;
        }
    }

    /**
     * 是否显示关闭警告框按钮，默认不显示
     * @default false
     */
    @Input() @InputBoolean() thyCloseable: boolean;

    /**
     * 警告框自定义操作
     * @type TemplateRef
     */
    @ContentChild('operation') alertOperation: TemplateRef<any>;

    constructor() {}

    ngOnInit() {
        this.updateClass();
    }

    ngOnChanges(changes: SimpleChanges): void {
        if ((changes.thyTheme && !changes.thyTheme.firstChange) || (changes.thyType && !changes.thyType.firstChange)) {
            this.updateClass();
        }
    }

    closeAlert() {
        this.hidden = true;
    }

    private updateClass() {
        // 兼容 'primary-weak', 'success-weak', 'warning-weak', 'danger-weak' types
        let theme = this.theme;
        let type = this.type;
        if (weakTypes.includes(this.type)) {
            theme = 'bordered';
            type = this.type.split('-')[0] as ThyAlertType;
        }
        this.hostRenderer.updateClass([`thy-alert-${theme}`, `thy-alert-${theme}-${type}`]);
    }
}

1	import { Component, Input, OnInit, ContentChild, TemplateRef, OnChanges, ChangeDetectionStrategy, SimpleChanges } from '@angular/core';
2	import { isString } from 'ngx-tethys/util';
3	import { useHostRenderer } from '@tethys/cdk/dom';
4	import { ThyIconComponent } from 'ngx-tethys/icon';
5	import { NgIf, NgTemplateOutlet } from '@angular/common';
6	import { InputBoolean } from 'ngx-tethys/core';
7
8	const weakTypes = ['primary-weak', 'success-weak', 'warning-weak', 'danger-weak'];
9		1✔
10	type ThyAlertType =	1✔
11	\| 'success'
12	\| 'warning'
13	\| 'danger'
14	\| 'info'
15	\| 'primary'
16	\| 'primary-weak'
17	\| 'success-weak'
18	\| 'warning-weak'
19	\| 'danger-weak';
20
21	export type ThyAlertTheme = 'fill' \| 'bordered' \| 'naked';
22
23	const typeIconsMap: Record<string, string> = {
24	success: 'check-circle-fill',
25	warning: 'waring-fill',
26	danger: 'close-circle-fill',	1✔
27	info: 'minus-circle-fill',
28	primary: 'info-circle-fill',	×
29	'primary-weak': 'info-circle-fill',
30	'success-weak': 'check-circle-fill',
31	'warning-weak': 'waring-fill',	×
32	'danger-weak': 'close-circle-fill'
33	};
34		×
35	/**	×
36	* 警告提示，展现需要关注的信息
37	* @name thy-alert
38	* @order 10	×
39	*/
40	@Component({
41	selector: 'thy-alert',
42	templateUrl: './alert.component.html',	×
43	changeDetection: ChangeDetectionStrategy.OnPush,	×
44	host: {	×
45	class: 'thy-alert',
46	'[class.thy-alert-hidden]': 'hidden'
47	},	×
48	standalone: true,
49	imports: [NgIf, ThyIconComponent, NgTemplateOutlet]
50	})
51	export class ThyAlertComponent implements OnInit, OnChanges {	×
52	private hidden = false;	×
53
54	private showIcon = true;
55		×
56	private icon: string;
57
58	private type: ThyAlertType = 'info';
59		×
60	private hostRenderer = useHostRenderer();	×
61		×
62	public theme: ThyAlertTheme = 'fill';	×
63		×
64	messageTemplate: TemplateRef<HTMLElement>;
65
66	messageText: string;	×
67
68	/**
69	* 指定警告提示的类型	×
70	* @type success \| warning \| danger \| info \| primary \| primary-weak \| success-weak \| warning-weak \| danger-weak	×
71	* @default info
72	*/
73	@Input() set thyType(value: ThyAlertType) {
74	this.type = value;	×
75	}
76
77	/**
78	* 指定警告提示的主题	×
79	* @type fill \| bordered \| naked	×
80	* @default fill	×
81	*/	×
82	@Input() set thyTheme(value: ThyAlertTheme) {	×
83	this.theme = value;
84	}	×
85
86	/**	1✔
87	* 显示警告提示的内容	1✔
88	*/
89	@Input() set thyMessage(value: string \| TemplateRef<HTMLElement>) {
90	if (value instanceof TemplateRef) {
91	this.messageTemplate = value;
92	} else {
93	this.messageText = value;
94	}
95	}
96		1✔
97	/**
98	* 显示自定义图标，可传 true/false 控制是否显示图标，或者传字符串去指定图标名称
99	*/
100	@Input()	1✔
101	set thyIcon(value: boolean \| string) {
102	if (value) {
103	this.showIcon = true;
104	this.icon = isString(value) ? value.toString() : null;
105	} else {
106	this.showIcon = false;
107	}
108	}
109
110	get thyIcon() {
111	if (this.showIcon) {
112	return this.icon \|\| typeIconsMap[this.type];
113	} else {
114	return null;
115	}
116	}
117
118	/**
119	* 是否显示关闭警告框按钮，默认不显示
120	* @default false
121	*/
122	@Input() @InputBoolean() thyCloseable: boolean;
123
124	/**
125	* 警告框自定义操作
126	* @type TemplateRef
127	*/
128	@ContentChild('operation') alertOperation: TemplateRef<any>;
129
130	constructor() {}
131
132	ngOnInit() {
133	this.updateClass();
134	}
135
136	ngOnChanges(changes: SimpleChanges): void {
137	if ((changes.thyTheme && !changes.thyTheme.firstChange) \|\| (changes.thyType && !changes.thyType.firstChange)) {
138	this.updateClass();
139	}
140	}
141
142	closeAlert() {
143	this.hidden = true;
144	}
145
146	private updateClass() {
147	// 兼容 'primary-weak', 'success-weak', 'warning-weak', 'danger-weak' types
148	let theme = this.theme;
149	let type = this.type;
150	if (weakTypes.includes(this.type)) {
151	theme = 'bordered';
152	type = this.type.split('-')[0] as ThyAlertType;
153	}
154	this.hostRenderer.updateClass([`thy-alert-${theme}`, `thy-alert-${theme}-${type}`]);
155	}
156	}

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