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

13.48

/src/grid/flex.ts

import { ChangeDetectionStrategy, Component, Directive, computed, effect, input } from '@angular/core';
import { useHostRenderer } from '@tethys/cdk/dom';
import { isUndefinedOrNull } from '@tethys/cdk/is';

export type ThyFlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
export type ThyFlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
export type ThyFlexJustifyContent =
    | 'start'
    | 'end'
    | 'flex-start'
    | 'flex-end'
    | 'center'
    | 'space-between'
    | 'space-around'
    | 'initial'
    | 'inherit';
export type ThyFlexAlignItems = 'start' | 'end' | 'stretch' | 'center' | 'flex-start' | 'flex-end' | 'baseline' | 'initial' | 'inherit';
export type ThyFlexGrow = '1' | '0' | 0 | 1;
export type ThyFlexShrink = '1' | '0' | 0 | 1;

/**
 * 设置容器为 Flex 布局组件
 * @name thy-flex, [thyFlex]
 * @order 20
 */
@Directive({
    selector: '[thyFlex]',
    host: {
        class: 'thy-flex d-flex'
    }
})
// eslint-disable-next-line @angular-eslint/directive-class-suffix
export class ThyFlex {
    private hostRenderer = useHostRenderer();

    /**
     * Flex 方向，为 row 或者 column
     * @default row
     */
    readonly thyDirection = input<ThyFlexDirection>();

    /**
     * Flex Wrap
     * @default nowrap
     */
    readonly thyWrap = input<ThyFlexWrap>();

    /**
     * Justify Content
     */
    readonly thyJustifyContent = input<ThyFlexJustifyContent>();

    /**
     * Align Items
     */
    readonly thyAlignItems = input<ThyFlexAlignItems>();

    /**
     * Flex Item 之间的间隙 Gap
     * @default 0
     */
    readonly thyGap = input<number>();

    protected readonly direction = computed(() => {
        return this.thyDirection() || 'row';
    });

    constructor() {
        effect(() => {
            this.updateClasses();
        });
    }

    private updateClasses() {
        const classes: string[] = [];
        const justifyContent = this.thyJustifyContent();
        if (!isUndefinedOrNull(justifyContent)) {
            classes.push(`justify-content-${normalizeStartEnd(justifyContent)}`);
        }

        const alignItems = this.thyAlignItems();
        if (!isUndefinedOrNull(alignItems)) {
            classes.push(`align-items-${normalizeStartEnd(alignItems)}`);
        }

        const wrap = this.thyWrap();
        if (!isUndefinedOrNull(wrap)) {
            classes.push(`flex-${wrap}`);
        }

        const direction = this.direction();
        if (!isUndefinedOrNull(direction)) {
            classes.push(`flex-${direction}`);
        }
        this.hostRenderer.updateClass(classes);
        this.hostRenderer.setStyle('gap', `${this.thyGap() ?? '0'}px`);
    }
}

/**
 * @internal
 */
@Component({
    selector: 'thy-flex',
    template: `<ng-content></ng-content>`,
    changeDetection: ChangeDetectionStrategy.OnPush,
    hostDirectives: [
        {
            directive: ThyFlex,
            inputs: ['thyDirection', 'thyWrap', 'thyJustifyContent', 'thyAlignItems', 'thyGap']
        }
    ],
    imports: []
})
export class ThyFlexComponent {}

/**
 * 设置为 Flex Item 组件
 * @name thy-flex-item, [thyFlexItem]
 * @order 25
 */
@Directive({
    selector: '[thyFlexItem]',
    host: {
        class: 'thy-flex-item'
    }
})
// eslint-disable-next-line @angular-eslint/directive-class-suffix
export class ThyFlexItem {
    private hostRenderer = useHostRenderer();

    /**
     * Flex Item 属性，表示 grow 、shrink 、basis
     */
    readonly thyFlexItem = input<'fill' | string>();

    /**
     * Flew Grow，设置或检索弹性盒子的扩展比率，设置 1 为填充剩余区域
     */
    readonly thyGrow = input<ThyFlexGrow>();

    /**
     * Flex Shrink，设置或检索弹性盒收缩比例
     * @default 1
     */
    readonly thyShrink = input<ThyFlexShrink>();

    /**
     * Flex Basis，设置或检索弹性盒伸缩基准值
     * @default 1
     */
    readonly thyBasis = input<string>();

    constructor() {
        effect(() => {
            this.updateClasses();
        });
    }

    private updateClasses() {
        const flexItem = this.thyFlexItem();
        const classes: string[] = [];
        this.hostRenderer.setStyle('flex', '');
        this.hostRenderer.setStyle('basis', '');
        if (flexItem) {
            if (flexItem === 'fill') {
                classes.push(`flex-${flexItem}`);
            } else {
                this.hostRenderer.setStyle('flex', flexItem);
            }
        }
        const grow = this.thyGrow();
        if (!isUndefinedOrNull(grow)) {
            classes.push(`flex-grow-${grow}`);
        }
        const shrink = this.thyShrink();
        if (!isUndefinedOrNull(shrink)) {
            classes.push(`flex-shrink-${shrink}`);
        }
        const basis = this.thyBasis();
        if (!isUndefinedOrNull(basis)) {
            this.hostRenderer.setStyle('flex-basis', basis);
        }
        this.hostRenderer.updateClass(classes);
    }
}

/**
 * @internal
 */
@Component({
    selector: 'thy-flex-item',
    template: `<ng-content></ng-content>`,
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [],
    hostDirectives: [
        {
            directive: ThyFlexItem,
            inputs: ['thyFlexItem', 'thyGrow', 'thyShrink', 'thyBasis']
        }
    ]
})
export class ThyFlexItemComponent {}

function normalizeStartEnd(value: string): string {
    return value === 'flex-start' ? 'start' : value === 'flex-end' ? 'end' : value;
}

1	import { ChangeDetectionStrategy, Component, Directive, computed, effect, input } from '@angular/core';
2	import { useHostRenderer } from '@tethys/cdk/dom';
3	import { isUndefinedOrNull } from '@tethys/cdk/is';
4
5	export type ThyFlexDirection = 'row' \| 'column' \| 'row-reverse' \| 'column-reverse';
6	export type ThyFlexWrap = 'nowrap' \| 'wrap' \| 'wrap-reverse';
7	export type ThyFlexJustifyContent =
8	\| 'start'
9	\| 'end'
10	\| 'flex-start'
11	\| 'flex-end'	1✔
12	\| 'center'
UNCOV 13	\| 'space-between'	×
UNCOV 14	\| 'space-around'	×
UNCOV 15	\| 'initial'	×
UNCOV 16	\| 'inherit';	×
UNCOV 17	export type ThyFlexAlignItems = 'start' \| 'end' \| 'stretch' \| 'center' \| 'flex-start' \| 'flex-end' \| 'baseline' \| 'initial' \| 'inherit';	×
UNCOV 18	export type ThyFlexGrow = '1' \| '0' \| 0 \| 1;	×
UNCOV 19	export type ThyFlexShrink = '1' \| '0' \| 0 \| 1;	×
UNCOV 20		×
21	/**
UNCOV 22	* 设置容器为 Flex 布局组件	×
UNCOV 23	* @name thy-flex, [thyFlex]	×
24	* @order 20
25	*/
26	@Directive({
UNCOV 27	selector: '[thyFlex]',	×
UNCOV 28	host: {	×
UNCOV 29	class: 'thy-flex d-flex'	×
UNCOV 30	}	×
31	})
UNCOV 32	// eslint-disable-next-line @angular-eslint/directive-class-suffix	×
UNCOV 33	export class ThyFlex {	×
UNCOV 34	private hostRenderer = useHostRenderer();	×
35
UNCOV 36	/**	×
UNCOV 37	* Flex 方向，为 row 或者 column	×
UNCOV 38	* @default row	×
39	*/
UNCOV 40	readonly thyDirection = input<ThyFlexDirection>();	×
UNCOV 41		×
UNCOV 42	/**	×
43	* Flex Wrap
UNCOV 44	* @default nowrap	×
UNCOV 45	*/	×
46	readonly thyWrap = input<ThyFlexWrap>();
47		1✔
48	/**	1✔
49	* Justify Content
50	*/
51	readonly thyJustifyContent = input<ThyFlexJustifyContent>();
52
53	/**
54	* Align Items
55	*/
56	readonly thyAlignItems = input<ThyFlexAlignItems>();	1✔
57
58	/**
59	* Flex Item 之间的间隙 Gap
60	* @default 0
61	*/
62	readonly thyGap = input<number>();
63
64	protected readonly direction = computed(() => {
65	return this.thyDirection() \|\| 'row';
66	});
67
68	constructor() {
69	effect(() => {
70	this.updateClasses();
71	});	1✔
72	}
73		1✔
74	private updateClasses() {
75	const classes: string[] = [];
76	const justifyContent = this.thyJustifyContent();
77	if (!isUndefinedOrNull(justifyContent)) {
78	classes.push(`justify-content-${normalizeStartEnd(justifyContent)}`);
79	}
80
81	const alignItems = this.thyAlignItems();
82	if (!isUndefinedOrNull(alignItems)) {
83	classes.push(`align-items-${normalizeStartEnd(alignItems)}`);
84	}
85
86	const wrap = this.thyWrap();
87	if (!isUndefinedOrNull(wrap)) {
88	classes.push(`flex-${wrap}`);
89	}
90
91	const direction = this.direction();
92	if (!isUndefinedOrNull(direction)) {
93	classes.push(`flex-${direction}`);	1✔
94	}
UNCOV 95	this.hostRenderer.updateClass(classes);	×
UNCOV 96	this.hostRenderer.setStyle('gap', `${this.thyGap() ?? '0'}px`);	×
UNCOV 97	}	×
UNCOV 98	}	×
UNCOV 99		×
UNCOV 100	/**	×
UNCOV 101	* @internal	×
102	*/
103	@Component({
104	selector: 'thy-flex',
UNCOV 105	template: `<ng-content></ng-content>`,	×
UNCOV 106	changeDetection: ChangeDetectionStrategy.OnPush,	×
UNCOV 107	hostDirectives: [	×
UNCOV 108	{	×
UNCOV 109	directive: ThyFlex,	×
UNCOV 110	inputs: ['thyDirection', 'thyWrap', 'thyJustifyContent', 'thyAlignItems', 'thyGap']	×
UNCOV 111	}	×
112	],
113	imports: []
UNCOV 114	})	×
115	export class ThyFlexComponent {}
116
UNCOV 117	/**	×
UNCOV 118	* 设置为 Flex Item 组件	×
UNCOV 119	* @name thy-flex-item, [thyFlexItem]	×
120	* @order 25
UNCOV 121	*/	×
UNCOV 122	@Directive({	×
UNCOV 123	selector: '[thyFlexItem]',	×
124	host: {
UNCOV 125	class: 'thy-flex-item'	×
UNCOV 126	}	×
UNCOV 127	})	×
128	// eslint-disable-next-line @angular-eslint/directive-class-suffix
UNCOV 129	export class ThyFlexItem {	×
130	private hostRenderer = useHostRenderer();
131		1✔
132	/**	1✔
133	* Flex Item 属性，表示 grow 、shrink 、basis
134	*/
135	readonly thyFlexItem = input<'fill' \| string>();
136
137	/**
138	* Flew Grow，设置或检索弹性盒子的扩展比率，设置 1 为填充剩余区域
139	*/	1✔
140	readonly thyGrow = input<ThyFlexGrow>();
141
142	/**
143	* Flex Shrink，设置或检索弹性盒收缩比例
144	* @default 1
145	*/
146	readonly thyShrink = input<ThyFlexShrink>();
147
148	/**
149	* Flex Basis，设置或检索弹性盒伸缩基准值
150	* @default 1
151	*/
152	readonly thyBasis = input<string>();
153
154	constructor() {	1✔
155	effect(() => {
156	this.updateClasses();	1✔
157	});
158	}
159
160	private updateClasses() {
161	const flexItem = this.thyFlexItem();
162	const classes: string[] = [];
163	this.hostRenderer.setStyle('flex', '');
164	this.hostRenderer.setStyle('basis', '');
165	if (flexItem) {
166	if (flexItem === 'fill') {
167	classes.push(`flex-${flexItem}`);
168	} else {
169	this.hostRenderer.setStyle('flex', flexItem);
170	}
171	}
UNCOV 172	const grow = this.thyGrow();	×
173	if (!isUndefinedOrNull(grow)) {
174	classes.push(`flex-grow-${grow}`);
175	}
176	const shrink = this.thyShrink();
177	if (!isUndefinedOrNull(shrink)) {
178	classes.push(`flex-shrink-${shrink}`);
179	}
180	const basis = this.thyBasis();
181	if (!isUndefinedOrNull(basis)) {
182	this.hostRenderer.setStyle('flex-basis', basis);
183	}
184	this.hostRenderer.updateClass(classes);
185	}
186	}
187
188	/**
189	* @internal
190	*/
191	@Component({
192	selector: 'thy-flex-item',
193	template: `<ng-content></ng-content>`,
194	changeDetection: ChangeDetectionStrategy.OnPush,
195	imports: [],
196	hostDirectives: [
197	{
198	directive: ThyFlexItem,
199	inputs: ['thyFlexItem', 'thyGrow', 'thyShrink', 'thyBasis']
200	}
201	]
202	})
203	export class ThyFlexItemComponent {}
204
205	function normalizeStartEnd(value: string): string {
206	return value === 'flex-start' ? 'start' : value === 'flex-end' ? 'end' : value;
207	}

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