atinc / ngx-tethys / #55

Committed 30 Jul 2025 07:08AM UTC coverage: 9.866% (-80.4%) from 90.297%

Build # #55

Build Type

push

Committed by

Commit Message

feat(empty): add setMessage for update display text #TINFR-2616

Run Details

92 of 6794 branches covered (1.35%)

Branch coverage included in aggregate %.

2014 of 14552 relevant lines covered (13.84%)

6.15 hits per line

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

9.76

/src/dropdown/dropdown-submenu.component.ts

import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { getElementOffset } from 'ngx-tethys/util';

import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, OnInit, inject, input } from '@angular/core';

import { ThyDropdownMenuItemDirective } from './dropdown-menu-item.directive';

export type ThyDropdownSubmenuDirection = 'left' | 'right' | 'auto';

type InnerDropdownSubmenuDirection = ThyDropdownSubmenuDirection | 'leftBottom' | 'rightBottom';

const SUBMENU_CLASS_PREFIX = 'dropdown-submenu';

/**
 * 下拉子菜单
 * @name thy-dropdown-submenu,[thyDropdownSubmenu]
 * @order 40
 */
@Component({
    selector: '[thyDropdownSubmenu],thy-dropdown-submenu',
    template: '<ng-content></ng-content>',
    host: {
        class: 'dropdown-submenu'
    },
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ThyDropdownSubmenu implements OnInit {
    private dropdownMenuItem = inject(ThyDropdownMenuItemDirective);
    private elementRef = inject<ElementRef<HTMLElement>>(ElementRef);

    private readonly destroyRef = inject(DestroyRef);

    /**
     * 菜单方向
     * @type left | right | auto
     */
    readonly thyDirection = input<ThyDropdownSubmenuDirection, ThyDropdownSubmenuDirection>('right', {
        transform: (value: ThyDropdownSubmenuDirection) => {
            return value || 'right';
        }
    });

    ngOnInit(): void {
        let direction = this.thyDirection();
        this.updateClassByDirection(direction);
        this.dropdownMenuItem
            .bindMouseenterEvent()
            .pipe(takeUntilDestroyed(this.destroyRef))
            .subscribe(() => {
                if (this.thyDirection() === 'auto') {
                    const element = this.dropdownMenuItem.getElement();
                    const offset = getElementOffset(element);
                    if (document.documentElement.clientWidth < offset.left + offset.width + offset.width) {
                        direction = 'left';
                    } else {
                        direction = 'right';
                    }
                    this.updateClassByDirection(direction);
                }
                this.updateVerticalDirection(direction);
            });
    }

    private updateClassByDirection(direction: InnerDropdownSubmenuDirection) {
        this.dropdownMenuItem.updateClass([`${SUBMENU_CLASS_PREFIX}-${direction}`]);
    }

    private updateVerticalDirection(direction: InnerDropdownSubmenuDirection) {
        const submenuItems = this.elementRef.nativeElement.querySelectorAll('.dropdown-menu-item');
        if (submenuItems.length) {
            let submenuItemHeight = 0;
            submenuItems.forEach(item => (submenuItemHeight += item.clientHeight));
            if (
                document.documentElement.clientHeight - this.dropdownMenuItem.getElement().getBoundingClientRect().bottom <
                submenuItemHeight
            ) {
                direction = direction === 'left' ? 'leftBottom' : 'rightBottom';
                this.updateClassByDirection(direction);
            } else {
                this.updateClassByDirection(direction);
            }
        }
    }
}

1	import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
2	import { getElementOffset } from 'ngx-tethys/util';
3
4	import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, OnInit, inject, input } from '@angular/core';
5
6	import { ThyDropdownMenuItemDirective } from './dropdown-menu-item.directive';
7		1✔
8	export type ThyDropdownSubmenuDirection = 'left' \| 'right' \| 'auto';
9
10	type InnerDropdownSubmenuDirection = ThyDropdownSubmenuDirection \| 'leftBottom' \| 'rightBottom';
11
12	const SUBMENU_CLASS_PREFIX = 'dropdown-submenu';
13		1✔
14	/**
15	* 下拉子菜单	×
16	* @name thy-dropdown-submenu,[thyDropdownSubmenu]	×
17	* @order 40	×
18	*/	×
19	@Component({
20	selector: '[thyDropdownSubmenu],thy-dropdown-submenu',	×
21	template: '<ng-content></ng-content>',
22	host: {
23	class: 'dropdown-submenu'
24	},
25	changeDetection: ChangeDetectionStrategy.OnPush	×
26	})	×
27	export class ThyDropdownSubmenu implements OnInit {	×
28	private dropdownMenuItem = inject(ThyDropdownMenuItemDirective);
29	private elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
30
31	private readonly destroyRef = inject(DestroyRef);	×
32		×
33	/**	×
34	* 菜单方向	×
35	* @type left \| right \| auto	×
36	*/
37	readonly thyDirection = input<ThyDropdownSubmenuDirection, ThyDropdownSubmenuDirection>('right', {
38	transform: (value: ThyDropdownSubmenuDirection) => {	×
39	return value \|\| 'right';
40	}	×
41	});
42		×
43	ngOnInit(): void {
44	let direction = this.thyDirection();
45	this.updateClassByDirection(direction);
46	this.dropdownMenuItem	×
47	.bindMouseenterEvent()
48	.pipe(takeUntilDestroyed(this.destroyRef))
49	.subscribe(() => {	×
50	if (this.thyDirection() === 'auto') {	×
51	const element = this.dropdownMenuItem.getElement();	×
52	const offset = getElementOffset(element);	×
53	if (document.documentElement.clientWidth < offset.left + offset.width + offset.width) {	×
54	direction = 'left';
55	} else {	×
56	direction = 'right';	×
57	}
58	this.updateClassByDirection(direction);
59	}	×
60	this.updateVerticalDirection(direction);
61	});
62	}
63		1✔
64	private updateClassByDirection(direction: InnerDropdownSubmenuDirection) {
65	this.dropdownMenuItem.updateClass([`${SUBMENU_CLASS_PREFIX}-${direction}`]);
66	}
67		1✔
68	private updateVerticalDirection(direction: InnerDropdownSubmenuDirection) {
69	const submenuItems = this.elementRef.nativeElement.querySelectorAll('.dropdown-menu-item');
70	if (submenuItems.length) {
71	let submenuItemHeight = 0;
72	submenuItems.forEach(item => (submenuItemHeight += item.clientHeight));
73	if (
74	document.documentElement.clientHeight - this.dropdownMenuItem.getElement().getBoundingClientRect().bottom <
75	submenuItemHeight
76	) {
77	direction = direction === 'left' ? 'leftBottom' : 'rightBottom';
78	this.updateClassByDirection(direction);
79	} else {
80	this.updateClassByDirection(direction);
81	}
82	}
83	}
84	}

atinc / ngx-tethys / #55

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