d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { helpers, isNumber } from 'ngx-tethys/util';

import {
    ChangeDetectionStrategy,
    Component,
    HostBinding,
    Input,
    OnChanges,
    OnInit,
    QueryList,
    SimpleChanges,
    TemplateRef,
    ViewChildren,
    ViewEncapsulation
} from '@angular/core';
import { useHostRenderer } from '@tethys/cdk/dom';

import { ThyProgressGapPositionType, ThyProgressShapeType, ThyProgressStackedValue, ThyProgressType } from './interfaces';
import { THY_PROGRESS_COMPONENT, ThyParentProgress, ThyProgressStripComponent } from './progress-strip.component';
import { ThyProgressCircleComponent } from './progress-circle.component';
import { ThyTooltipDirective } from 'ngx-tethys/tooltip';
import { NgIf, NgFor, NgClass, NgTemplateOutlet } from '@angular/common';
import { InputNumber } from 'ngx-tethys/core';

/**
 * 进度条组件
 * @name thy-progress
 */
@Component({
    selector: 'thy-progress',
    templateUrl: './progress.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    encapsulation: ViewEncapsulation.None,
    providers: [
        {
            provide: THY_PROGRESS_COMPONENT,
            useExisting: ThyProgressComponent
        }
    ],
    host: {
        class: `thy-progress progress`,
        '[class.thy-progress-strip]': `thyShape === 'strip'`,
        '[class.thy-progress-circle]': `thyShape === 'circle'`
    },
    standalone: true,
    imports: [NgIf, NgFor, ThyProgressStripComponent, NgClass, ThyTooltipDirective, NgTemplateOutlet, ThyProgressCircleComponent]
})
export class ThyProgressComponent implements ThyParentProgress, OnInit, OnChanges {
    value: number | ThyProgressStackedValue[];

    bars: ThyProgressStripComponent[] = [];

    barsTotalValue: number;

    private settedMax: number;

    private hostRenderer = useHostRenderer();

    @HostBinding('attr.max') max = 100;

    @HostBinding(`class.progress-stacked`) isStacked = false;

    @ViewChildren(ThyProgressStripComponent)
    set barsQueryList(value: QueryList<ThyProgressStripComponent>) {
        this.bars = value.toArray();
    }

    /**
     * 进度条类型: `primary` | `success` | `info` | `warning` | `danger`
     */
    @Input() thyType: ThyProgressType = 'primary';

    /**
     * 进度条大小
     * @type xs | sm | md
     * @default md
     */
    @Input() set thySize(size: string | number) {
        this.size = size;
        this.hostRenderer.updateClass(size ? [`progress-${size}`] : []);
    }

    /**
     * 进度值，传入数字时显示百分比 = value / max * 100，当传入数组时显示多个 bar，stacked 模式的进度条
     * @type number | ThyProgressStackedValue[]
     */
    @Input() set thyValue(value: number | ThyProgressStackedValue[]) {
        // 自动求和计算 max
        if (Array.isArray(value)) {
            this.isStacked = true;
            this.value = [...value].filter(item => item.value !== 0);
            this.barsTotalValue = this.value.reduce((total, item) => {
                return total + item.value;
            }, 0);
            this.calculateMax();
        } else {
            this.value = value;
        }
    }

    /**
     * 最大值，主要计算百分比进度的分母使用，当 thyValue 传入数组时，自动累加数组中的 value 之和为 max
     */
    @Input()
    @InputNumber()
    set thyMax(max: number) {
        this.settedMax = helpers.coerceNumberValue(max);
        this.calculateMax();
    }

    /**
     * 鼠标移入进度条时显示的提示文案或者模板
     */
    @Input() thyTips: string | TemplateRef<unknown>;

    /**
     * 进度形状
     * @type strip | circle
     */
    @Input() thyShape: ThyProgressShapeType = 'strip';

    /**
     * 圆形进度条缺口角度，可取值 0 ~ 360
     */
    @Input() @InputNumber() thyGapDegree?: number = undefined;

    /**
     * 圆形进度条缺口位置
     * @type top | bottom | left | right
     */
    @Input() thyGapPosition: ThyProgressGapPositionType = 'top';

    /**
     *         圆形进度条线的宽度
     */
    @Input() @InputNumber() thyStrokeWidth: number;

    size: string | number;

    constructor() {}

    ngOnInit() {}

    ngOnChanges(changes: SimpleChanges): void {}

    calculateMax() {
        if (isNumber(this.settedMax) && this.settedMax > 0) {
            this.max = this.settedMax;
        } else {
            this.max = this.barsTotalValue;
        }
        if (this.max < this.barsTotalValue) {
            this.max = this.barsTotalValue;
        }
        this.bars.forEach(bar => {
            bar.recalculatePercentage();
        });
    }

    trackByFn(index: number) {
        return index;
    }
}

1	import { helpers, isNumber } from 'ngx-tethys/util';
2
3	import {
4	ChangeDetectionStrategy,
5	Component,
6	HostBinding,
7	Input,
8	OnChanges,
9	OnInit,
10	QueryList,
11	SimpleChanges,
12	TemplateRef,
13	ViewChildren,
14	ViewEncapsulation
15	} from '@angular/core';
16	import { useHostRenderer } from '@tethys/cdk/dom';	1✔
17
18	import { ThyProgressGapPositionType, ThyProgressShapeType, ThyProgressStackedValue, ThyProgressType } from './interfaces';	×
19	import { THY_PROGRESS_COMPONENT, ThyParentProgress, ThyProgressStripComponent } from './progress-strip.component';
20	import { ThyProgressCircleComponent } from './progress-circle.component';
21	import { ThyTooltipDirective } from 'ngx-tethys/tooltip';	×
22	import { NgIf, NgFor, NgClass, NgTemplateOutlet } from '@angular/common';	×
23	import { InputNumber } from 'ngx-tethys/core';
24
25	/**
26	* 进度条组件	×
27	* @name thy-progress	×
28	*/	×
29	@Component({	×
30	selector: 'thy-progress',	×
31	templateUrl: './progress.component.html',
32	changeDetection: ChangeDetectionStrategy.OnPush,	×
33	encapsulation: ViewEncapsulation.None,
34	providers: [
35	{	×
36	provide: THY_PROGRESS_COMPONENT,
37	useExisting: ThyProgressComponent
38	}
39	],	×
40	host: {	×
41	class: `thy-progress progress`,
42	'[class.thy-progress-strip]': `thyShape === 'strip'`,
43	'[class.thy-progress-circle]': `thyShape === 'circle'`	×
44	},	×
45	standalone: true,	×
46	imports: [NgIf, NgFor, ThyProgressStripComponent, NgClass, ThyTooltipDirective, NgTemplateOutlet, ThyProgressCircleComponent]	×
47	})	×
48	export class ThyProgressComponent implements ThyParentProgress, OnInit, OnChanges {	×
49	value: number \| ThyProgressStackedValue[];	×
50		×
51	bars: ThyProgressStripComponent[] = [];
52
53	barsTotalValue: number;
54
55	private settedMax: number;	×
56		×
57	private hostRenderer = useHostRenderer();
58
59	@HostBinding('attr.max') max = 100;	×
60
61	@HostBinding(`class.progress-stacked`) isStacked = false;	×
62		×
63	@ViewChildren(ThyProgressStripComponent)
64	set barsQueryList(value: QueryList<ThyProgressStripComponent>) {	×
65	this.bars = value.toArray();	×
66	}
67
68	/**
69	* 进度条类型: `primary` \| `success` \| `info` \| `warning` \| `danger`	×
70	*/
71	@Input() thyType: ThyProgressType = 'primary';	1✔
72		1✔
73	/**
74	* 进度条大小
75	* @type xs \| sm \| md
76	* @default md
77	*/
78	@Input() set thySize(size: string \| number) {
79	this.size = size;
80	this.hostRenderer.updateClass(size ? [`progress-${size}`] : []);
81	}
82
83	/**
84	* 进度值，传入数字时显示百分比 = value / max * 100，当传入数组时显示多个 bar，stacked 模式的进度条
85	* @type number \| ThyProgressStackedValue[]
86	*/
87	@Input() set thyValue(value: number \| ThyProgressStackedValue[]) {	1✔
88	// 自动求和计算 max
89	if (Array.isArray(value)) {
90	this.isStacked = true;
91	this.value = [...value].filter(item => item.value !== 0);
92	this.barsTotalValue = this.value.reduce((total, item) => {	1✔
93	return total + item.value;
94	}, 0);
95	this.calculateMax();
96	} else {	1✔
97	this.value = value;
98	}
99	}
100		1✔
101	/**
102	* 最大值，主要计算百分比进度的分母使用，当 thyValue 传入数组时，自动累加数组中的 value 之和为 max
103	*/
104	@Input()
105	@InputNumber()
106	set thyMax(max: number) {
107	this.settedMax = helpers.coerceNumberValue(max);
108	this.calculateMax();
109	}
110
111	/**
112	* 鼠标移入进度条时显示的提示文案或者模板
113	*/
114	@Input() thyTips: string \| TemplateRef<unknown>;
115
116	/**
117	* 进度形状
118	* @type strip \| circle
119	*/
120	@Input() thyShape: ThyProgressShapeType = 'strip';
121
122	/**
123	* 圆形进度条缺口角度，可取值 0 ~ 360
124	*/
125	@Input() @InputNumber() thyGapDegree?: number = undefined;
126
127	/**
128	* 圆形进度条缺口位置
129	* @type top \| bottom \| left \| right
130	*/
131	@Input() thyGapPosition: ThyProgressGapPositionType = 'top';
132
133	/**
134	* 圆形进度条线的宽度
135	*/
136	@Input() @InputNumber() thyStrokeWidth: number;
137
138	size: string \| number;
139
140	constructor() {}
141
142	ngOnInit() {}
143
144	ngOnChanges(changes: SimpleChanges): void {}
145
146	calculateMax() {
147	if (isNumber(this.settedMax) && this.settedMax > 0) {
148	this.max = this.settedMax;
149	} else {
150	this.max = this.barsTotalValue;
151	}
152	if (this.max < this.barsTotalValue) {
153	this.max = this.barsTotalValue;
154	}
155	this.bars.forEach(bar => {
156	bar.recalculatePercentage();
157	});
158	}
159
160	trackByFn(index: number) {
161	return index;
162	}
163	}

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