d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { Component, ViewChildren, ContentChildren, QueryList, HostBinding, Input, Output, EventEmitter } from '@angular/core';
import { ThyStepComponent, IThyStepperComponent, THY_STEPPER_COMPONENT } from './step.component';
import { ThyStepHeaderComponent } from './step-header.component';
import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
import { InputBoolean, InputNumber } from 'ngx-tethys/core';

/**
 * 步骤条组件
 * @name thy-stepper
 * @order 10
 */
@Component({
    selector: 'thy-stepper',
    templateUrl: 'stepper.component.html',
    providers: [
        {
            provide: THY_STEPPER_COMPONENT,
            useExisting: ThyStepperComponent
        }
    ],
    standalone: true,
    imports: [NgIf, NgFor, ThyStepHeaderComponent, NgTemplateOutlet]
})
export class ThyStepperComponent implements IThyStepperComponent {
    /**
     * 当前处于激活状态的步骤index
     * @default 0
     */
    @Input()
    @InputNumber()
    set thySelectedIndex(value: number) {
        this.selectedIndex = value;
    }

    @Input()
    set thySelected(value: ThyStepComponent) {
        this.selected = value;
    }

    /**
     * 步骤条导航是否展示，默认展示
     */
    @Input() @InputBoolean() thyShowStepHeader = true;

    private _selectedIndex = 0;

    public set selected(step: ThyStepComponent) {
        this.selectedIndex = this.steps ? this.steps.toArray().indexOf(step) : -1;
    }

    public get selected() {
        return this.steps ? this.steps.toArray()[this.selectedIndex] : null;
    }

    set selectedIndex(index: number) {
        if (this.steps) {
            this._updateSelectedItemIndex(index);
        } else {
            this._selectedIndex = index;
        }
    }

    get selectedIndex() {
        return this._selectedIndex;
    }

    @Output() selectionChange: EventEmitter<any> = new EventEmitter<any>();

    @ViewChildren(ThyStepHeaderComponent) stepHeaders: QueryList<ThyStepHeaderComponent>;

    @ContentChildren(ThyStepComponent) steps: QueryList<ThyStepComponent>;

    @HostBinding('class.thy-stepper') thyStepper = true;

    private _updateSelectedItemIndex(newIndex: number): void {
        const stepsArray = this.steps.toArray();
        this.selectionChange.emit({
            selectedIndex: newIndex,
            previouslySelectedIndex: this._selectedIndex,
            selectedStep: stepsArray[newIndex],
            previouslySelectedStep: stepsArray[this._selectedIndex]
        });
        this._selectedIndex = newIndex;
    }

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

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

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

1	import { Component, ViewChildren, ContentChildren, QueryList, HostBinding, Input, Output, EventEmitter } from '@angular/core';
2	import { ThyStepComponent, IThyStepperComponent, THY_STEPPER_COMPONENT } from './step.component';
3	import { ThyStepHeaderComponent } from './step-header.component';
4	import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
5	import { InputBoolean, InputNumber } from 'ngx-tethys/core';
6
7	/**
8	* 步骤条组件
9	* @name thy-stepper
10	* @order 10
11	*/
12	@Component({
13	selector: 'thy-stepper',
14	templateUrl: 'stepper.component.html',	1✔
15	providers: [
16	{	×
17	provide: THY_STEPPER_COMPONENT,	×
18	useExisting: ThyStepperComponent	×
19	}	×
20	],
21	standalone: true,
22	imports: [NgIf, NgFor, ThyStepHeaderComponent, NgTemplateOutlet]	×
23	})
24	export class ThyStepperComponent implements IThyStepperComponent {
25	/**	×
26	* 当前处于激活状态的步骤index
27	* @default 0
28	*/	×
29	@Input()
30	@InputNumber()
31	set thySelectedIndex(value: number) {	×
32	this.selectedIndex = value;
33	}
34		×
35	@Input()	×
36	set thySelected(value: ThyStepComponent) {
37	this.selected = value;
38	}	×
39
40	/**
41	* 步骤条导航是否展示，默认展示
42	*/	×
43	@Input() @InputBoolean() thyShowStepHeader = true;
44
45	private _selectedIndex = 0;	×
46		×
47	public set selected(step: ThyStepComponent) {
48	this.selectedIndex = this.steps ? this.steps.toArray().indexOf(step) : -1;
49	}
50
51	public get selected() {
52	return this.steps ? this.steps.toArray()[this.selectedIndex] : null;	×
53	}
54
55	set selectedIndex(index: number) {	×
56	if (this.steps) {
57	this._updateSelectedItemIndex(index);
58	} else {	×
59	this._selectedIndex = index;
60	}
61	}
62		×
63	get selectedIndex() {
64	return this._selectedIndex;	1✔
65	}
66
67	@Output() selectionChange: EventEmitter<any> = new EventEmitter<any>();
68
69	@ViewChildren(ThyStepHeaderComponent) stepHeaders: QueryList<ThyStepHeaderComponent>;
70
71	@ContentChildren(ThyStepComponent) steps: QueryList<ThyStepComponent>;
72
73	@HostBinding('class.thy-stepper') thyStepper = true;
74		1✔
75	private _updateSelectedItemIndex(newIndex: number): void {
76	const stepsArray = this.steps.toArray();
77	this.selectionChange.emit({
78	selectedIndex: newIndex,
79	previouslySelectedIndex: this._selectedIndex,	1✔
80	selectedStep: stepsArray[newIndex],
81	previouslySelectedStep: stepsArray[this._selectedIndex]
82	});
83	this._selectedIndex = newIndex;	1✔
84	}
85
86	to(index: number): void {
87	this.selectedIndex = Math.min(index, this.steps.length - 1);
88	}
89
90	next(): void {
91	this.selectedIndex = Math.min(this._selectedIndex + 1, this.steps.length - 1);
92	}
93
94	/** Selects and focuses the previous step in list. */
95	previous(): void {
96	this.selectedIndex = Math.max(this._selectedIndex - 1, 0);
97	}
98	}

atinc / ngx-tethys / d9ae709b-3c27-4b69-b125-b8b80b54f90b

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