d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { coerceBooleanProperty } from 'ngx-tethys/util';
import { useHostRenderer } from '@tethys/cdk/dom';
import { Component, HostBinding, Input, OnInit, ViewEncapsulation } from '@angular/core';

export type ButtonGroupSize = 'sm' | 'lg' | 'xs' | 'md';

export type ButtonGroupType = 'outline-primary' | 'outline-default';

const buttonGroupSizeMap = {
    sm: ['btn-group-sm'],
    md: ['btn-group-md'],
    lg: ['btn-group-lg'],
    xs: ['btn-group-xs']
};

/**
 * 按钮分组组件
 * @name thy-button-group
 * @order 30
 */
@Component({
    selector: 'thy-button-group',
    template: '<ng-content></ng-content>',
    encapsulation: ViewEncapsulation.None,
    standalone: true
})
export class ThyButtonGroupComponent implements OnInit {
    private initialized = false;

    private type: string;

    private size: string;

    private hostRenderer = useHostRenderer();

    /**
     * 大小
     * @type xs | sm | md | lg
     * @default md
     */
    @Input()
    set thySize(size: ButtonGroupSize) {
        this.size = size;
        if (this.initialized) {
            this.setClasses();
        }
    }

    /**
     * 类型
     * @type outline-default | outline-primary
     * @default outline-default
     */
    @Input()
    set thyType(type: ButtonGroupType) {
        this.type = type;
        if (this.initialized) {
            this.setClasses();
        }
    }

    /**
     * 是否需要最小宽度，默认按钮最小宽度为80px
     * @default false
     */
    @Input()
    set thyClearMinWidth(value: string) {
        this.thyClearMinWidthClassName = coerceBooleanProperty(value);
    }

    @HostBinding('class.btn-group') _isButtonGroup = true;
    @HostBinding(`class.btn-group-clear-min-width`)
    thyClearMinWidthClassName = false;

    constructor() {}

    ngOnInit() {
        this.setClasses();
        this.initialized = true;
    }

    private setClasses() {
        let classNames: string[] = [];
        if (this.type) {
            classNames.push(`btn-group-${this.type}`);
        }
        if (buttonGroupSizeMap[this.size]) {
            classNames.push(buttonGroupSizeMap[this.size]);
        }
        this.hostRenderer.updateClass(classNames);
    }
}

1	import { coerceBooleanProperty } from 'ngx-tethys/util';
2	import { useHostRenderer } from '@tethys/cdk/dom';
3	import { Component, HostBinding, Input, OnInit, ViewEncapsulation } from '@angular/core';
4
5	export type ButtonGroupSize = 'sm' \| 'lg' \| 'xs' \| 'md';	1✔
6
7	export type ButtonGroupType = 'outline-primary' \| 'outline-default';
8
9	const buttonGroupSizeMap = {
10	sm: ['btn-group-sm'],
11	md: ['btn-group-md'],
12	lg: ['btn-group-lg'],
13	xs: ['btn-group-xs']
14	};
15
16	/**	1✔
17	* 按钮分组组件
18	* @name thy-button-group	×
19	* @order 30	×
20	*/	×
21	@Component({
22	selector: 'thy-button-group',
23	template: '<ng-content></ng-content>',
24	encapsulation: ViewEncapsulation.None,	×
25	standalone: true	×
26	})	×
27	export class ThyButtonGroupComponent implements OnInit {
28	private initialized = false;
29
30	private type: string;	×
31
32	private size: string;
33		×
34	private hostRenderer = useHostRenderer();	×
35		×
36	/**	×
37	* 大小
38	* @type xs \| sm \| md \| lg
39	* @default md	×
40	*/	×
41	@Input()
42	set thySize(size: ButtonGroupSize) {
43	this.size = size;	×
44	if (this.initialized) {	×
45	this.setClasses();	×
46	}
47	}	×
48		×
49	/**
50	* 类型	×
51	* @type outline-default \| outline-primary
52	* @default outline-default	1✔
53	*/	1✔
54	@Input()
55	set thyType(type: ButtonGroupType) {
56	this.type = type;
57	if (this.initialized) {
58	this.setClasses();
59	}
60	}
61		1✔
62	/**
63	* 是否需要最小宽度，默认按钮最小宽度为80px
64	* @default false
65	*/
66	@Input()
67	set thyClearMinWidth(value: string) {
68	this.thyClearMinWidthClassName = coerceBooleanProperty(value);
69	}
70
71	@HostBinding('class.btn-group') _isButtonGroup = true;
72	@HostBinding(`class.btn-group-clear-min-width`)
73	thyClearMinWidthClassName = false;
74
75	constructor() {}
76
77	ngOnInit() {
78	this.setClasses();
79	this.initialized = true;
80	}
81
82	private setClasses() {
83	let classNames: string[] = [];
84	if (this.type) {
85	classNames.push(`btn-group-${this.type}`);
86	}
87	if (buttonGroupSizeMap[this.size]) {
88	classNames.push(buttonGroupSizeMap[this.size]);
89	}
90	this.hostRenderer.updateClass(classNames);
91	}
92	}

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