68ef226c-f83e-44c1-b8ed-e420a83c5d84

Committed 28 May 2025 10:31AM UTC coverage: 10.352% (-80.0%) from 90.316%

Build # 68ef226c-f83e-44c1-b8ed-e420a83c5d84

Build Type

Pull #3460

circleci

Committed by

pubuzhixing8

Commit Message

chore: xxx

Pull Request Pull Request #3460: refactor(icon): migrate signal input #TINFR-1476

Run Details

132 of 6823 branches covered (1.93%)

Branch coverage included in aggregate %.

10 of 14 new or added lines in 1 file covered. (71.43%)

11648 existing lines in 344 files now uncovered.

2078 of 14525 relevant lines covered (14.31%)

6.69 hits per line

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

16.67

/src/table/table-skeleton.component.ts

import { NgClass, NgStyle } from '@angular/common';
import {
    AfterViewInit,
    ChangeDetectionStrategy,
    ChangeDetectorRef,
    Component,
    ElementRef,
    Input,
    ViewChild,
    ViewEncapsulation,
    inject
} from '@angular/core';
import { InputCssPixel } from 'ngx-tethys/core';
import { ThySkeletonCircle, ThySkeletonRectangle } from 'ngx-tethys/skeleton';
import { ThyTableSkeletonColumn } from './table.interface';
import { ThyViewOutletDirective } from 'ngx-tethys/shared';
import { ThyTableColumnSkeletonType } from './enums';
import { ThyTableSize, ThyTableTheme } from './table.type';
import { coerceBooleanProperty } from 'ngx-tethys/util';

const COLUMN_COUNT = 5;

/**
 * 表格的骨架屏组件
 * @name thy-table-skeleton
 */
@Component({
    selector: 'thy-table-skeleton',
    templateUrl: './table-skeleton.component.html',
    host: {
        class: 'thy-table-skeleton'
    },
    changeDetection: ChangeDetectionStrategy.OnPush,
    encapsulation: ViewEncapsulation.None,
    imports: [NgClass, NgStyle, ThyViewOutletDirective, ThySkeletonRectangle, ThySkeletonCircle]
})
export class ThyTableSkeleton implements AfterViewInit {
    private cdr = inject(ChangeDetectorRef);

    @ViewChild('titleTemplate') titleTemplate: ElementRef<HTMLElement>;

    @ViewChild('memberTemplate') memberTemplate: ElementRef<HTMLElement>;

    @ViewChild('defaultTemplate') defaultTemplate: ElementRef<HTMLElement>;

    @ViewChild('checkboxTemplate') checkboxTemplate: ElementRef<HTMLElement>;

    /**
     * 骨架边框圆角
     */
    @Input()
    @InputCssPixel()
    thyBorderRadius: string | number;

    /**
     * 表格内容骨架高度
     */
    @Input()
    @InputCssPixel()
    thyRowHeight: string | number = '20px';

    /**
     * 是否开启动画
     * @default true
     */
    @Input({ transform: coerceBooleanProperty })
    thyAnimated: boolean = true;

    /**
     * 动画速度
     */
    @Input() thyAnimatedInterval: string;

    /**
     * 骨架主色
     */
    @Input() thyPrimaryColor: string;

    /**
     * 骨架次色
     */
    @Input() thySecondaryColor: string;

    rowCount: number[] = [];

    /**
     * 行数
     */
    @Input()
    set thyRowCount(value: number | string) {
        this.rowCount = Array.from({ length: +value });
    }

    /**
     * 是否展示骨架头
     * @default false
     */
    @Input({ transform: coerceBooleanProperty }) thyHeadless = false;

    /**
     * 骨架屏的风格
     * @type default | bordered | boxed
     */
    @Input() thyTheme: ThyTableTheme = 'default';

    /**
     * 骨架屏的大小
     * @type xs | sm | md | lg | xlg | default
     * @default md
     */
    @Input() thySize: ThyTableSize = 'md';

    /**
     * 设置表格最小宽度
     */
    @Input()
    @InputCssPixel()
    thyMinWidth: string | number;

    /**
     * 表格列骨架的配置项，支持配置列宽、骨架类型
     * @type ThyTableSkeletonColumn[]
     */
    @Input() set thyColumns(columns: ThyTableSkeletonColumn[]) {
        if (columns && columns.length) {
            this.columns = columns;
        } else {
            this.columns = [...this.defaultColumns];
        }
    }

    public titleHeight = '20px';

    public titleWidth = '50px';

    public checkboxWidth = '20px';

    public avatarSize = '24px';

    public columnType = ThyTableColumnSkeletonType;

    public skeletonColumnsMap: {
        [key: string]: ElementRef<HTMLElement>;
    } = {};

    get tableClassMap() {
        return {
            table: true,
            'table-bordered': this.thyTheme === 'bordered',
            'table-boxed': this.thyTheme === 'boxed',
            [`table-${this.thySize}`]: !!this.thySize
        };
    }

    private defaultColumns = Array.from({ length: COLUMN_COUNT }).map((item, index: number) => {
        if (index === 0) {
            return {
                width: '40%',
                type: ThyTableColumnSkeletonType.title
            };
        } else if (index === 1) {
            return {
                width: '17%',
                type: ThyTableColumnSkeletonType.member
            };
        } else {
            return {
                width: 'auto',
                type: ThyTableColumnSkeletonType.default
            };
        }
    });

    public columns: ThyTableSkeletonColumn[] = [...this.defaultColumns];

    ngAfterViewInit(): void {
        this.skeletonColumnsMap = {
            [ThyTableColumnSkeletonType.title]: this.titleTemplate,
            [ThyTableColumnSkeletonType.member]: this.memberTemplate,
            [ThyTableColumnSkeletonType.checkbox]: this.checkboxTemplate
        };
        this.cdr.detectChanges();
    }
}

1	import { NgClass, NgStyle } from '@angular/common';
2	import {
3	AfterViewInit,
4	ChangeDetectionStrategy,
5	ChangeDetectorRef,
6	Component,
7	ElementRef,
8	Input,
9	ViewChild,
10	ViewEncapsulation,	1✔
11	inject
12	} from '@angular/core';
13	import { InputCssPixel } from 'ngx-tethys/core';
14	import { ThySkeletonCircle, ThySkeletonRectangle } from 'ngx-tethys/skeleton';
15	import { ThyTableSkeletonColumn } from './table.interface';	1✔
16	import { ThyViewOutletDirective } from 'ngx-tethys/shared';
UNCOV 17	import { ThyTableColumnSkeletonType } from './enums';	×
UNCOV 18	import { ThyTableSize, ThyTableTheme } from './table.type';	×
UNCOV 19	import { coerceBooleanProperty } from 'ngx-tethys/util';	×
UNCOV 20		×
UNCOV 21	const COLUMN_COUNT = 5;	×
UNCOV 22		×
UNCOV 23	/**	×
UNCOV 24	* 表格的骨架屏组件	×
UNCOV 25	* @name thy-table-skeleton	×
UNCOV 26	*/	×
UNCOV 27	@Component({	×
UNCOV 28	selector: 'thy-table-skeleton',	×
UNCOV 29	templateUrl: './table-skeleton.component.html',	×
UNCOV 30	host: {	×
UNCOV 31	class: 'thy-table-skeleton'	×
UNCOV 32	},	×
33	changeDetection: ChangeDetectionStrategy.OnPush,
34	encapsulation: ViewEncapsulation.None,
35	imports: [NgClass, NgStyle, ThyViewOutletDirective, ThySkeletonRectangle, ThySkeletonCircle]
36	})
UNCOV 37	export class ThyTableSkeleton implements AfterViewInit {	×
UNCOV 38	private cdr = inject(ChangeDetectorRef);	×
39
40	@ViewChild('titleTemplate') titleTemplate: ElementRef<HTMLElement>;
41
42	@ViewChild('memberTemplate') memberTemplate: ElementRef<HTMLElement>;
43
UNCOV 44	@ViewChild('defaultTemplate') defaultTemplate: ElementRef<HTMLElement>;	×
45
46	@ViewChild('checkboxTemplate') checkboxTemplate: ElementRef<HTMLElement>;
47
48	/**
49	* 骨架边框圆角
UNCOV 50	*/	×
51	@Input()
52	@InputCssPixel()
UNCOV 53	thyBorderRadius: string \| number;	×
54
55	/**
UNCOV 56	* 表格内容骨架高度	×
UNCOV 57	*/	×
58	@Input()
59	@InputCssPixel()
UNCOV 60	thyRowHeight: string \| number = '20px';	×
61
62	/**
63	* 是否开启动画
UNCOV 64	* @default true	×
65	*/
66	@Input({ transform: coerceBooleanProperty })
67	thyAnimated: boolean = true;
68
69	/**
70	* 动画速度
71	*/
UNCOV 72	@Input() thyAnimatedInterval: string;	×
73
74	/**
75	* 骨架主色
76	*/
UNCOV 77	@Input() thyPrimaryColor: string;	×
78
79	/**	1✔
80	* 骨架次色
81	*/
82	@Input() thySecondaryColor: string;
83
84	rowCount: number[] = [];
85
86	/**
87	* 行数
88	*/
89	@Input()
90	set thyRowCount(value: number \| string) {
91	this.rowCount = Array.from({ length: +value });
92	}
93
94	/**
95	* 是否展示骨架头
96	* @default false
97	*/
98	@Input({ transform: coerceBooleanProperty }) thyHeadless = false;	1✔
99
100	/**
101	* 骨架屏的风格
102	* @type default \| bordered \| boxed	1✔
103	*/
104	@Input() thyTheme: ThyTableTheme = 'default';
105
106	/**	1✔
107	* 骨架屏的大小
108	* @type xs \| sm \| md \| lg \| xlg \| default
109	* @default md
110	*/	1✔
111	@Input() thySize: ThyTableSize = 'md';
112
113	/**
114	* 设置表格最小宽度
115	*/
116	@Input()
117	@InputCssPixel()
118	thyMinWidth: string \| number;
119
120	/**
121	* 表格列骨架的配置项，支持配置列宽、骨架类型
122	* @type ThyTableSkeletonColumn[]
123	*/
124	@Input() set thyColumns(columns: ThyTableSkeletonColumn[]) {
125	if (columns && columns.length) {
126	this.columns = columns;
127	} else {
128	this.columns = [...this.defaultColumns];
129	}
130	}
131
132	public titleHeight = '20px';
133
134	public titleWidth = '50px';
135
136	public checkboxWidth = '20px';
137
138	public avatarSize = '24px';
139
140	public columnType = ThyTableColumnSkeletonType;
141
142	public skeletonColumnsMap: {
143	[key: string]: ElementRef<HTMLElement>;
144	} = {};
145
146	get tableClassMap() {
147	return {
148	table: true,
149	'table-bordered': this.thyTheme === 'bordered',
150	'table-boxed': this.thyTheme === 'boxed',
151	[`table-${this.thySize}`]: !!this.thySize
152	};
153	}
154
155	private defaultColumns = Array.from({ length: COLUMN_COUNT }).map((item, index: number) => {
156	if (index === 0) {
157	return {
158	width: '40%',
159	type: ThyTableColumnSkeletonType.title
160	};
161	} else if (index === 1) {
162	return {
163	width: '17%',
164	type: ThyTableColumnSkeletonType.member
165	};
166	} else {
167	return {
168	width: 'auto',
169	type: ThyTableColumnSkeletonType.default
170	};
171	}
172	});
173
174	public columns: ThyTableSkeletonColumn[] = [...this.defaultColumns];
175
176	ngAfterViewInit(): void {
177	this.skeletonColumnsMap = {
178	[ThyTableColumnSkeletonType.title]: this.titleTemplate,
179	[ThyTableColumnSkeletonType.member]: this.memberTemplate,
180	[ThyTableColumnSkeletonType.checkbox]: this.checkboxTemplate
181	};
182	this.cdr.detectChanges();
183	}
184	}

atinc / ngx-tethys / 68ef226c-f83e-44c1-b8ed-e420a83c5d84

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