d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
import { InputBoolean } from 'ngx-tethys/core';

import { ThyCollapseItemComponent } from './collapse-item.component';

export type ThyCollapseTheme = 'divided' | 'bordered' | 'ghost';

export type ThyCollapsedIconPosition = 'left' | 'right';

/**
 * 折叠面板组件
 * @name thy-collapse
 * @order 10
 */
@Component({
    selector: 'thy-collapse',
    template: `
        <ng-container>
            <ng-content></ng-content>
        </ng-container>
    `,
    host: {
        class: 'thy-collapse',
        '[class.thy-collapse-divided]': `thyTheme === 'divided'`,
        '[class.thy-collapse-bordered]': `thyTheme === 'bordered'`,
        '[class.thy-collapse-ghost]': `thyTheme === 'ghost'`,
        '[class.thy-collapse-icon-position-right]': `thyArrowIconPosition === 'right'`,
        '[class.thy-collapse-icon-position-left]': `thyArrowIconPosition === 'left'`
    },
    changeDetection: ChangeDetectionStrategy.OnPush,
    standalone: true
})
export class ThyCollapseComponent implements OnInit {
    /**
     * 折叠面板主题，支持 `divided` | `bordered` | `ghost`
     */
    @Input() thyTheme: ThyCollapseTheme = 'divided';

    /**
     * 是否为手风琴模式，手风琴模式下，只能展开一个面板
     * @default false
     */
    @Input() @InputBoolean() thyAccordion: boolean;

    /**
     * 展开收起图标的位置
     * @type left | right
     */
    @Input() thyArrowIconPosition: ThyCollapsedIconPosition = 'left';

    private listOfCollapsePanelComponent: ThyCollapseItemComponent[] = [];

    constructor() {}

    ngOnInit() {}

    addPanel(value: ThyCollapseItemComponent): void {
        this.listOfCollapsePanelComponent.push(value);
    }

    removePanel(value: ThyCollapseItemComponent): void {
        this.listOfCollapsePanelComponent.splice(this.listOfCollapsePanelComponent.indexOf(value), 1);
    }

    click(collapseItem: ThyCollapseItemComponent, event: Event): void {
        if (this.thyAccordion && !collapseItem.thyActive) {
            this.listOfCollapsePanelComponent
                .filter(item => item !== collapseItem)
                .forEach(item => {
                    if (item.thyActive) {
                        item.thyActive = false;
                        item.thyActiveChange.emit({ active: collapseItem.thyActive, event });
                        item.markForCheck();
                    }
                });
        }
        collapseItem.thyActive = !collapseItem.thyActive;
        collapseItem.thyActiveChange.emit({ active: collapseItem.thyActive, event });
    }
}

1	import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
2	import { InputBoolean } from 'ngx-tethys/core';
3
4	import { ThyCollapseItemComponent } from './collapse-item.component';
5
6	export type ThyCollapseTheme = 'divided' \| 'bordered' \| 'ghost';
7
8	export type ThyCollapsedIconPosition = 'left' \| 'right';
9		1✔
10	/**
11	* 折叠面板组件	×
12	* @name thy-collapse	×
13	* @order 10	×
14	*/
15	@Component({
16	selector: 'thy-collapse',
17	template: `	×
18	<ng-container>
19	<ng-content></ng-content>
20	</ng-container>	×
21	`,
22	host: {
23	class: 'thy-collapse',	×
24	'[class.thy-collapse-divided]': `thyTheme === 'divided'`,	×
25	'[class.thy-collapse-bordered]': `thyTheme === 'bordered'`,	×
26	'[class.thy-collapse-ghost]': `thyTheme === 'ghost'`,
27	'[class.thy-collapse-icon-position-right]': `thyArrowIconPosition === 'right'`,	×
28	'[class.thy-collapse-icon-position-left]': `thyArrowIconPosition === 'left'`	×
29	},	×
30	changeDetection: ChangeDetectionStrategy.OnPush,	×
31	standalone: true
32	})
33	export class ThyCollapseComponent implements OnInit {
34	/**	×
35	* 折叠面板主题，支持 `divided` \| `bordered` \| `ghost`	×
36	*/
37	@Input() thyTheme: ThyCollapseTheme = 'divided';	1✔
38		1✔
39	/**
40	* 是否为手风琴模式，手风琴模式下，只能展开一个面板
41	* @default false
42	*/
43	@Input() @InputBoolean() thyAccordion: boolean;
44		1✔
45	/**
46	* 展开收起图标的位置
47	* @type left \| right
48	*/	1✔
49	@Input() thyArrowIconPosition: ThyCollapsedIconPosition = 'left';
50
51	private listOfCollapsePanelComponent: ThyCollapseItemComponent[] = [];
52
53	constructor() {}
54
55	ngOnInit() {}
56
57	addPanel(value: ThyCollapseItemComponent): void {
58	this.listOfCollapsePanelComponent.push(value);
59	}
60
61	removePanel(value: ThyCollapseItemComponent): void {
62	this.listOfCollapsePanelComponent.splice(this.listOfCollapsePanelComponent.indexOf(value), 1);
63	}
64
65	click(collapseItem: ThyCollapseItemComponent, event: Event): void {
66	if (this.thyAccordion && !collapseItem.thyActive) {
67	this.listOfCollapsePanelComponent
68	.filter(item => item !== collapseItem)
69	.forEach(item => {
70	if (item.thyActive) {
71	item.thyActive = false;
72	item.thyActiveChange.emit({ active: collapseItem.thyActive, event });
73	item.markForCheck();
74	}
75	});
76	}
77	collapseItem.thyActive = !collapseItem.thyActive;
78	collapseItem.thyActiveChange.emit({ active: collapseItem.thyActive, event });
79	}
80	}

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