fc2ccfa5-796e-43f0-b0b9-38a18ad7ab4e

Committed 13 Jan 2025 07:21AM UTC coverage: 90.288% (-0.07%) from 90.355%

Build # fc2ccfa5-796e-43f0-b0b9-38a18ad7ab4e

Build Type

push

circleci

Committed by

minlovehua

Commit Message

feat(nav): support card type

Run Details

5562 of 6813 branches covered (81.64%)

Branch coverage included in aggregate %.

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

16 existing lines in 2 files now uncovered.

13282 of 14058 relevant lines covered (94.48%)

991.47 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	555✔
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	/**
41	* 唯一标识
42	*/
43	id = input<string>();
44
45	/**	918✔
46	* 是否激活状态
47	* @default false
UNCOV 48	*/	×
UNCOV 49	@Input({ transform: coerceBooleanProperty })	×
UNCOV 50	thyNavItemActive: boolean;	×
51
52	/**
53	* 已经废弃，请使用 thyNavItemActive	28✔
54	* @deprecated please use thyNavItemActive	21✔
55	* @default false
56	*/
57	@Input({ transform: coerceBooleanProperty })	7✔
58	thyNavLinkActive: boolean;
59
60	/**
UNCOV 61	* 是否禁用	×
62	* @default false
63	*/
UNCOV 64	@Input({ transform: coerceBooleanProperty })	×
65	thyNavItemDisabled: boolean;
66		1✔
67	/**
68	* @private
69	*/
70	@ContentChildren(forwardRef(() => ThyNavItemDirective), { descendants: true })
71	links: QueryList<ThyNavItemDirective>;	2✔
72
73	/**
74	* @private
75	*/	1✔
76	@ContentChildren(RouterLinkActive, { descendants: true }) routers: QueryList<RouterLinkActive>;
77
78	// @HostBinding('attr.href') navLinkHref = 'javascript:;';
79
80	public offset: {
81	width: number;
82	height: number;
83	left: number;
84	top: number;
85	} = {
86	width: 0,
87	height: 0,
88	left: 0,
89	top: 0
90	};
91
92	public content: HTMLElement;
93
94	public isActive: boolean;
95
96	private hostRenderer = useHostRenderer();
97
98	private readonly destroyRef = inject(DestroyRef);
99
100	ngAfterViewInit() {
101	this.setOffset();
102
103	this.content = this.elementRef.nativeElement.outerHTML;
104
105	this.ngZone.onStable.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
106	this.isActive = this.linkIsActive();
107	});
108	}
109
110	setOffset() {
111	this.offset = {
112	width: this.elementRef.nativeElement.offsetWidth,
113	height: this.elementRef.nativeElement.offsetHeight,
114	left: this.elementRef.nativeElement.offsetLeft,
115	top: this.elementRef.nativeElement.offsetTop
116	};
117	}
118
119	linkIsActive() {
120	return (
121	this.thyNavItemActive \|\|
122	this.thyNavLinkActive \|\|
123	(this.routerLinkActive && this.routerLinkActive.isActive) \|\|
124	this.routers.some(router => router.isActive) \|\|
125	this.links.some(item => item.thyNavItemActive) \|\|
126	this.links.some(item => item.thyNavLinkActive)
127	);
128	}
129
130	setNavLinkHidden(value: boolean) {
131	if (value) {
132	this.hostRenderer.addClass('thy-nav-item-hidden');
133	} else {
134	this.hostRenderer.removeClass('thy-nav-item-hidden');
135	}
136	}
137
138	addClass(className: string) {
139	this.hostRenderer.addClass(className);
140	}
141
142	removeClass(className: string) {
143	this.hostRenderer.removeClass(className);
144	}
145	}

atinc / ngx-tethys / fc2ccfa5-796e-43f0-b0b9-38a18ad7ab4e

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