d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { Directive, HostBinding, Input, HostListener, ElementRef, OnInit } from '@angular/core';
import { coerceBooleanProperty } from 'ngx-tethys/util';
import { fromEvent } from 'rxjs';
import { debounceTime, shareReplay } from 'rxjs/operators';
import { InputBoolean } from 'ngx-tethys/core';
import { useHostRenderer } from '@tethys/cdk/dom';

export type ThyDropdownMenuItemType = 'default' | 'danger' | 'success' | '';

/**
 * 菜单项
 * @name thyDropdownMenuItem
 * @order 30
 */
@Directive({
    selector: '[thyDropdownMenuItem]',
    standalone: true
})
export class ThyDropdownMenuItemDirective implements OnInit {
    @HostBinding('class.dropdown-menu-item') className = true;

    @HostBinding('class.dropdown-menu-item--disabled') disabled = false;

    @HostBinding('class.dropdown-menu-item--danger') danger = false;

    @HostBinding('class.dropdown-menu-item--success') success = false;

    /**
     * 菜单项类型
     * @type 'default' | 'danger' | 'success' | ''
     * @default default
     */
    @Input()
    set thyType(value: ThyDropdownMenuItemType) {
        this[value] = true;
    }

    /**
     * 菜单项是否处于禁用状态
     * @default false
     */
    @Input()
    @InputBoolean()
    set thyDisabled(value: boolean) {
        this.disabled = coerceBooleanProperty(value);
    }

    @HostListener('click', ['$event'])
    onClick(event: Event): void {
        if (this.disabled) {
            event.stopPropagation();
            event.preventDefault();
        }
    }

    private hostRenderer = useHostRenderer();

    constructor(private elementRef: ElementRef<HTMLElement>) {}

    ngOnInit() {}

    updateClass(classes: string[]) {
        this.hostRenderer.updateClass(classes);
    }

    getElement() {
        return this.elementRef.nativeElement;
    }

    bindMouseenterEvent() {
        return fromEvent(this.elementRef.nativeElement, 'mouseenter').pipe(debounceTime(100), shareReplay());
    }
}

/**
 * 设置为菜单项图标
 * @name thyDropdownMenuItemIcon
 */
@Directive({
    selector: '[thyDropdownMenuItemIcon]',
    standalone: true
})
export class ThyDropdownMenuItemIconDirective {
    @HostBinding('class.icon') className = true;

    constructor() {}
}

/**
 * 设置为菜单项名称
 * @name thyDropdownMenuItemName
 */
@Directive({
    selector: '[thyDropdownMenuItemName]',
    standalone: true
})
export class ThyDropdownMenuItemNameDirective {
    @HostBinding('class.name') className = true;

    constructor() {}
}

/**
 * 设置为菜单项名称后的补充信息
 * @name thyDropdownMenuItemMeta
 */
@Directive({
    selector: '[thyDropdownMenuItemMeta]',
    standalone: true
})
export class ThyDropdownMenuItemMetaDirective {
    @HostBinding('class.meta') className = true;

    constructor() {}
}

/**
 * 设置为菜单项的描述
 * @name thyDropdownMenuItemDesc
 */
@Directive({
    selector: '[thyDropdownMenuItemDesc]',
    standalone: true
})
export class ThyDropdownMenuItemDescDirective {
    @HostBinding('class.desc') className = true;

    constructor() {}
}

/**
 * 菜单项的后置扩展图标，用于显示是否选中或者子菜单示意
 * @name thyDropdownMenuItemExtendIcon
 */
@Directive({
    selector: '[thyDropdownMenuItemExtendIcon]',
    standalone: true
})
export class ThyDropdownMenuItemExtendIconDirective {
    @HostBinding('class.extend-icon') className = true;

    constructor() {}
}

/**
 * 菜单项是否激活指令
 * @name thyDropdownMenuItemActive
 * @order 70
 */
@Directive({
    selector: '[thyDropdownMenuItemActive]',
    standalone: true
})
export class ThyDropdownMenuItemActiveDirective {
    /**
     * 是否激活
     * @type boolean | string
     * @default false
     */
    @HostBinding('class.active')
    @Input()
    @InputBoolean()
    thyDropdownMenuItemActive: boolean | string;

    constructor() {}
}

1	import { Directive, HostBinding, Input, HostListener, ElementRef, OnInit } from '@angular/core';
2	import { coerceBooleanProperty } from 'ngx-tethys/util';
3	import { fromEvent } from 'rxjs';
4	import { debounceTime, shareReplay } from 'rxjs/operators';
5	import { InputBoolean } from 'ngx-tethys/core';
6	import { useHostRenderer } from '@tethys/cdk/dom';
7
8	export type ThyDropdownMenuItemType = 'default' \| 'danger' \| 'success' \| '';
9
10	/**
11	* 菜单项
12	* @name thyDropdownMenuItem
13	* @order 30	1✔
14	*/
15	@Directive({	×
16	selector: '[thyDropdownMenuItem]',
17	standalone: true
18	})	×
19	export class ThyDropdownMenuItemDirective implements OnInit {
20	@HostBinding('class.dropdown-menu-item') className = true;
21		×
22	@HostBinding('class.dropdown-menu-item--disabled') disabled = false;	×
23		×
24	@HostBinding('class.dropdown-menu-item--danger') danger = false;
25
26	@HostBinding('class.dropdown-menu-item--success') success = false;
27		×
28	/**	×
29	* 菜单项类型	×
30	* @type 'default' \| 'danger' \| 'success' \| ''	×
31	* @default default	×
32	*/	×
33	@Input()
34	set thyType(value: ThyDropdownMenuItemType) {
35	this[value] = true;
36	}	×
37
38	/**
39	* 菜单项是否处于禁用状态	×
40	* @default false
41	*/
42	@Input()	×
43	@InputBoolean()
44	set thyDisabled(value: boolean) {	1✔
45	this.disabled = coerceBooleanProperty(value);
46	}
47		1✔
48	@HostListener('click', ['$event'])
49	onClick(event: Event): void {
50	if (this.disabled) {
51	event.stopPropagation();
52	event.preventDefault();
53	}
54	}
55
56	private hostRenderer = useHostRenderer();
57		1✔
58	constructor(private elementRef: ElementRef<HTMLElement>) {}
59
60	ngOnInit() {}
61
62	updateClass(classes: string[]) {	1✔
63	this.hostRenderer.updateClass(classes);
64	}
65
66	getElement() {
67	return this.elementRef.nativeElement;
68	}
69
70	bindMouseenterEvent() {
71	return fromEvent(this.elementRef.nativeElement, 'mouseenter').pipe(debounceTime(100), shareReplay());
72	}
73	}
74		1✔
75	/**
76	* 设置为菜单项图标	×
77	* @name thyDropdownMenuItemIcon
78	*/	1✔
79	@Directive({	1✔
80	selector: '[thyDropdownMenuItemIcon]',
81	standalone: true
82	})
83	export class ThyDropdownMenuItemIconDirective {	1✔
84	@HostBinding('class.icon') className = true;
85
86	constructor() {}
87	}
88
89	/**
90	* 设置为菜单项名称
91	* @name thyDropdownMenuItemName
92	*/
93	@Directive({
94	selector: '[thyDropdownMenuItemName]',
95	standalone: true	1✔
96	})
97	export class ThyDropdownMenuItemNameDirective {	×
98	@HostBinding('class.name') className = true;
99		1✔
100	constructor() {}	1✔
101	}
102
103	/**
104	* 设置为菜单项名称后的补充信息	1✔
105	* @name thyDropdownMenuItemMeta
106	*/
107	@Directive({
108	selector: '[thyDropdownMenuItemMeta]',
109	standalone: true
110	})
111	export class ThyDropdownMenuItemMetaDirective {
112	@HostBinding('class.meta') className = true;
113
114	constructor() {}
115	}
116		1✔
117	/**
118	* 设置为菜单项的描述	×
119	* @name thyDropdownMenuItemDesc
120	*/	1✔
121	@Directive({	1✔
122	selector: '[thyDropdownMenuItemDesc]',
123	standalone: true
124	})
125	export class ThyDropdownMenuItemDescDirective {	1✔
126	@HostBinding('class.desc') className = true;
127
128	constructor() {}
129	}
130
131	/**
132	* 菜单项的后置扩展图标，用于显示是否选中或者子菜单示意
133	* @name thyDropdownMenuItemExtendIcon
134	*/
135	@Directive({
136	selector: '[thyDropdownMenuItemExtendIcon]',
137	standalone: true	1✔
138	})
139	export class ThyDropdownMenuItemExtendIconDirective {	×
140	@HostBinding('class.extend-icon') className = true;
141		1✔
142	constructor() {}	1✔
143	}
144
145	/**
146	* 菜单项是否激活指令	1✔
147	* @name thyDropdownMenuItemActive
148	* @order 70
149	*/
150	@Directive({
151	selector: '[thyDropdownMenuItemActive]',
152	standalone: true
153	})
154	export class ThyDropdownMenuItemActiveDirective {
155	/**
156	* 是否激活
157	* @type boolean \| string
158	* @default false	1✔
159	*/
160	@HostBinding('class.active')	×
161	@Input()
162	@InputBoolean()	1✔
163	thyDropdownMenuItemActive: boolean \| string;	1✔
164
165	constructor() {}
166	}

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