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

7.32

/src/skeleton/skeleton-circle.component.ts

import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input, 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-circle
 * @order 30
 */
@Component({
    selector: 'thy-skeleton-circle',
    host: {
        '[class.thy-skeleton]': 'true',
        '[class.thy-skeleton-circle]': 'true',
        '[style.background]': 'primaryColor()',
        '[style.width]': 'thySize()',
        '[style.height]': 'thySize()'
    },
    template: ` <div class="thy-skeleton-after" [ngStyle]="afterStyles()"></div> `,
    changeDetection: ChangeDetectionStrategy.OnPush,
    encapsulation: ViewEncapsulation.None,
    imports: [NgStyle]
})
export class ThySkeletonCircle {
    private skeletonConfigModel = inject(THY_SKELETON_CONFIG, { optional: true })!;

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

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

    /**
     * 骨架尺寸
     * @default 20px
     */
    readonly thySize = input<string, string | number>(`20px`, { transform: coerceCssPixelValue });

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

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

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

    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, Input, 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	* 骨架屏圆形组件
11	* @name thy-skeleton-circle
12	* @order 30
13	*/
14	@Component({
15	selector: 'thy-skeleton-circle',	1✔
16	host: {
17	'[class.thy-skeleton]': 'true',	×
18	'[class.thy-skeleton-circle]': 'true',	×
19	'[style.background]': 'primaryColor()',	×
20	'[style.width]': 'thySize()',	×
21	'[style.height]': 'thySize()'	×
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 ThySkeletonCircle {	×
29	private skeletonConfigModel = inject(THY_SKELETON_CONFIG, { optional: true })!;
30		×
31	private parent = inject(ThySkeleton, { optional: true })!;	×
32
33	/**	×
34	* 动画速度	×
35	* @default 1.5s	×
36	*/
37	readonly thyAnimatedInterval = input<string \| number>();	×
38		×
39	/**
40	* 骨架尺寸	×
41	* @default 20px
42	*/	×
43	readonly thySize = input<string, string \| number>(`20px`, { transform: coerceCssPixelValue });	×
44		×
45	/**
46	* 骨架主色
47	* @default #F7F7F7	×
48	*/
49	readonly thyPrimaryColor = input<string>();
50
51	/**	1✔
52	* 骨架次色
53	* @default #aaaaaa
54	*/
55	readonly thySecondaryColor = input<string>();
56
57	/**
58	* 是否展示动画
59	* @default true	1✔
60	*/
61	readonly thyAnimated = input<boolean, ThyBooleanInput>(undefined, { transform: coerceBooleanProperty });
62
63	readonly animatedInterval = computed(() => {
64	return this.thyAnimatedInterval() \|\| this.parent?.thyAnimatedInterval() \|\| this.skeletonConfigModel.thyAnimatedInterval;
65	});
66
67	readonly primaryColor = computed(() => {
68	return this.thyPrimaryColor() \|\| this.parent?.thyPrimaryColor() \|\| this.skeletonConfigModel.thyPrimaryColor;
69	});
70
71	readonly secondaryColor = computed(() => {
72	return this.thySecondaryColor() \|\| this.parent?.thySecondaryColor() \|\| this.skeletonConfigModel.thySecondaryColor;
73	});
74
75	readonly animated = computed(() => {
76	if (!isUndefinedOrNull(this.thyAnimated())) {
77	return this.thyAnimated();
78	}
79	if (!isUndefinedOrNull(this.parent?.thyAnimated())) {
80	return this.parent.thyAnimated();
81	}
82	return this.skeletonConfigModel.thyAnimated;
83	});
84
85	readonly afterStyles = computed(() => {
86	return {
87	...(this.secondaryColor() && {
88	background: `linear-gradient(90deg, ${helpers.hexToRgb(this.secondaryColor(), 0)}, ${helpers.hexToRgb(
89	this.secondaryColor(),
90	0.15
91	)}, ${helpers.hexToRgb(this.secondaryColor(), 0)}`
92	}),
93	animation: ![false, 'false'].includes(this.animated()) ? `thy-skeleton-animation ${this.animatedInterval()}s infinite` : 'none'
94	};
95	});
96	}

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