90e84fad-ae56-4546-8492-68bddb8737b8

Committed 08 Jan 2025 08:06AM UTC coverage: 90.298% (-0.006%) from 90.304%

Build # 90e84fad-ae56-4546-8492-68bddb8737b8

Build Type

push

circleci

Committed by

minlovehua

Commit Message

feat: card nav

Run Details

5558 of 6808 branches covered (81.64%)

Branch coverage included in aggregate %.

2 of 2 new or added lines in 1 file covered. (100.0%)

10 existing lines in 2 files now uncovered.

13280 of 14054 relevant lines covered (94.49%)

991.85 hits per line

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

85.29

/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,
    input,
    Input,
    NgZone,
    QueryList
} 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);

    id = input<string>();

    /**
     * 是否激活状态
     * @default false
     */
    @Input({ transform: coerceBooleanProperty })
    thyNavItemActive: boolean;

    /**
     * 已经废弃，请使用 thyNavItemActive
     * @deprecated please use thyNavItemActive
     * @default false
     */
    @Input({ transform: coerceBooleanProperty })
    thyNavLinkActive: boolean;

    /**
     * 是否禁用
     * @default false
     */
    @Input({ transform: coerceBooleanProperty })
    thyNavItemDisabled: boolean;

    /**
     * @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');
        }
    }

    addClass(className: string) {
        this.hostRenderer.addClass(className);
    }

    removeClass(className: string) {
        this.hostRenderer.removeClass(className);
    }
}

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

atinc / ngx-tethys / 90e84fad-ae56-4546-8492-68bddb8737b8

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