@libs-ui/components-process-bar-steps 0.2.357-2 → 0.2.357-4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +42 -63
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -34,11 +34,7 @@ npm install @libs-ui/components-process-bar-steps
|
|
|
34
34
|
|
|
35
35
|
```typescript
|
|
36
36
|
import { LibsUiComponentsProcessBarStepsComponent } from '@libs-ui/components-process-bar-steps';
|
|
37
|
-
import {
|
|
38
|
-
IProcessBarStepConfigInterface,
|
|
39
|
-
IProcessBarStepSimpleConfigInterface,
|
|
40
|
-
IProcessBarStepAdvancedConfigInterface,
|
|
41
|
-
} from '@libs-ui/components-process-bar-steps';
|
|
37
|
+
import { IProcessBarStepConfigInterface, IProcessBarStepSimpleConfigInterface, IProcessBarStepAdvancedConfigInterface } from '@libs-ui/components-process-bar-steps';
|
|
42
38
|
|
|
43
39
|
@Component({
|
|
44
40
|
standalone: true,
|
|
@@ -60,11 +56,7 @@ export class YourComponent {}
|
|
|
60
56
|
```typescript
|
|
61
57
|
// your-component.component.ts
|
|
62
58
|
import { Component, signal } from '@angular/core';
|
|
63
|
-
import {
|
|
64
|
-
LibsUiComponentsProcessBarStepsComponent,
|
|
65
|
-
IProcessBarStepConfigInterface,
|
|
66
|
-
IProcessBarStepSimpleConfigInterface,
|
|
67
|
-
} from '@libs-ui/components-process-bar-steps';
|
|
59
|
+
import { LibsUiComponentsProcessBarStepsComponent, IProcessBarStepConfigInterface, IProcessBarStepSimpleConfigInterface } from '@libs-ui/components-process-bar-steps';
|
|
68
60
|
|
|
69
61
|
@Component({
|
|
70
62
|
standalone: true,
|
|
@@ -101,11 +93,7 @@ export class YourComponent {
|
|
|
101
93
|
```typescript
|
|
102
94
|
// your-component.component.ts
|
|
103
95
|
import { Component, signal } from '@angular/core';
|
|
104
|
-
import {
|
|
105
|
-
LibsUiComponentsProcessBarStepsComponent,
|
|
106
|
-
IProcessBarStepConfigInterface,
|
|
107
|
-
IProcessBarStepAdvancedConfigInterface,
|
|
108
|
-
} from '@libs-ui/components-process-bar-steps';
|
|
96
|
+
import { LibsUiComponentsProcessBarStepsComponent, IProcessBarStepConfigInterface, IProcessBarStepAdvancedConfigInterface } from '@libs-ui/components-process-bar-steps';
|
|
109
97
|
|
|
110
98
|
@Component({
|
|
111
99
|
standalone: true,
|
|
@@ -147,8 +135,8 @@ export class YourComponent {
|
|
|
147
135
|
|
|
148
136
|
// Cập nhật trạng thái khi sự kiện xảy ra
|
|
149
137
|
protected handlerMarkShipped(): void {
|
|
150
|
-
this.step3.update(s => ({ ...s, processCompleted: true, processCompletedColor: '#10B981' }));
|
|
151
|
-
this.step4.update(s => ({ ...s, isCurrentProcess: true, currentProcessColor: '#3B82F6' }));
|
|
138
|
+
this.step3.update((s) => ({ ...s, processCompleted: true, processCompletedColor: '#10B981' }));
|
|
139
|
+
this.step4.update((s) => ({ ...s, isCurrentProcess: true, currentProcessColor: '#3B82F6' }));
|
|
152
140
|
}
|
|
153
141
|
}
|
|
154
142
|
```
|
|
@@ -163,11 +151,7 @@ export class YourComponent {
|
|
|
163
151
|
```typescript
|
|
164
152
|
// your-component.component.ts
|
|
165
153
|
import { Component, computed, signal, WritableSignal, effect } from '@angular/core';
|
|
166
|
-
import {
|
|
167
|
-
LibsUiComponentsProcessBarStepsComponent,
|
|
168
|
-
IProcessBarStepConfigInterface,
|
|
169
|
-
IProcessBarStepSimpleConfigInterface,
|
|
170
|
-
} from '@libs-ui/components-process-bar-steps';
|
|
154
|
+
import { LibsUiComponentsProcessBarStepsComponent, IProcessBarStepConfigInterface, IProcessBarStepSimpleConfigInterface } from '@libs-ui/components-process-bar-steps';
|
|
171
155
|
|
|
172
156
|
@Component({
|
|
173
157
|
standalone: true,
|
|
@@ -188,8 +172,7 @@ export class YourComponent {
|
|
|
188
172
|
}));
|
|
189
173
|
|
|
190
174
|
// WritableSignal wrapper bắt buộc vì IProcessBarStepConfigInterface yêu cầu WritableSignal
|
|
191
|
-
private readonly simpleConfigSignal: WritableSignal<IProcessBarStepSimpleConfigInterface> =
|
|
192
|
-
signal(this.simpleConfigValues());
|
|
175
|
+
private readonly simpleConfigSignal: WritableSignal<IProcessBarStepSimpleConfigInterface> = signal(this.simpleConfigValues());
|
|
193
176
|
|
|
194
177
|
protected readonly configInteractive = computed<IProcessBarStepConfigInterface>(() => ({
|
|
195
178
|
simpleConfig: this.simpleConfigSignal,
|
|
@@ -203,16 +186,16 @@ export class YourComponent {
|
|
|
203
186
|
constructor() {
|
|
204
187
|
// Đồng bộ computed → writableSignal để truyền vào config
|
|
205
188
|
effect(() => {
|
|
206
|
-
this.simpleConfigSignal.set(this.simpleConfigValues());
|
|
207
|
-
}
|
|
189
|
+
untracked(() => this.simpleConfigSignal.set(this.simpleConfigValues()));
|
|
190
|
+
});
|
|
208
191
|
}
|
|
209
192
|
|
|
210
193
|
protected handlerNextStep(): void {
|
|
211
|
-
this.currentStep.update(v => Math.min(v + 1, this.totalSteps()));
|
|
194
|
+
this.currentStep.update((v) => Math.min(v + 1, this.totalSteps()));
|
|
212
195
|
}
|
|
213
196
|
|
|
214
197
|
protected handlerPrevStep(): void {
|
|
215
|
-
this.currentStep.update(v => Math.max(v - 1, 1));
|
|
198
|
+
this.currentStep.update((v) => Math.max(v - 1, 1));
|
|
216
199
|
}
|
|
217
200
|
}
|
|
218
201
|
```
|
|
@@ -242,62 +225,58 @@ export const appConfig: ApplicationConfig = {
|
|
|
242
225
|
|
|
243
226
|
## @Input()
|
|
244
227
|
|
|
245
|
-
| Input
|
|
246
|
-
|
|
228
|
+
| Input | Type | Default | Mô tả | Ví dụ |
|
|
229
|
+
| ---------- | -------------------------------- | ------------ | ----------------------------------------------------------------------------------------------- | --------------------------- |
|
|
247
230
|
| `[config]` | `IProcessBarStepConfigInterface` | **Bắt buộc** | Object cấu hình toàn bộ process bar — bao gồm kích thước, màu sắc, vị trí label và dữ liệu bước | `[config]="configSimple()"` |
|
|
248
231
|
|
|
249
232
|
## Types & Interfaces
|
|
250
233
|
|
|
251
234
|
```typescript
|
|
252
|
-
import {
|
|
253
|
-
IProcessBarStepConfigInterface,
|
|
254
|
-
IProcessBarStepSimpleConfigInterface,
|
|
255
|
-
IProcessBarStepAdvancedConfigInterface,
|
|
256
|
-
} from '@libs-ui/components-process-bar-steps';
|
|
235
|
+
import { IProcessBarStepConfigInterface, IProcessBarStepSimpleConfigInterface, IProcessBarStepAdvancedConfigInterface } from '@libs-ui/components-process-bar-steps';
|
|
257
236
|
```
|
|
258
237
|
|
|
259
238
|
### IProcessBarStepConfigInterface
|
|
260
239
|
|
|
261
240
|
Config chính truyền vào `[config]`. Cần chọn **một trong hai** chế độ: `simpleConfig` hoặc `advancedConfig`.
|
|
262
241
|
|
|
263
|
-
| Property
|
|
264
|
-
|
|
265
|
-
| `simpleConfig`
|
|
266
|
-
| `advancedConfig`
|
|
267
|
-
| `positionLabel`
|
|
268
|
-
| `justifyLabel`
|
|
269
|
-
| `widthStep`
|
|
270
|
-
| `heightStep`
|
|
271
|
-
| `backgroundColorStep` | `string`
|
|
272
|
-
| `radiusStep`
|
|
273
|
-
| `classInclude`
|
|
242
|
+
| Property | Type | Default | Mô tả | Ví dụ |
|
|
243
|
+
| --------------------- | ------------------------------------------------------------------------------- | ----------- | ------------------------------------------------------------ | ------------------------------------------------------------- |
|
|
244
|
+
| `simpleConfig` | `WritableSignal<IProcessBarStepSimpleConfigInterface>` | `undefined` | Cấu hình Simple Mode — tự động sinh các bước từ `totalStep` | `simpleConfig: signal({ totalStep: 4, currentStep: 2, ... })` |
|
|
245
|
+
| `advancedConfig` | `WritableSignal<Array<WritableSignal<IProcessBarStepAdvancedConfigInterface>>>` | `undefined` | Cấu hình Advanced Mode — mảng signal cho từng bước | `advancedConfig: signal([step1, step2, step3])` |
|
|
246
|
+
| `positionLabel` | `'top' \| 'bottom' \| 'inner'` | `'top'` | Vị trí hiển thị label của từng bước | `positionLabel: 'bottom'` |
|
|
247
|
+
| `justifyLabel` | `'start' \| 'center' \| 'end'` | `'center'` | Căn chỉnh ngang của label và nội dung bên trong bước | `justifyLabel: 'start'` |
|
|
248
|
+
| `widthStep` | `string` | `'80px'` | Chiều rộng mỗi thanh bước | `widthStep: '60px'` |
|
|
249
|
+
| `heightStep` | `string` | `'12px'` | Chiều cao mỗi thanh bước | `heightStep: '8px'` |
|
|
250
|
+
| `backgroundColorStep` | `string` | `'#F8F9FA'` | Màu nền mặc định cho các bước chưa active và chưa hoàn thành | `backgroundColorStep: '#E5E7EB'` |
|
|
251
|
+
| `radiusStep` | `number` | `20` | Border radius (đơn vị px) — `20` tạo hình pill đầy đủ | `radiusStep: 4` |
|
|
252
|
+
| `classInclude` | `string` | `''` | Class CSS bổ sung cho thẻ container bao ngoài | `classInclude: 'my-[16px]'` |
|
|
274
253
|
|
|
275
254
|
### IProcessBarStepSimpleConfigInterface
|
|
276
255
|
|
|
277
256
|
Dùng trong `simpleConfig` — component tự động tạo các bước dựa trên config này.
|
|
278
257
|
|
|
279
|
-
| Property
|
|
280
|
-
|
|
281
|
-
| `totalStep`
|
|
282
|
-
| `currentStep`
|
|
283
|
-
| `completedStep`
|
|
284
|
-
| `currentStepColor`
|
|
285
|
-
| `stepCompletedColor` | `string` | **Bắt buộc**
|
|
258
|
+
| Property | Type | Default | Mô tả | Ví dụ |
|
|
259
|
+
| -------------------- | -------- | --------------- | --------------------------------------------------------------------------------------------------------------- | ------------------------------- |
|
|
260
|
+
| `totalStep` | `number` | **Bắt buộc** | Tổng số bước cần hiển thị | `totalStep: 5` |
|
|
261
|
+
| `currentStep` | `number` | **Bắt buộc** | Index bước hiện tại (bắt đầu từ 1) | `currentStep: 3` |
|
|
262
|
+
| `completedStep` | `number` | `= currentStep` | Số bước đã hoàn thành (index <= completedStep được tô màu completed). Mặc định bằng `currentStep` nếu không set | `completedStep: 2` |
|
|
263
|
+
| `currentStepColor` | `string` | **Bắt buộc** | Màu của thanh bước đang ở vị trí `currentStep` | `currentStepColor: '#3B82F6'` |
|
|
264
|
+
| `stepCompletedColor` | `string` | **Bắt buộc** | Màu của các thanh bước đã hoàn thành (`index <= completedStep`) | `stepCompletedColor: '#10B981'` |
|
|
286
265
|
|
|
287
266
|
### IProcessBarStepAdvancedConfigInterface
|
|
288
267
|
|
|
289
268
|
Dùng trong `advancedConfig` — mỗi bước là một `WritableSignal<IProcessBarStepAdvancedConfigInterface>`.
|
|
290
269
|
|
|
291
|
-
| Property
|
|
292
|
-
|
|
293
|
-
| `processCompleted`
|
|
294
|
-
| `processCompletedColor` | `string`
|
|
295
|
-
| `isCurrentProcess`
|
|
296
|
-
| `currentProcessColor`
|
|
297
|
-
| `label`
|
|
298
|
-
| `classLabel`
|
|
299
|
-
| `classIncludeStep`
|
|
300
|
-
| `classIncludeContainer` | `string`
|
|
270
|
+
| Property | Type | Default | Mô tả | Ví dụ |
|
|
271
|
+
| ----------------------- | --------- | ----------- | ----------------------------------------------------------- | ----------------------------------- |
|
|
272
|
+
| `processCompleted` | `boolean` | `false` | Bước đã hoàn thành — áp dụng `processCompletedColor` | `processCompleted: true` |
|
|
273
|
+
| `processCompletedColor` | `string` | `'#33DA8A'` | Màu nền khi bước đã hoàn thành | `processCompletedColor: '#10B981'` |
|
|
274
|
+
| `isCurrentProcess` | `boolean` | `false` | Bước đang được xử lý — áp dụng `currentProcessColor` | `isCurrentProcess: true` |
|
|
275
|
+
| `currentProcessColor` | `string` | `'#4E8CF7'` | Màu nền khi bước đang được xử lý | `currentProcessColor: '#3B82F6'` |
|
|
276
|
+
| `label` | `string` | `undefined` | Text label hiển thị theo `positionLabel` | `label: 'Đặt hàng'` |
|
|
277
|
+
| `classLabel` | `string` | `''` | Class CSS bổ sung cho thẻ label | `classLabel: 'text-green-600'` |
|
|
278
|
+
| `classIncludeStep` | `string` | `''` | Class CSS bổ sung cho thanh bước (step bar) | `classIncludeStep: 'shadow-sm'` |
|
|
279
|
+
| `classIncludeContainer` | `string` | `''` | Class CSS bổ sung cho container bao bọc bước (step + label) | `classIncludeContainer: 'px-[4px]'` |
|
|
301
280
|
|
|
302
281
|
## Thứ tự ưu tiên màu sắc
|
|
303
282
|
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-process-bar-steps",
|
|
3
|
-
"version": "0.2.357-
|
|
3
|
+
"version": "0.2.357-4",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/core": ">=18.0.0",
|
|
6
|
-
"@libs-ui/utils": "0.2.357-
|
|
6
|
+
"@libs-ui/utils": "0.2.357-4"
|
|
7
7
|
},
|
|
8
8
|
"sideEffects": false,
|
|
9
9
|
"module": "fesm2022/libs-ui-components-process-bar-steps.mjs",
|