8caffb10-2922-4f9f-a55a-b97c0a59f8e7

Committed 16 May 2025 08:50AM UTC coverage: 90.329% (-0.007%) from 90.336%

Build # 8caffb10-2922-4f9f-a55a-b97c0a59f8e7

Build Type

push

circleci

Committed by

web-flow

Commit Message

feat(stepper): migrate to signal for stepper  #TINFR-1774 (#3417)

Run Details

5574 of 6836 branches covered (81.54%)

Branch coverage included in aggregate %.

16 of 17 new or added lines in 3 files covered. (94.12%)

2 existing lines in 1 file now uncovered.

13563 of 14350 relevant lines covered (94.52%)

910.4 hits per line

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

84.09

/src/stepper/stepper.component.ts

import {
    Component,
    numberAttribute,
    viewChildren,
    output,
    contentChildren,
    input,
    computed,
    effect,
    ChangeDetectionStrategy,
    signal,
    untracked
} from '@angular/core';
import { ThyStep, IThyStepperComponent, THY_STEPPER_COMPONENT } from './step.component';
import { ThyStepHeader } from './step-header.component';
import { NgTemplateOutlet } from '@angular/common';
import { coerceBooleanProperty } from 'ngx-tethys/util';

/**
 * 步骤条组件
 * @name thy-stepper
 * @order 10
 */
@Component({
    selector: 'thy-stepper',
    templateUrl: 'stepper.component.html',
    providers: [{ provide: THY_STEPPER_COMPONENT, useExisting: ThyStepper }],
    imports: [ThyStepHeader, NgTemplateOutlet],
    changeDetection: ChangeDetectionStrategy.OnPush,
    host: { class: 'thy-stepper' }
})
export class ThyStepper implements IThyStepperComponent {
    /**
     * 当前处于激活状态的步骤 index
     */
    readonly thySelectedIndex = input<number, unknown>(0, { transform: numberAttribute });

    /**
     * 当前处于激活状态的步骤实例
     */
    readonly thySelected = input<ThyStep>();

    /**
     * 步骤条导航是否展示，默认展示
     */
    readonly thyShowStepHeader = input(true, { transform: coerceBooleanProperty });

    readonly selectionChange = output<any>();

    readonly steps = contentChildren(ThyStep);

    protected selectedIndex = signal(0);

    protected readonly selected = computed(() => this.steps()?.[this.selectedIndex()]);

    constructor() {
        effect(() => {
            const newIndex = this.thySelectedIndex();
            if (newIndex) {
                untracked(() => {
                    this.updateSelectedIndex(newIndex);
                });
            }
        });

        effect(() => {
            const selected = this.thySelected();
            if (selected) {
                untracked(() => {
                    const index = this.steps()?.indexOf(selected);
                    if (index > -1) {
                        this.updateSelectedIndex(index);
                    }
                });
            }
        });
    }

    private updateSelectedIndex(newIndex: number): void {
        if (!this.steps()?.[newIndex]) {
            return;
        }
        const previouslySelectedIndex = this.selectedIndex();
        const previouslySelectedStep = this.steps() ? this.steps()[previouslySelectedIndex] : null;
        this.selectedIndex.set(newIndex);
        this.selectionChange.emit({
            selectedIndex: newIndex,
            previouslySelectedIndex: previouslySelectedIndex,
            selectedStep: this.selected(),
            previouslySelectedStep: previouslySelectedStep
        });
    }

    updateSelected(step: ThyStep): void {
        const index = this.steps().indexOf(step);
        this.updateSelectedIndex(index);
    }

    to(index: number): void {
        this.updateSelectedIndex(Math.min(index, this.steps().length - 1));
    }

    next(): void {
        this.updateSelectedIndex(Math.min(this.selectedIndex() + 1, this.steps().length - 1));
    }

    /** Selects and focuses the previous step in list. */
    previous(): void {
        this.updateSelectedIndex(Math.max(this.selectedIndex() - 1, 0));
    }
}

1	import {
2	Component,
3	numberAttribute,
4	viewChildren,
5	output,
6	contentChildren,
7	input,
8	computed,
9	effect,
10	ChangeDetectionStrategy,
11	signal,
12	untracked
13	} from '@angular/core';
14	import { ThyStep, IThyStepperComponent, THY_STEPPER_COMPONENT } from './step.component';	1✔
15	import { ThyStepHeader } from './step-header.component';
16	import { NgTemplateOutlet } from '@angular/common';	8✔
17	import { coerceBooleanProperty } from 'ngx-tethys/util';	8✔
18		8✔
19	/**	8✔
20	* 步骤条组件	8✔
21	* @name thy-stepper	8✔
22	* @order 10	13✔
23	*/	8✔
24	@Component({	9✔
25	selector: 'thy-stepper',	9!
UNCOV 26	templateUrl: 'stepper.component.html',	×
NEW 27	providers: [{ provide: THY_STEPPER_COMPONENT, useExisting: ThyStepper }],	×
28	imports: [ThyStepHeader, NgTemplateOutlet],
29	changeDetection: ChangeDetectionStrategy.OnPush,
30	host: { class: 'thy-stepper' }
31	})	8✔
32	export class ThyStepper implements IThyStepperComponent {	9✔
33	/**	9✔
34	* 当前处于激活状态的步骤 index	1✔
35	*/	1✔
36	readonly thySelectedIndex = input<number, unknown>(0, { transform: numberAttribute });	1!
37		1✔
38	/**
39	* 当前处于激活状态的步骤实例
40	*/
41	readonly thySelected = input<ThyStep>();
42
43	/**
44	* 步骤条导航是否展示，默认展示	5!
UNCOV 45	*/	×
46	readonly thyShowStepHeader = input(true, { transform: coerceBooleanProperty });
47		5✔
48	readonly selectionChange = output<any>();	5!
49		5✔
50	readonly steps = contentChildren(ThyStep);	5✔
51
52	protected selectedIndex = signal(0);
53
54	protected readonly selected = computed(() => this.steps()?.[this.selectedIndex()]);
55
56	constructor() {
57	effect(() => {
58	const newIndex = this.thySelectedIndex();	1✔
59	if (newIndex) {	1✔
60	untracked(() => {
61	this.updateSelectedIndex(newIndex);
62	});	1✔
63	}
64	});
65		1✔
66	effect(() => {
67	const selected = this.thySelected();
68	if (selected) {
69	untracked(() => {	1✔
70	const index = this.steps()?.indexOf(selected);
71	if (index > -1) {	1✔
72	this.updateSelectedIndex(index);	1✔
73	}
74	});
75	}
76	});
77	}
78
79	private updateSelectedIndex(newIndex: number): void {
80	if (!this.steps()?.[newIndex]) {	1✔
81	return;
82	}
83	const previouslySelectedIndex = this.selectedIndex();
84	const previouslySelectedStep = this.steps() ? this.steps()[previouslySelectedIndex] : null;
85	this.selectedIndex.set(newIndex);
86	this.selectionChange.emit({
87	selectedIndex: newIndex,
88	previouslySelectedIndex: previouslySelectedIndex,
89	selectedStep: this.selected(),
90	previouslySelectedStep: previouslySelectedStep
91	});
92	}
93
94	updateSelected(step: ThyStep): void {
95	const index = this.steps().indexOf(step);
96	this.updateSelectedIndex(index);
97	}
98
99	to(index: number): void {
100	this.updateSelectedIndex(Math.min(index, this.steps().length - 1));
101	}
102
103	next(): void {
104	this.updateSelectedIndex(Math.min(this.selectedIndex() + 1, this.steps().length - 1));
105	}
106
107	/** Selects and focuses the previous step in list. */
108	previous(): void {
109	this.updateSelectedIndex(Math.max(this.selectedIndex() - 1, 0));
110	}
111	}

atinc / ngx-tethys / 8caffb10-2922-4f9f-a55a-b97c0a59f8e7

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