atinc / ngx-tethys / #55

Committed 30 Jul 2025 07:08AM UTC coverage: 9.866% (-80.4%) from 90.297%

Build # #55

Build Type

push

Committed by

Commit Message

feat(empty): add setMessage for update display text #TINFR-2616

Run Details

92 of 6794 branches covered (1.35%)

Branch coverage included in aggregate %.

2014 of 14552 relevant lines covered (13.84%)

6.15 hits per line

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

6.98

/src/skeleton/skeleton-rectangle.component.ts

import { Component, ChangeDetectionStrategy, ViewEncapsulation, inject, input, computed } from '@angular/core';
import { ThySkeleton } from './skeleton.component';
import { coerceBooleanProperty, helpers, ThyBooleanInput } from 'ngx-tethys/util';
import { THY_SKELETON_CONFIG } from './skeleton.config';
import { isUndefinedOrNull } from 'ngx-tethys/util';
import { NgStyle } from '@angular/common';
import { coerceCssPixelValue } from '@angular/cdk/coercion';
/**
 * 骨架屏矩形组件
 * @name thy-skeleton-rectangle
 * @order 20
 */
@Component({
    selector: 'thy-skeleton-rectangle',
    host: {
        '[class.thy-skeleton]': 'true',
        '[class.thy-skeleton-rectangle]': 'true',
        '[style.background]': 'primaryColor()',
        '[style.width]': 'thyRowWidth()',
        '[style.height]': 'thyRowHeight()',
        '[style.borderRadius]': 'thyBorderRadius()'
    },
    template: ` <div class="thy-skeleton-after" [ngStyle]="afterStyles()"></div> `,
    changeDetection: ChangeDetectionStrategy.OnPush,
    encapsulation: ViewEncapsulation.None,
    imports: [NgStyle]
})
export class ThySkeletonRectangle {
    private skeletonConfigModel = inject(THY_SKELETON_CONFIG, { optional: true });

    private parent = inject(ThySkeleton, { optional: true })!;

    /**
     * 是否展示动画
     * @default true
     */
    readonly thyAnimated = input<boolean, ThyBooleanInput>(undefined, { transform: coerceBooleanProperty });

    /**
     * 动画速度
     * @default 1.5s
     */
    readonly thyAnimatedInterval = input<string | number>();

    /**
     * 骨架边框圆角
     * @default 4px
     */
    readonly thyBorderRadius = input<string, string | number>(undefined, { transform: coerceCssPixelValue });

    /**
     * 骨架宽度
     * @default 100%
     */
    readonly thyRowWidth = input<string, string | number>(undefined, { transform: coerceCssPixelValue });

    /**
     * 骨架高度
     * @default 20px
     */
    readonly thyRowHeight = input<string, string | number>(undefined, { transform: coerceCssPixelValue });

    /**
     * 骨架主色
     * @default #F7F7F7
     */
    readonly thyPrimaryColor = input<string>();

    /**
     * 骨架次色
     * @default #aaaaaa
     */
    readonly thySecondaryColor = input<string>();

    readonly animatedInterval = computed(() => {
        return this.thyAnimatedInterval() || this.parent?.thyAnimatedInterval() || this.skeletonConfigModel.thyAnimatedInterval;
    });

    readonly primaryColor = computed(() => {
        return this.thyPrimaryColor() || this.parent?.thyPrimaryColor() || this.skeletonConfigModel.thyPrimaryColor;
    });

    readonly secondaryColor = computed(() => {
        return this.thySecondaryColor() || this.parent?.thySecondaryColor() || this.skeletonConfigModel.thySecondaryColor;
    });

    readonly animated = computed(() => {
        if (!isUndefinedOrNull(this.thyAnimated())) {
            return this.thyAnimated();
        }
        if (!isUndefinedOrNull(this.parent?.thyAnimated())) {
            return this.parent.thyAnimated();
        }
        return this.skeletonConfigModel.thyAnimated;
    });

    readonly afterStyles = computed(() => {
        return {
            ...(this.secondaryColor() && {
                background: `linear-gradient(90deg, ${helpers.hexToRgb(this.secondaryColor(), 0)}, ${helpers.hexToRgb(
                    this.secondaryColor(),
                    0.15
                )}, ${helpers.hexToRgb(this.secondaryColor(), 0)}`
            }),
            animation: ![false, 'false'].includes(this.animated()) ? `thy-skeleton-animation ${this.animatedInterval()}s infinite` : 'none'
        };
    });
}

1	import { Component, ChangeDetectionStrategy, ViewEncapsulation, inject, input, computed } from '@angular/core';
2	import { ThySkeleton } from './skeleton.component';
3	import { coerceBooleanProperty, helpers, ThyBooleanInput } from 'ngx-tethys/util';
4	import { THY_SKELETON_CONFIG } from './skeleton.config';
5	import { isUndefinedOrNull } from 'ngx-tethys/util';
6	import { NgStyle } from '@angular/common';
7	import { coerceCssPixelValue } from '@angular/cdk/coercion';
8	/**
9	* 骨架屏矩形组件
10	* @name thy-skeleton-rectangle
11	* @order 20
12	*/
13	@Component({
14	selector: 'thy-skeleton-rectangle',
15	host: {	1✔
16	'[class.thy-skeleton]': 'true',
17	'[class.thy-skeleton-rectangle]': 'true',	×
18	'[style.background]': 'primaryColor()',	×
19	'[style.width]': 'thyRowWidth()',	×
20	'[style.height]': 'thyRowHeight()',	×
21	'[style.borderRadius]': 'thyBorderRadius()'	×
22	},	×
23	template: ` <div class="thy-skeleton-after" [ngStyle]="afterStyles()"></div> `,	×
24	changeDetection: ChangeDetectionStrategy.OnPush,	×
25	encapsulation: ViewEncapsulation.None,	×
26	imports: [NgStyle]	×
27	})	×
28	export class ThySkeletonRectangle {
29	private skeletonConfigModel = inject(THY_SKELETON_CONFIG, { optional: true });	×
30		×
31	private parent = inject(ThySkeleton, { optional: true })!;
32		×
33	/**	×
34	* 是否展示动画
35	* @default true	×
36	*/	×
37	readonly thyAnimated = input<boolean, ThyBooleanInput>(undefined, { transform: coerceBooleanProperty });	×
38
39	/**	×
40	* 动画速度	×
41	* @default 1.5s
42	*/	×
43	readonly thyAnimatedInterval = input<string \| number>();
44		×
45	/**	×
46	* 骨架边框圆角	×
47	* @default 4px
48	*/
49	readonly thyBorderRadius = input<string, string \| number>(undefined, { transform: coerceCssPixelValue });	×
50
51	/**
52	* 骨架宽度
53	* @default 100%	1✔
54	*/
55	readonly thyRowWidth = input<string, string \| number>(undefined, { transform: coerceCssPixelValue });
56
57	/**
58	* 骨架高度
59	* @default 20px
60	*/
61	readonly thyRowHeight = input<string, string \| number>(undefined, { transform: coerceCssPixelValue });
62
63	/**	1✔
64	* 骨架主色
65	* @default #F7F7F7
66	*/
67	readonly thyPrimaryColor = input<string>();
68
69	/**
70	* 骨架次色
71	* @default #aaaaaa
72	*/
73	readonly thySecondaryColor = input<string>();
74
75	readonly animatedInterval = computed(() => {
76	return this.thyAnimatedInterval() \|\| this.parent?.thyAnimatedInterval() \|\| this.skeletonConfigModel.thyAnimatedInterval;
77	});
78
79	readonly primaryColor = computed(() => {
80	return this.thyPrimaryColor() \|\| this.parent?.thyPrimaryColor() \|\| this.skeletonConfigModel.thyPrimaryColor;
81	});
82
83	readonly secondaryColor = computed(() => {
84	return this.thySecondaryColor() \|\| this.parent?.thySecondaryColor() \|\| this.skeletonConfigModel.thySecondaryColor;
85	});
86
87	readonly animated = computed(() => {
88	if (!isUndefinedOrNull(this.thyAnimated())) {
89	return this.thyAnimated();
90	}
91	if (!isUndefinedOrNull(this.parent?.thyAnimated())) {
92	return this.parent.thyAnimated();
93	}
94	return this.skeletonConfigModel.thyAnimated;
95	});
96
97	readonly afterStyles = computed(() => {
98	return {
99	...(this.secondaryColor() && {
100	background: `linear-gradient(90deg, ${helpers.hexToRgb(this.secondaryColor(), 0)}, ${helpers.hexToRgb(
101	this.secondaryColor(),
102	0.15
103	)}, ${helpers.hexToRgb(this.secondaryColor(), 0)}`
104	}),
105	animation: ![false, 'false'].includes(this.animated()) ? `thy-skeleton-animation ${this.animatedInterval()}s infinite` : 'none'
106	};
107	});
108	}

atinc / ngx-tethys / #55

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