atinc / ngx-tethys / #83

Committed 11 Aug 2025 06:08AM UTC coverage: 90.302% (-0.003%) from 90.305%

Build # #83

Build Type

push

Committed by

Commit Message

feat(layout): migrate inputs to signals inputs #TINFR-1480 (#3512)

Run Details

5536 of 6819 branches covered (81.18%)

Branch coverage included in aggregate %.

40 of 41 new or added lines in 3 files covered. (97.56%)

4 existing lines in 2 files now uncovered.

13851 of 14650 relevant lines covered (94.55%)

902.93 hits per line

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

84.78

/src/layout/header.component.ts

import { NgClass, NgTemplateOutlet } from '@angular/common';
import { ChangeDetectionStrategy, Component, Directive, Input, TemplateRef, computed, contentChild, input } from '@angular/core';
import { ThyIcon } from 'ngx-tethys/icon';
import { coerceBooleanProperty } from 'ngx-tethys/util';

/**
 * 头部布局指令
 * @name thyHeader
 * @order 10
 */
@Directive({
    selector: '[thyHeader]',
    host: {
        class: `thy-layout-header`,
        '[class.thy-layout-header-sm]': `thySize() === 'sm'`,
        '[class.thy-layout-header-lg]': `thySize() === 'lg'`,
        '[class.thy-layout-header-xlg]': `thySize() === 'xlg'`,
        '[class.thy-layout-header-shadow]': `thyShadow()`,
        '[class.thy-layout-header-divided]': `divided()`
    }
})
export class ThyHeaderDirective {
    /**
     * 头部大小
     * @type sm | md  | lg | xlg
     */
    readonly thySize = input<'sm' | 'md' | 'lg' | 'xlg'>('md');

    /**
     * 底部是否有阴影
     * @default false
     */
    readonly thyShadow = input(false, { transform: coerceBooleanProperty });

    /**
     * 底部是否有分割线
     */
    readonly thyDivided = input(false, { transform: coerceBooleanProperty });

    /**
     * 底部是否有分割线，已废弃，请使用 thyDivided
     * @deprecated please use thyDivided
     */
    readonly thyHasBorder = input(false, { transform: coerceBooleanProperty });

    readonly divided = computed(() => {
        const value = this.thyDivided();
        if (value !== undefined) {
            return value;
        }
        return this.thyHasBorder();
    });
}

/**
 * 头部布局组件
 * @name thy-header
 * @order 11
 */
@Component({
    selector: 'thy-header',
    preserveWhitespaces: false,
    templateUrl: './header.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    hostDirectives: [
        {
            directive: ThyHeaderDirective,
            inputs: ['thySize', 'thyShadow', 'thyHasBorder', 'thyDivided']
        }
    ],
    imports: [NgTemplateOutlet, ThyIcon, NgClass]
})
export class ThyHeader {
    /**
     * 头部标题
     */
    readonly thyTitle = input<string>(undefined);

    /**
     * 图标前缀，被弃用，图标使用 SVG 图标
     */
    readonly thyIconPrefix = input('wtf');

    /**
     * 图标，SVG 图标名称
     */
    readonly thyIcon = input<string>(undefined);

    readonly svgIconName = computed(() => {
        const icon = this.thyIcon();
        if (icon && !icon.includes('wtf')) {
            return icon;
        }
        return null;
    });

    readonly iconClass = computed(() => {
        const icon = this.svgIconName();
        if (icon) {
            return null;
        } else {
            const icon = this.thyIcon();
            if (icon && icon.includes('wtf')) {
                return `${this.thyIconPrefix()} ${icon}`;
            }
        }
        return null;
    });

    /**
     * 头部自定义标题模板，`<ng-template #headerTitle></ng-template>`
     * @type TemplateRef
     */
    readonly titleTemplateRef = contentChild<TemplateRef<any>>('headerTitle');

    /**
     * 头部自定义内容模板，`<ng-template #headerContent></ng-template>`
     * @type TemplateRef
     */
    readonly contentTemplateRef = contentChild<TemplateRef<any>>('headerContent');

    /**
     * 头部自定义操作模板，`<ng-template #headerOperation></ng-template>`
     * @type TemplateRef
     */
    readonly operationTemplateRef = contentChild<TemplateRef<any>>('headerOperation');
}

1	import { NgClass, NgTemplateOutlet } from '@angular/common';
2	import { ChangeDetectionStrategy, Component, Directive, Input, TemplateRef, computed, contentChild, input } from '@angular/core';
3	import { ThyIcon } from 'ngx-tethys/icon';
4	import { coerceBooleanProperty } from 'ngx-tethys/util';
5
6	/**
7	* 头部布局指令
8	* @name thyHeader
9	* @order 10
10	*/
11	@Directive({
12	selector: '[thyHeader]',
13	host: {	1✔
14	class: `thy-layout-header`,
15	'[class.thy-layout-header-sm]': `thySize() === 'sm'`,	11✔
16	'[class.thy-layout-header-lg]': `thySize() === 'lg'`,	11✔
17	'[class.thy-layout-header-xlg]': `thySize() === 'xlg'`,	11✔
18	'[class.thy-layout-header-shadow]': `thyShadow()`,	11✔
19	'[class.thy-layout-header-divided]': `divided()`	11✔
20	}	13✔
21	})	13!
22	export class ThyHeaderDirective {	13✔
23	/**
UNCOV 24	* 头部大小	×
25	* @type sm \| md \| lg \| xlg
26	*/
27	readonly thySize = input<'sm' \| 'md' \| 'lg' \| 'xlg'>('md');	1✔
28
29	/**
30	* 底部是否有阴影
31	* @default false
32	*/
33	readonly thyShadow = input(false, { transform: coerceBooleanProperty });
34		1✔
35	/**
36	* 底部是否有分割线
37	*/
38	readonly thyDivided = input(false, { transform: coerceBooleanProperty });
39
40	/**
41	* 底部是否有分割线，已废弃，请使用 thyDivided
42	* @deprecated please use thyDivided
43	*/
44	readonly thyHasBorder = input(false, { transform: coerceBooleanProperty });
45
46	readonly divided = computed(() => {
47	const value = this.thyDivided();
48	if (value !== undefined) {
49	return value;
50	}
51	return this.thyHasBorder();
52	});
53	}	1✔
54
55	/**	7✔
56	* 头部布局组件	7✔
57	* @name thy-header	7✔
58	* @order 11	7✔
59	*/	6✔
60	@Component({	6✔
61	selector: 'thy-header',	1✔
62	preserveWhitespaces: false,
63	templateUrl: './header.component.html',	5✔
64	changeDetection: ChangeDetectionStrategy.OnPush,
65	hostDirectives: [	7✔
66	{	5✔
67	directive: ThyHeaderDirective,	5!
UNCOV 68	inputs: ['thySize', 'thyShadow', 'thyHasBorder', 'thyDivided']	×
69	}
70	],
71	imports: [NgTemplateOutlet, ThyIcon, NgClass]	5✔
72	})	5!
UNCOV 73	export class ThyHeader {	×
74	/**
75	* 头部标题
76	*/	5✔
77	readonly thyTitle = input<string>(undefined);
78		7✔
79	/**	7✔
80	* 图标前缀，被弃用，图标使用 SVG 图标	7✔
81	*/
82	readonly thyIconPrefix = input('wtf');	1✔
83
84	/**
85	* 图标，SVG 图标名称
86	*/
87	readonly thyIcon = input<string>(undefined);
88
89	readonly svgIconName = computed(() => {
90	const icon = this.thyIcon();
91	if (icon && !icon.includes('wtf')) {	1✔
92	return icon;
93	}
94	return null;
95	});
96
97	readonly iconClass = computed(() => {
98	const icon = this.svgIconName();
99	if (icon) {
100	return null;
101	} else {
102	const icon = this.thyIcon();
103	if (icon && icon.includes('wtf')) {
104	return `${this.thyIconPrefix()} ${icon}`;
105	}
106	}
107	return null;
108	});
109
110	/**
111	* 头部自定义标题模板，`<ng-template #headerTitle></ng-template>`
112	* @type TemplateRef
113	*/
114	readonly titleTemplateRef = contentChild<TemplateRef<any>>('headerTitle');
115
116	/**
117	* 头部自定义内容模板，`<ng-template #headerContent></ng-template>`
118	* @type TemplateRef
119	*/
120	readonly contentTemplateRef = contentChild<TemplateRef<any>>('headerContent');
121
122	/**
123	* 头部自定义操作模板，`<ng-template #headerOperation></ng-template>`
124	* @type TemplateRef
125	*/
126	readonly operationTemplateRef = contentChild<TemplateRef<any>>('headerOperation');
127	}

atinc / ngx-tethys / #83

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