318f6a76-ec61-40cf-b4e2-3412ee628af1

Committed 16 May 2025 03:26AM UTC coverage: 90.296% (-0.007%) from 90.303%

Build # 318f6a76-ec61-40cf-b4e2-3412ee628af1

Build Type

push

circleci

Committed by

web-flow

Commit Message

refactor(dot): migrate to signal for dot #TINFR-1467 (#3384)

Run Details

5605 of 6867 branches covered (81.62%)

Branch coverage included in aggregate %.

7 of 7 new or added lines in 1 file covered. (100.0%)

1 existing line in 1 file now uncovered.

13424 of 14207 relevant lines covered (94.49%)

918.96 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

97.44

/src/dot/dot.component.ts

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

import { ChangeDetectionStrategy, Component, ElementRef, Renderer2, ViewEncapsulation, effect, inject, input } 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]': 'thyTheme() === "fill"',
        '[class.dot-theme-outline]': 'thyTheme() === "outline"',
        '[class.dot-shape-square]': 'thyShape() === "square"',
        '[class.dot-shape-circle]': 'thyShape() === "circle"',
        '[class.dot-size-md]': 'thySize() === "md"',
        '[class.dot-size-sm]': 'thySize() === "sm"',
        '[class.dot-size-xs]': 'thySize() === "xs"',
        '[class.dot-size-lg]': 'thySize() === "lg"',
        '[class.dot-size-xlg]': 'thySize() === "xlg"'
    }
})
export class ThyDot {
    private el = inject(ElementRef);
    private renderer = inject(Renderer2);
    private nativeElement: HTMLElement;

    constructor() {
        this.nativeElement = this.el.nativeElement;

        effect(() => {
            this.updateColorStyle();
        });
    }

    /**
     * 颜色，可选值为：`primary` `success` `info` `warning` `danger` `default` `light`和自定义颜色，如`#2cccda` `red`  `rgb(153, 153, 153)`
     * @type ThyThemeColor | string
     */
    readonly thyColor = input<ThyColorType, ThyColorType>(DEFAULT_COLOR_NAME, {
        transform: (value: ThyColorType) => value || DEFAULT_COLOR_NAME
    });

    /**
     * 大小
     * @type xs | sm | md | lg | xlg
     */
    readonly thySize = input<ThySizeType, ThySizeType>(DEFAULT_SIZE_NAME, {
        transform: (value: ThySizeType) => value || DEFAULT_SIZE_NAME
    });

    /**
     * 主题
     * @type outline(线框) | fill(填充)
     */
    readonly thyTheme = input<ThyThemeType, ThyThemeType>(DEFAULT_THEME_NAME, {
        transform: (value: ThyThemeType) => value || DEFAULT_THEME_NAME
    });

    /**
     * 形状
     * @type circle(圆形) | square(方形)
     */
    readonly thyShape = input<ThyShapeType, ThyShapeType>(DEFAULT_SHAPE_NAME, {
        transform: (value: ThyShapeType) => value || DEFAULT_SHAPE_NAME
    });

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

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

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

atinc / ngx-tethys / 318f6a76-ec61-40cf-b4e2-3412ee628af1

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