d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { isThemeColor, ThyThemeColor } from 'ngx-tethys/core';

import { ChangeDetectionStrategy, Component, ElementRef, Input, Renderer2, ViewEncapsulation } from '@angular/core';

export type ThyColorType = ThyThemeColor | string;
export type ThySizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xlg';
export type ThyThemeType = 'outline' | 'fill';
export type ThyShapeType = 'square' | 'circle';

export const COMPONENT_CLASS_NAME = 'thy-dot';

export const DEFAULT_COLOR_NAME = 'primary';
export const DEFAULT_SIZE_NAME = 'sm';
export const DEFAULT_THEME_NAME = 'fill';
export const DEFAULT_SHAPE_NAME = 'circle';

/**
 * 显示一个点的组件
 * @name thy-dot,[thy-dot],[thyDot]
 * @order 10
 */
@Component({
    selector: 'thy-dot,[thy-dot],[thyDot]',
    template: '',
    encapsulation: ViewEncapsulation.None,
    changeDetection: ChangeDetectionStrategy.OnPush,
    host: {
        class: 'thy-dot',
        '[class.dot-theme-fill]': 'theme === "fill"',
        '[class.dot-theme-outline]': 'theme === "outline"',
        '[class.dot-shape-square]': 'shape === "square"',
        '[class.dot-shape-circle]': 'shape === "circle"',
        '[class.dot-size-md]': 'size === "md"',
        '[class.dot-size-sm]': 'size === "sm"',
        '[class.dot-size-xs]': 'size === "xs"',
        '[class.dot-size-lg]': 'size === "lg"',
        '[class.dot-size-xlg]': 'size === "xlg"'
    },
    standalone: true
})
export class ThyDotComponent {
    public size: ThySizeType = DEFAULT_SIZE_NAME;
    public theme: ThyThemeType = DEFAULT_THEME_NAME;
    public shape: ThyShapeType = DEFAULT_SHAPE_NAME;
    public color: ThyColorType = DEFAULT_COLOR_NAME;
    private nativeElement: HTMLElement;
    constructor(private el: ElementRef, private renderer: Renderer2) {
        this.nativeElement = this.el.nativeElement;
        this.updateColorStyle();
    }

    /**
     * 颜色，可选值为：`primary` `success` `info` `warning` `danger` `default` `light`和自定义颜色，如`#2cccda` `red`  `rgb(153, 153, 153)`
     * @type ThyThemeColor | string
     * @default primary
     */
    @Input()
    set thyColor(value: ThyColorType) {
        if (value) {
            this.color = value;
            this.updateColorStyle();
        }
    }

    /**
     * 大小
     * @type xs | sm | md | lg | xlg
     * @default sm
     */
    @Input()
    set thySize(value: ThySizeType) {
        if (value) {
            this.size = value;
        }
    }

    /**
     * 主题
     * @type outline(线框) | fill(填充)
     * @default fill
     */
    @Input()
    set thyTheme(value: ThyThemeType) {
        if (value) {
            this.theme = value;
        }
    }

    /**
     * 形状
     * @type circle(圆形) | square(方形)
     * @default circle
     */
    @Input()
    set thyShape(value: ThyShapeType) {
        if (value) {
            this.shape = value;
        }
    }

    updateColorStyle() {
        Array.from(this.nativeElement.classList)
            .filter(it => /^dot-color-[\w]+$/.test(it))
            .forEach(it => this.renderer.removeClass(this.nativeElement, it));

        if (isThemeColor(this.color)) {
            this.renderer.setStyle(this.nativeElement, 'borderColor', 'none');
            this.renderer.addClass(this.nativeElement, `dot-color-${this.color}`);
        } else {
            this.renderer.setStyle(this.nativeElement, 'borderColor', this.color);
        }
    }
}

1	import { isThemeColor, ThyThemeColor } from 'ngx-tethys/core';
2
3	import { ChangeDetectionStrategy, Component, ElementRef, Input, Renderer2, ViewEncapsulation } from '@angular/core';
4		1✔
5	export type ThyColorType = ThyThemeColor \| string;	1✔
6	export type ThySizeType = 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xlg';	1✔
7	export type ThyThemeType = 'outline' \| 'fill';	1✔
8	export type ThyShapeType = 'square' \| 'circle';	1✔
9
10	export const COMPONENT_CLASS_NAME = 'thy-dot';
11
12	export const DEFAULT_COLOR_NAME = 'primary';
13	export const DEFAULT_SIZE_NAME = 'sm';
14	export const DEFAULT_THEME_NAME = 'fill';	1✔
15	export const DEFAULT_SHAPE_NAME = 'circle';
16		×
17	/**	×
18	* 显示一个点的组件	×
19	* @name thy-dot,[thy-dot],[thyDot]	×
20	* @order 10	×
21	*/	×
22	@Component({	×
23	selector: 'thy-dot,[thy-dot],[thyDot]',	×
24	template: '',
25	encapsulation: ViewEncapsulation.None,
26	changeDetection: ChangeDetectionStrategy.OnPush,	×
27	host: {	×
28	class: 'thy-dot',	×
29	'[class.dot-theme-fill]': 'theme === "fill"',
30	'[class.dot-theme-outline]': 'theme === "outline"',
31	'[class.dot-shape-square]': 'shape === "square"',
32	'[class.dot-shape-circle]': 'shape === "circle"',	×
33	'[class.dot-size-md]': 'size === "md"',	×
34	'[class.dot-size-sm]': 'size === "sm"',
35	'[class.dot-size-xs]': 'size === "xs"',
36	'[class.dot-size-lg]': 'size === "lg"',
37	'[class.dot-size-xlg]': 'size === "xlg"'	×
38	},	×
39	standalone: true
40	})
41	export class ThyDotComponent {
42	public size: ThySizeType = DEFAULT_SIZE_NAME;	×
43	public theme: ThyThemeType = DEFAULT_THEME_NAME;	×
44	public shape: ThyShapeType = DEFAULT_SHAPE_NAME;
45	public color: ThyColorType = DEFAULT_COLOR_NAME;
46	private nativeElement: HTMLElement;
47	constructor(private el: ElementRef, private renderer: Renderer2) {	×
48	this.nativeElement = this.el.nativeElement;	×
49	this.updateColorStyle();	×
50	}	×
51		×
52	/**	×
53	* 颜色，可选值为：`primary` `success` `info` `warning` `danger` `default` `light`和自定义颜色，如`#2cccda` `red` `rgb(153, 153, 153)`
54	* @type ThyThemeColor \| string
55	* @default primary	×
56	*/
57	@Input()
58	set thyColor(value: ThyColorType) {	1✔
59	if (value) {
60	this.color = value;
61	this.updateColorStyle();
62	}	1✔
63	}
64
65	/**
66	* 大小
67	* @type xs \| sm \| md \| lg \| xlg
68	* @default sm
69	*/	1✔
70	@Input()
71	set thySize(value: ThySizeType) {
72	if (value) {
73	this.size = value;
74	}
75	}
76
77	/**
78	* 主题
79	* @type outline(线框) \| fill(填充)
80	* @default fill
81	*/
82	@Input()
83	set thyTheme(value: ThyThemeType) {
84	if (value) {
85	this.theme = value;
86	}
87	}
88
89	/**
90	* 形状
91	* @type circle(圆形) \| square(方形)
92	* @default circle
93	*/
94	@Input()
95	set thyShape(value: ThyShapeType) {
96	if (value) {
97	this.shape = value;
98	}
99	}
100
101	updateColorStyle() {
102	Array.from(this.nativeElement.classList)
103	.filter(it => /^dot-color-[\w]+$/.test(it))
104	.forEach(it => this.renderer.removeClass(this.nativeElement, it));
105
106	if (isThemeColor(this.color)) {
107	this.renderer.setStyle(this.nativeElement, 'borderColor', 'none');
108	this.renderer.addClass(this.nativeElement, `dot-color-${this.color}`);
109	} else {
110	this.renderer.setStyle(this.nativeElement, 'borderColor', this.color);
111	}
112	}
113	}

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