e62d3b10-1466-49c3-aabd-707148681fc8

Committed 14 Jun 2024 08:24AM UTC coverage: 90.422%. Remained the same

Build # e62d3b10-1466-49c3-aabd-707148681fc8

Build Type

push

circleci

Committed by

minlovehua

Commit Message

feat: use the ngx-tethys/util's coerceBooleanProperty instead of booleanAttribute #INFR-12648

Run Details

5467 of 6692 branches covered (81.69%)

Branch coverage included in aggregate %.

117 of 120 new or added lines in 66 files covered. (97.5%)

183 existing lines in 46 files now uncovered.

13216 of 13970 relevant lines covered (94.6%)

985.91 hits per line

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

81.03

/src/table/table-column.component.ts

import { _isNumberValue, coerceCssPixelValue } from '@angular/cdk/coercion';
import {
    Component,
    ContentChild,
    ElementRef,
    EventEmitter,
    Inject,
    InjectionToken,
    Input,
    OnInit,
    Optional,
    Output,
    TemplateRef,
    ViewEncapsulation
} from '@angular/core';
import { coerceBooleanProperty, isArray, isObject } from 'ngx-tethys/util';
import { ThyTableSortDirection, ThyTableSortEvent } from './table.interface';

export interface IThyTableColumnParentComponent {
    rowKey: string;
    updateColumnSelections(key: string, selections: any): void;
}

/**
 * Injection token used to provide the parent component to options.
 */
export const THY_TABLE_COLUMN_PARENT_COMPONENT = new InjectionToken<IThyTableColumnParentComponent>('THY_TABLE_COLUMN_PARENT_COMPONENT');

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

/**
 * 表格列组件
 * @name thy-table-column
 * @order 20
 */
@Component({
    selector: 'thy-table-column',
    template: '<ng-content></ng-content>',
    encapsulation: ViewEncapsulation.None,
    standalone: true
})
export class ThyTableColumnComponent implements OnInit {
    /**
     * 设置数据属性 Key，读取数组中对象的当前 Key 值
     * @type string
     */
    @Input('thyModelKey') model = '';

    /**
     * 设置列名，显示在表头
     * @type string
     */
    @Input('thyTitle') title = '';

    /**
     * 设置列的特殊类型，序列号、选择框、单选框、切换按钮
     * @type string
     */
    @Input('thyType') type = '';

    public width: string = '';

    /**
     * 设置列的宽度
     */
    @Input()
    set thyWidth(value: string | number) {
        this.width = coerceCssPixelValue(value);
    }

    public minWidth: string = '';

    /**
     * 设置列的最小宽度
     */
    @Input()
    set thyMinWidth(value: string | number) {
        this.minWidth = coerceCssPixelValue(value);
    }

    /**
     * 设置列的样式
     */
    @Input('thyClassName') className = '';

    /**
     * 设置列头部的 Class，即 th 元素上的样式
     * @type string
     */
    @Input('thyHeaderClassName') headerClassName = '';

    /**
     * 设置自定义类型的禁用状态
     * @type boolean
     */
    @Input({ alias: 'thyDisabled', transform: coerceBooleanProperty }) disabled = false;

    /**
     * thyType 为 checkbox 或者 radio 类型时选中的数据 ，支持单个对象，单个 Id，同时支持多个 Id，多个对象
     */
    @Input('thySelections')
    set selections(value: any) {
        if (value) {
            this._selections = isArray(value) ? value : [value];
            this._selections = this._selections.map((item: string | number | object) => {
                return isObject(item) ? item[this.parent.rowKey] : item;
            });
            if (!this._firstChange) {
                this.parent.updateColumnSelections(this.key, this._selections);
            }
        }
    }

    get selections() {
        return this._selections;
    }
    /**
     * 设置数据为空的时候显示的文本
     * @type string
     */
    @Input('thyDefaultText') defaultText = '';

    /**
     * 设置 Tree 模式下折叠展开按钮展示列，不传默认第一列
     */
    @Input({ alias: 'thyExpand', transform: coerceBooleanProperty }) expand = false;

    public sortable: boolean;

    /**
     * 是否开启列排序功能（开启时 thyModelKey 为 必传）
     * @default false
     */
    @Input({ transform: coerceBooleanProperty })
    set thySortable(value: boolean) {
        if (value) {
            if (this.model) {
                this.sortable = true;
            } else {
                throw new Error(`thyModelKey is required when sortable`);
            }
        } else {
            this.sortable = false;
        }
    }

    /**
     * 默认列排序顺序
     * @type 'asc' | 'desc' | ''
     */
    @Input('thySortDirection') sortDirection = ThyTableSortDirection.default;

    /**
     * 设置固定列
     */
    @Input('thyFixed') fixed: FixedDirection;

    /**
     * 当前列是否是操作列，设置为 true 时会追加 thy-operation-links 样式类，文字居中
     * @default false
     */
    @Input({ alias: 'thyOperational', transform: coerceBooleanProperty }) operational: boolean;

    /**
     * 当前列是否是次要列，设置为 true 时会追加 thy-table-column-secondary 样式类，文字颜色为 $gray-600
     * @default false
     */
    @Input({ alias: 'thySecondary', transform: coerceBooleanProperty }) secondary: boolean;

    /**
     * 列排序修改事件
     */
    @Output('thySortChange') sortChange: EventEmitter<ThyTableSortEvent> = new EventEmitter<ThyTableSortEvent>();

    @ContentChild('header', { static: true }) headerTemplateRef: TemplateRef<any>;

    @ContentChild('cell', { static: true }) cellTemplateRef: TemplateRef<any>;

    @ContentChild(TemplateRef, { static: true })
    set templateRef(value: TemplateRef<any>) {
        if (value) {
            if (!this.headerTemplateRef && !this.cellTemplateRef) {
                this.cellTemplateRef = value;
            }
        }
    }

    public key?: string;

    public left: number;

    public right: number;

    private _selections: any;

    private _firstChange = true;

    constructor(
        private el: ElementRef,
        @Optional()
        @Inject(THY_TABLE_COLUMN_PARENT_COMPONENT)
        public parent: IThyTableColumnParentComponent
    ) {}

    ngOnInit() {
        this.key = this._generateKey();
        this._firstChange = false;
    }

    private _generateKey() {
        return '[$$column]' + Math.random().toString(16).slice(2, 10);
    }
}

1	import { _isNumberValue, coerceCssPixelValue } from '@angular/cdk/coercion';
2	import {
3	Component,
4	ContentChild,
5	ElementRef,
6	EventEmitter,
7	Inject,
8	InjectionToken,
9	Input,	1✔
10	OnInit,
11	Optional,
12	Output,
13	TemplateRef,
14	ViewEncapsulation
15	} from '@angular/core';	1✔
16	import { coerceBooleanProperty, isArray, isObject } from 'ngx-tethys/util';
17	import { ThyTableSortDirection, ThyTableSortEvent } from './table.interface';	75✔
18
19	export interface IThyTableColumnParentComponent {
UNCOV 20	rowKey: string;	×
21	updateColumnSelections(key: string, selections: any): void;
22	}
23		99✔
24	/**	89!
25	* Injection token used to provide the parent component to options.	89✔
UNCOV 26	*/	×
27	export const THY_TABLE_COLUMN_PARENT_COMPONENT = new InjectionToken<IThyTableColumnParentComponent>('THY_TABLE_COLUMN_PARENT_COMPONENT');
28		89!
UNCOV 29	export type FixedDirection = 'left' \| 'right';	×
30
31	/**
32	* 表格列组件
33	* @name thy-table-column
34	* @order 20	2,349✔
35	*/
36	@Component({
37	selector: 'thy-table-column',	4✔
38	template: '<ng-content></ng-content>',	3!
39	encapsulation: ViewEncapsulation.None,	3✔
40	standalone: true
41	})
UNCOV 42	export class ThyTableColumnComponent implements OnInit {	×
43	/**
44	* 设置数据属性 Key，读取数组中对象的当前 Key 值
45	* @type string
46	*/	1✔
47	@Input('thyModelKey') model = '';
48
49	/**
50	* 设置列名，显示在表头	400✔
51	* @type string	109!
UNCOV 52	*/	×
53	@Input('thyTitle') title = '';
54
55	/**
56	* 设置列的特殊类型，序列号、选择框、单选框、切换按钮
57	* @type string	400✔
58	*/	400✔
59	@Input('thyType') type = '';	400✔
60		400✔
61	public width: string = '';	400✔
62		400✔
63	/**	400✔
64	* 设置列的宽度	400✔
65	*/	400✔
66	@Input()	400✔
67	set thyWidth(value: string \| number) {	400✔
68	this.width = coerceCssPixelValue(value);	400✔
69	}	400✔
70		400✔
71	public minWidth: string = '';	400✔
72
73	/**
74	* 设置列的最小宽度	377✔
75	*/	377✔
76	@Input()
77	set thyMinWidth(value: string \| number) {
78	this.minWidth = coerceCssPixelValue(value);	377✔
79	}
80		1✔
81	/**
82	* 设置列的样式
83	*/
84	@Input('thyClassName') className = '';	1✔
85
86	/**
87	* 设置列头部的 Class，即 th 元素上的样式
88	* @type string
89	*/
90	@Input('thyHeaderClassName') headerClassName = '';
91
92	/**
93	* 设置自定义类型的禁用状态
94	* @type boolean
95	*/
96	@Input({ alias: 'thyDisabled', transform: coerceBooleanProperty }) disabled = false;
97
98	/**
99	* thyType 为 checkbox 或者 radio 类型时选中的数据，支持单个对象，单个 Id，同时支持多个 Id，多个对象
100	*/
101	@Input('thySelections')
102	set selections(value: any) {
103	if (value) {
104	this._selections = isArray(value) ? value : [value];
105	this._selections = this._selections.map((item: string \| number \| object) => {
106	return isObject(item) ? item[this.parent.rowKey] : item;
107	});	1✔
108	if (!this._firstChange) {
109	this.parent.updateColumnSelections(this.key, this._selections);
110	}
111	}
112	}
113
114	get selections() {
115	return this._selections;
116	}
117	/**
118	* 设置数据为空的时候显示的文本
119	* @type string
120	*/
121	@Input('thyDefaultText') defaultText = '';
122
123	/**
124	* 设置 Tree 模式下折叠展开按钮展示列，不传默认第一列
125	*/
126	@Input({ alias: 'thyExpand', transform: coerceBooleanProperty }) expand = false;
127
128	public sortable: boolean;
129
130	/**
131	* 是否开启列排序功能（开启时 thyModelKey 为必传）
132	* @default false
133	*/
134	@Input({ transform: coerceBooleanProperty })
135	set thySortable(value: boolean) {
136	if (value) {
137	if (this.model) {
138	this.sortable = true;
139	} else {
140	throw new Error(`thyModelKey is required when sortable`);
141	}
142	} else {
143	this.sortable = false;
144	}
145	}
146
147	/**
148	* 默认列排序顺序
149	* @type 'asc' \| 'desc' \| ''
150	*/
151	@Input('thySortDirection') sortDirection = ThyTableSortDirection.default;
152
153	/**
154	* 设置固定列
155	*/
156	@Input('thyFixed') fixed: FixedDirection;
157
158	/**
159	* 当前列是否是操作列，设置为 true 时会追加 thy-operation-links 样式类，文字居中
160	* @default false
161	*/
162	@Input({ alias: 'thyOperational', transform: coerceBooleanProperty }) operational: boolean;
163
164	/**
165	* 当前列是否是次要列，设置为 true 时会追加 thy-table-column-secondary 样式类，文字颜色为 $gray-600
166	* @default false
167	*/
168	@Input({ alias: 'thySecondary', transform: coerceBooleanProperty }) secondary: boolean;
169
170	/**
171	* 列排序修改事件
172	*/
173	@Output('thySortChange') sortChange: EventEmitter<ThyTableSortEvent> = new EventEmitter<ThyTableSortEvent>();
174
175	@ContentChild('header', { static: true }) headerTemplateRef: TemplateRef<any>;
176
177	@ContentChild('cell', { static: true }) cellTemplateRef: TemplateRef<any>;
178
179	@ContentChild(TemplateRef, { static: true })
180	set templateRef(value: TemplateRef<any>) {
181	if (value) {
182	if (!this.headerTemplateRef && !this.cellTemplateRef) {
183	this.cellTemplateRef = value;
184	}
185	}
186	}
187
188	public key?: string;
189
190	public left: number;
191
192	public right: number;
193
194	private _selections: any;
195
196	private _firstChange = true;
197
198	constructor(
199	private el: ElementRef,
200	@Optional()
201	@Inject(THY_TABLE_COLUMN_PARENT_COMPONENT)
202	public parent: IThyTableColumnParentComponent
203	) {}
204
205	ngOnInit() {
206	this.key = this._generateKey();
207	this._firstChange = false;
208	}
209
210	private _generateKey() {
211	return '[$$column]' + Math.random().toString(16).slice(2, 10);
212	}
213	}

atinc / ngx-tethys / e62d3b10-1466-49c3-aabd-707148681fc8

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