791cc51e-21e8-4397-b2d3-74fb952fefc7

Committed 13 Jan 2025 03:03AM UTC coverage: 90.365% (+0.01%) from 90.355%

Build # 791cc51e-21e8-4397-b2d3-74fb952fefc7

Build Type

Pull #3288

circleci

Committed by

minlovehua

Commit Message

refactor(nav): migrate @Input to signal input

Pull Request Pull Request #3288: refactor(nav): migrate @Input to signal input

Run Details

5558 of 6802 branches covered (81.71%)

Branch coverage included in aggregate %.

15 of 16 new or added lines in 3 files covered. (93.75%)

4 existing lines in 2 files now uncovered.

13283 of 14048 relevant lines covered (94.55%)

992.2 hits per line

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

91.18

/src/nav/nav-item.directive.ts

import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { useHostRenderer } from '@tethys/cdk/dom';
import {
    AfterViewInit,
    ContentChildren,
    DestroyRef,
    Directive,
    ElementRef,
    forwardRef,
    inject,
    NgZone,
    QueryList,
    input
} from '@angular/core';
import { RouterLinkActive } from '@angular/router';
import { coerceBooleanProperty } from 'ngx-tethys/util';

export type ThyNavLink = '' | 'active';

/**
 * 导航项
 * @name thyNavItem
 * @order 20
 */
@Directive({
    selector: '[thyNavLink],[thyNavItem]',
    host: {
        class: 'thy-nav-item',
        '[class.active]': 'thyNavItemActive() || thyNavLinkActive()',
        '[class.disabled]': 'thyNavItemDisabled()'
    },
    standalone: true
})
export class ThyNavItemDirective implements AfterViewInit {
    elementRef = inject(ElementRef);
    private routerLinkActive = inject(RouterLinkActive, { optional: true })!;
    private ngZone = inject(NgZone);

    /**
     * 是否激活状态
     * @default false
     */
    readonly thyNavItemActive = input<boolean, boolean | string | number>(undefined, { transform: coerceBooleanProperty });

    /**
     * 已经废弃，请使用 thyNavItemActive
     * @deprecated please use thyNavItemActive
     * @default false
     */
    readonly thyNavLinkActive = input<boolean, boolean | string | number>(undefined, { transform: coerceBooleanProperty });

    /**
     * 是否禁用
     * @default false
     */
    readonly thyNavItemDisabled = input<boolean, boolean | string | number>(undefined, { transform: coerceBooleanProperty });

    /**
     * @private
     */
    @ContentChildren(forwardRef(() => ThyNavItemDirective), { descendants: true })
    links: QueryList<ThyNavItemDirective>;

    /**
     * @private
     */
    @ContentChildren(RouterLinkActive, { descendants: true }) routers: QueryList<RouterLinkActive>;

    // @HostBinding('attr.href') navLinkHref = 'javascript:;';

    public offset: {
        width: number;
        height: number;
        left: number;
        top: number;
    } = {
        width: 0,
        height: 0,
        left: 0,
        top: 0
    };

    public content: HTMLElement;

    public isActive: boolean;

    private hostRenderer = useHostRenderer();

    private readonly destroyRef = inject(DestroyRef);

    ngAfterViewInit() {
        this.setOffset();

        this.content = this.elementRef.nativeElement.outerHTML;

        this.ngZone.onStable.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
            this.isActive = this.linkIsActive();
        });
    }

    setOffset() {
        this.offset = {
            width: this.elementRef.nativeElement.offsetWidth,
            height: this.elementRef.nativeElement.offsetHeight,
            left: this.elementRef.nativeElement.offsetLeft,
            top: this.elementRef.nativeElement.offsetTop
        };
    }

    linkIsActive() {
        return (
            this.thyNavItemActive() ||
            this.thyNavLinkActive() ||
            (this.routerLinkActive && this.routerLinkActive.isActive) ||
            this.routers.some(router => router.isActive) ||
            this.links.some(item => item.thyNavItemActive()) ||
            this.links.some(item => item.thyNavLinkActive())
        );
    }

    setNavLinkHidden(value: boolean) {
        if (value) {
            this.hostRenderer.addClass('thy-nav-item-hidden');
        } else {
            this.hostRenderer.removeClass('thy-nav-item-hidden');
        }
    }
}

1	import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
2	import { useHostRenderer } from '@tethys/cdk/dom';
3	import {
4	AfterViewInit,
5	ContentChildren,
6	DestroyRef,
7	Directive,
8	ElementRef,
9	forwardRef,
10	inject,
11	NgZone,
12	QueryList,
13	input	1✔
14	} from '@angular/core';
15	import { RouterLinkActive } from '@angular/router';	155✔
16	import { coerceBooleanProperty } from 'ngx-tethys/util';	155✔
17		155✔
18	export type ThyNavLink = '' \| 'active';	155✔
19		155✔
20	/**	155✔
21	* 导航项
22	* @name thyNavItem	155✔
23	* @order 20
24	*/
25	@Directive({
26	selector: '[thyNavLink],[thyNavItem]',
27	host: {
28	class: 'thy-nav-item',	155✔
29	'[class.active]': 'thyNavItemActive() \|\| thyNavLinkActive()',	155✔
30	'[class.disabled]': 'thyNavItemDisabled()'
31	},
32	standalone: true	155✔
33	})	155✔
34	export class ThyNavItemDirective implements AfterViewInit {	155✔
35	elementRef = inject(ElementRef);	546✔
36	private routerLinkActive = inject(RouterLinkActive, { optional: true })!;
37	private ngZone = inject(NgZone);
38
39	/**	176✔
40	* 是否激活状态
41	* @default false
42	*/
43	readonly thyNavItemActive = input<boolean, boolean \| string \| number>(undefined, { transform: coerceBooleanProperty });
44
45	/**
46	* 已经废弃，请使用 thyNavItemActive
47	* @deprecated please use thyNavItemActive	907✔
48	* @default false
49	*/
NEW 50	readonly thyNavLinkActive = input<boolean, boolean \| string \| number>(undefined, { transform: coerceBooleanProperty });	×
UNCOV 51		×
UNCOV 52	/**	×
53	* 是否禁用
54	* @default false
55	*/	28✔
56	readonly thyNavItemDisabled = input<boolean, boolean \| string \| number>(undefined, { transform: coerceBooleanProperty });	21✔
57
58	/**
59	* @private	7✔
60	*/
61	@ContentChildren(forwardRef(() => ThyNavItemDirective), { descendants: true })
62	links: QueryList<ThyNavItemDirective>;	1✔
63
64	/**
65	* @private
66	*/	2✔
67	@ContentChildren(RouterLinkActive, { descendants: true }) routers: QueryList<RouterLinkActive>;
68
69	// @HostBinding('attr.href') navLinkHref = 'javascript:;';
70		1✔
71	public offset: {
72	width: number;
73	height: number;
74	left: number;
75	top: number;
76	} = {
77	width: 0,
78	height: 0,
79	left: 0,
80	top: 0
81	};
82
83	public content: HTMLElement;
84
85	public isActive: boolean;
86
87	private hostRenderer = useHostRenderer();
88
89	private readonly destroyRef = inject(DestroyRef);
90
91	ngAfterViewInit() {
92	this.setOffset();
93
94	this.content = this.elementRef.nativeElement.outerHTML;
95
96	this.ngZone.onStable.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
97	this.isActive = this.linkIsActive();
98	});
99	}
100
101	setOffset() {
102	this.offset = {
103	width: this.elementRef.nativeElement.offsetWidth,
104	height: this.elementRef.nativeElement.offsetHeight,
105	left: this.elementRef.nativeElement.offsetLeft,
106	top: this.elementRef.nativeElement.offsetTop
107	};
108	}
109
110	linkIsActive() {
111	return (
112	this.thyNavItemActive() \|\|
113	this.thyNavLinkActive() \|\|
114	(this.routerLinkActive && this.routerLinkActive.isActive) \|\|
115	this.routers.some(router => router.isActive) \|\|
116	this.links.some(item => item.thyNavItemActive()) \|\|
117	this.links.some(item => item.thyNavLinkActive())
118	);
119	}
120
121	setNavLinkHidden(value: boolean) {
122	if (value) {
123	this.hostRenderer.addClass('thy-nav-item-hidden');
124	} else {
125	this.hostRenderer.removeClass('thy-nav-item-hidden');
126	}
127	}
128	}

atinc / ngx-tethys / 791cc51e-21e8-4397-b2d3-74fb952fefc7

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