27ef3353-2177-4415-8bf3-dd0cb0a459b3

Committed 28 Nov 2023 02:12AM UTC coverage: 90.303% (+0.01%) from 90.289%

Build # 27ef3353-2177-4415-8bf3-dd0cb0a459b3

Build Type

push

circleci

Committed by

web-flow

Commit Message

feat(layout): add directives for the layout component series and refactor existing layout components #INFR-10500 (#2919)

Run Details

5316 of 6547 branches covered (0.0%)

Branch coverage included in aggregate %.

79 of 80 new or added lines in 9 files covered. (98.75%)

3 existing lines in 2 files now uncovered.

13253 of 14016 relevant lines covered (94.56%)

975.87 hits per line

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

87.5

/src/layout/header.component.ts

import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
import { ChangeDetectionStrategy, Component, ContentChild, Directive, Input, OnInit, TemplateRef } from '@angular/core';
import { InputBoolean } from 'ngx-tethys/core';
import { ThyIconComponent } 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`
    },
    standalone: true
})
export class ThyHeaderDirective {
    /**
     * 头部大小
     * @type sm | md  | lg | xlg
     */
    @Input('thySize') thySize: 'sm' | 'md' | 'lg' | 'xlg' = 'md';

    /**
     * 底部是否有阴影
     * @default false
     */
    @Input() @InputBoolean() thyShadow = false;

    divided = false;

    /**
     * 底部是否有分割线
     */
    @Input()
    @InputBoolean()
    set thyDivided(value: string | boolean) {
        this.divided = value as boolean;
    }

    /**
     * 底部是否有分割线，已废弃，请使用 thyDivided
     * @deprecated please use thyDivided
     */
    @Input('thyHasBorder')
    set thyHasBorder(value: string) {
        this.divided = coerceBooleanProperty(value);
    }
}

/**
 * 头部布局组件
 * @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']
        }
    ],
    standalone: true,
    imports: [NgTemplateOutlet, NgIf, ThyIconComponent, NgClass, ThyHeaderDirective]
})
export class ThyHeaderComponent {
    public iconClass: string;

    public svgIconName: string;

    /**
     * 头部标题
     */
    @Input() thyTitle: string;

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

    /**
     * 图标，SVG 图标名称
     */
    @Input('thyIcon')
    set thyIcon(value: string) {
        if (value) {
            if (value.includes('wtf')) {
                this.iconClass = `${this.thyIconPrefix} ${value}`;
            } else {
                this.svgIconName = value;
            }
        } else {
            this.iconClass = null;
            this.svgIconName = null;
        }
    }

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

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

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

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

atinc / ngx-tethys / 27ef3353-2177-4415-8bf3-dd0cb0a459b3

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