3b8b93d4-8db5-472a-bbe7-cf27fadeb78e

Committed 29 Apr 2025 11:06AM UTC coverage: 90.26% (-0.01%) from 90.272%

Build # 3b8b93d4-8db5-472a-bbe7-cf27fadeb78e

Build Type

Pull #3384

circleci

Committed by

minlovehua

Commit Message

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

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

Run Details

5617 of 6882 branches covered (81.62%)

Branch coverage included in aggregate %.

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

2 existing lines in 2 files now uncovered.

13372 of 14156 relevant lines covered (94.46%)

921.69 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,
    Signal,
    ViewEncapsulation,
    computed,
    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]': '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"'
    }
})
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>(DEFAULT_COLOR_NAME);

    /**
     * 大小
     * @type xs | sm | md | lg | xlg
     */
    readonly thySize = input<ThySizeType>(DEFAULT_SIZE_NAME);

    size: Signal<ThySizeType> = computed(() => this.thySize() || DEFAULT_SIZE_NAME);

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

    theme: Signal<ThyThemeType> = computed(() => this.thyTheme() || DEFAULT_THEME_NAME);

    /**
     * 形状
     * @type circle(圆形) | square(方形)
     */
    readonly thyShape = input<ThyShapeType>(DEFAULT_SHAPE_NAME);

    shape: Signal<ThyShapeType> = computed(() => this.thyShape() || DEFAULT_SHAPE_NAME);

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

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

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

atinc / ngx-tethys / 3b8b93d4-8db5-472a-bbe7-cf27fadeb78e

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