@libs-ui/components-process-bar-steps 0.2.357-1 → 0.2.357-10

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.
Files changed (2) hide show
  1. package/README.md +127 -188
  2. 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,
@@ -50,174 +46,129 @@ export class YourComponent {}
50
46
 
51
47
  ## Ví dụ sử dụng
52
48
 
53
- ### Ví dụ 1 Simple Mode (cấu hình nhanh)
49
+ ### 1. Simple Config
50
+
51
+ Cấu hình đơn giản theo số lượng bước.
54
52
 
55
53
  ```html
56
- <!-- your-component.component.html -->
57
54
  <libs_ui-components-process_bar-steps [config]="configSimple()" />
58
55
  ```
59
56
 
60
57
  ```typescript
61
- // your-component.component.ts
62
- import { Component, signal } from '@angular/core';
63
- import {
64
- LibsUiComponentsProcessBarStepsComponent,
65
- IProcessBarStepConfigInterface,
66
- IProcessBarStepSimpleConfigInterface,
67
- } from '@libs-ui/components-process-bar-steps';
58
+ import { signal } from '@angular/core';
59
+ import { IProcessBarStepConfigInterface, IProcessBarStepSimpleConfigInterface } from '@libs-ui/components-process-bar-steps';
60
+
61
+ // Define Simple Config Signal
62
+ readonly simpleConfigSignal = signal<IProcessBarStepSimpleConfigInterface>({
63
+ totalStep: 4,
64
+ currentStep: 2,
65
+ completedStep: 1, // Steps <= 1 are completed
66
+ currentStepColor: '#3B82F6',
67
+ stepCompletedColor: '#10B981'
68
+ });
69
+
70
+ // Main Config
71
+ readonly configSimple = signal<IProcessBarStepConfigInterface>({
72
+ simpleConfig: this.simpleConfigSignal,
73
+ widthStep: '60px',
74
+ heightStep: '8px',
75
+ radiusStep: 4,
76
+ backgroundColorStep: '#E5E7EB'
77
+ });
78
+ ```
68
79
 
69
- @Component({
70
- standalone: true,
71
- imports: [LibsUiComponentsProcessBarStepsComponent],
72
- templateUrl: './your-component.component.html',
73
- changeDetection: ChangeDetectionStrategy.OnPush,
74
- })
75
- export class YourComponent {
76
- private readonly simpleConfigSignal = signal<IProcessBarStepSimpleConfigInterface>({
77
- totalStep: 4,
78
- currentStep: 2,
79
- completedStep: 1,
80
- currentStepColor: '#3B82F6',
81
- stepCompletedColor: '#10B981',
82
- });
80
+ ---
83
81
 
84
- protected readonly configSimple = signal<IProcessBarStepConfigInterface>({
85
- simpleConfig: this.simpleConfigSignal,
86
- widthStep: '60px',
87
- heightStep: '8px',
88
- radiusStep: 4,
89
- backgroundColorStep: '#E5E7EB',
90
- });
91
- }
92
- ```
82
+ ### 2. Advanced Config
93
83
 
94
- ### dụ 2 Advanced Mode (tùy chỉnh từng bước, có label)
84
+ Cấu hình chi tiết từng bước với Label & Custom Color.
95
85
 
96
86
  ```html
97
- <!-- your-component.component.html -->
98
87
  <libs_ui-components-process_bar-steps [config]="configAdvanced()" />
99
88
  ```
100
89
 
101
90
  ```typescript
102
- // your-component.component.ts
103
- import { Component, signal } from '@angular/core';
104
- import {
105
- LibsUiComponentsProcessBarStepsComponent,
106
- IProcessBarStepConfigInterface,
107
- IProcessBarStepAdvancedConfigInterface,
108
- } from '@libs-ui/components-process-bar-steps';
109
-
110
- @Component({
111
- standalone: true,
112
- imports: [LibsUiComponentsProcessBarStepsComponent],
113
- templateUrl: './your-component.component.html',
114
- changeDetection: ChangeDetectionStrategy.OnPush,
115
- })
116
- export class YourComponent {
117
- private readonly step1 = signal<IProcessBarStepAdvancedConfigInterface>({
118
- label: 'Đặt hàng',
119
- processCompleted: true,
120
- processCompletedColor: '#10B981',
121
- });
122
-
123
- private readonly step2 = signal<IProcessBarStepAdvancedConfigInterface>({
124
- label: 'Đang xử lý',
125
- isCurrentProcess: true,
126
- currentProcessColor: '#3B82F6',
127
- });
128
-
129
- private readonly step3 = signal<IProcessBarStepAdvancedConfigInterface>({
130
- label: 'Đã giao',
131
- processCompleted: false,
132
- });
91
+ import { signal } from '@angular/core';
92
+ import { IProcessBarStepConfigInterface } from '@libs-ui/components-process-bar-steps';
133
93
 
134
- private readonly step4 = signal<IProcessBarStepAdvancedConfigInterface>({
135
- label: 'Hoàn thành',
136
- processCompleted: false,
137
- });
94
+ // Define Advanced Steps as Signals
95
+ const step1 = signal({ label: 'Order Placed', processCompleted: true, processCompletedColor: '#10B981' });
96
+ const step2 = signal({ label: 'Processing', isCurrentProcess: true, currentProcessColor: '#3B82F6' });
97
+ const step3 = signal({ label: 'Shipped', processCompleted: false });
98
+ const step4 = signal({ label: 'Delivered', processCompleted: false });
99
+
100
+ readonly configAdvanced = signal<IProcessBarStepConfigInterface>({
101
+ advancedConfig: signal([step1, step2, step3, step4]),
102
+ positionLabel: 'bottom',
103
+ justifyLabel: 'center',
104
+ widthStep: '120px',
105
+ heightStep: '12px'
106
+ });
107
+ ```
138
108
 
139
- protected readonly configAdvanced = signal<IProcessBarStepConfigInterface>({
140
- advancedConfig: signal([this.step1, this.step2, this.step3, this.step4]),
141
- positionLabel: 'bottom',
142
- justifyLabel: 'center',
143
- widthStep: '120px',
144
- heightStep: '12px',
145
- radiusStep: 6,
146
- });
109
+ ---
147
110
 
148
- // Cập nhật trạng thái khi sự kiện xảy ra
149
- protected handlerMarkShipped(): void {
150
- this.step3.update(s => ({ ...s, processCompleted: true, processCompletedColor: '#10B981' }));
151
- this.step4.update(s => ({ ...s, isCurrentProcess: true, currentProcessColor: '#3B82F6' }));
152
- }
153
- }
154
- ```
111
+ ### 3. Interactive
155
112
 
156
- ### dụ 3 — Reactive với computed (tự động cập nhật)
113
+ Thay đổi cấu hình realtime.
157
114
 
158
115
  ```html
159
- <!-- your-component.component.html -->
116
+ <div class="controls">
117
+ <input type="range" [(ngModel)]="interactiveTotalSteps" min="2" max="10">
118
+ <input type="range" [(ngModel)]="interactiveCurrentStep" min="1" [max]="interactiveTotalSteps()">
119
+ <select [(ngModel)]="interactivePositionLabel">
120
+ <option value="top">Top</option>
121
+ <option value="bottom">Bottom</option>
122
+ <option value="inner">Inner</option>
123
+ </select>
124
+ </div>
160
125
  <libs_ui-components-process_bar-steps [config]="configInteractive()" />
161
126
  ```
162
127
 
163
128
  ```typescript
164
- // your-component.component.ts
165
- 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';
171
-
172
- @Component({
173
- standalone: true,
174
- imports: [LibsUiComponentsProcessBarStepsComponent],
175
- templateUrl: './your-component.component.html',
176
- changeDetection: ChangeDetectionStrategy.OnPush,
177
- })
178
- export class YourComponent {
179
- protected currentStep = signal(1);
180
- protected totalSteps = signal(5);
181
-
182
- private readonly simpleConfigValues = computed<IProcessBarStepSimpleConfigInterface>(() => ({
183
- totalStep: this.totalSteps(),
184
- currentStep: this.currentStep(),
185
- completedStep: this.currentStep() - 1,
186
- currentStepColor: '#8B5CF6',
187
- stepCompletedColor: '#F59E0B',
188
- }));
189
-
190
- // WritableSignal wrapper bắt buộc vì IProcessBarStepConfigInterface yêu cầu WritableSignal
191
- private readonly simpleConfigSignal: WritableSignal<IProcessBarStepSimpleConfigInterface> =
192
- signal(this.simpleConfigValues());
193
-
194
- protected readonly configInteractive = computed<IProcessBarStepConfigInterface>(() => ({
195
- simpleConfig: this.simpleConfigSignal,
196
- positionLabel: 'top',
197
- justifyLabel: 'center',
198
- widthStep: '80px',
199
- heightStep: '10px',
200
- radiusStep: 5,
201
- }));
202
-
203
- constructor() {
204
- // Đồng bộ computed → writableSignal để truyền vào config
205
- effect(() => {
206
- this.simpleConfigSignal.set(this.simpleConfigValues());
207
- }, { allowSignalWrites: true });
208
- }
209
-
210
- protected handlerNextStep(): void {
211
- this.currentStep.update(v => Math.min(v + 1, this.totalSteps()));
212
- }
213
-
214
- protected handlerPrevStep(): void {
215
- this.currentStep.update(v => Math.max(v - 1, 1));
216
- }
129
+ import { signal, computed, effect, untracked } from '@angular/core';
130
+ import { IProcessBarStepConfigInterface, IProcessBarStepSimpleConfigInterface } from '@libs-ui/components-process-bar-steps';
131
+
132
+ // [(ngModel)] điều khiển bằng slider/select
133
+ readonly interactiveTotalSteps = signal(5);
134
+ readonly interactiveCurrentStep = signal(3);
135
+ readonly interactivePositionLabel = signal<'top' | 'bottom' | 'inner'>('top');
136
+ readonly interactiveJustifyLabel = signal<'start' | 'center' | 'end'>('center');
137
+
138
+ // simpleConfig tính toán từ các signal tương tác
139
+ readonly interactiveSimpleConfig = computed<IProcessBarStepSimpleConfigInterface>(() => ({
140
+ totalStep: this.interactiveTotalSteps(),
141
+ currentStep: this.interactiveCurrentStep(),
142
+ completedStep: this.interactiveCurrentStep() - 1,
143
+ currentStepColor: '#8B5CF6',
144
+ stepCompletedColor: '#F59E0B',
145
+ }));
146
+
147
+ // Signal ghi (WritableSignal) đồng bộ từ computed qua effect() API yêu cầu simpleConfig là WritableSignal
148
+ readonly interactiveSimpleConfigSignal = signal<IProcessBarStepSimpleConfigInterface>(this.interactiveSimpleConfig());
149
+
150
+ constructor() {
151
+ effect(() => {
152
+ const config = this.interactiveSimpleConfig();
153
+ untracked(() => this.interactiveSimpleConfigSignal.set(config));
154
+ });
217
155
  }
156
+
157
+ // [config]="configInteractive()"
158
+ readonly configInteractive = computed<IProcessBarStepConfigInterface>(() => ({
159
+ simpleConfig: this.interactiveSimpleConfigSignal, // Updated via effect
160
+ positionLabel: this.interactivePositionLabel(),
161
+ justifyLabel: this.interactiveJustifyLabel(),
162
+ widthStep: '80px',
163
+ heightStep: '10px'
164
+ }));
218
165
  ```
219
166
 
220
- ### Ví dụ 4 Cấu hình Global Default Token (toàn app)
167
+ > ⚠️ **FormsModule bắt buộc**: Ví dụ Interactive dùng `[(ngModel)]`, cần import `FormsModule` vào `imports[]` của component sử dụng.
168
+
169
+ ---
170
+
171
+ ### 4. Cấu hình Global Default Token (toàn app)
221
172
 
222
173
  ```typescript
223
174
  // app.config.ts hoặc providers của module root
@@ -242,62 +193,58 @@ export const appConfig: ApplicationConfig = {
242
193
 
243
194
  ## @Input()
244
195
 
245
- | Input | Type | Default | Mô tả | Ví dụ |
246
- |---|---|---|---|---|
196
+ | Input | Type | Default | Mô tả | Ví dụ |
197
+ | ---------- | -------------------------------- | ------------ | ----------------------------------------------------------------------------------------------- | --------------------------- |
247
198
  | `[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
199
 
249
200
  ## Types & Interfaces
250
201
 
251
202
  ```typescript
252
- import {
253
- IProcessBarStepConfigInterface,
254
- IProcessBarStepSimpleConfigInterface,
255
- IProcessBarStepAdvancedConfigInterface,
256
- } from '@libs-ui/components-process-bar-steps';
203
+ import { IProcessBarStepConfigInterface, IProcessBarStepSimpleConfigInterface, IProcessBarStepAdvancedConfigInterface } from '@libs-ui/components-process-bar-steps';
257
204
  ```
258
205
 
259
206
  ### IProcessBarStepConfigInterface
260
207
 
261
208
  Config chính truyền vào `[config]`. Cần chọn **một trong hai** chế độ: `simpleConfig` hoặc `advancedConfig`.
262
209
 
263
- | Property | Type | Default | Mô tả | Ví dụ |
264
- |---|---|---|---|---|
265
- | `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, ... })` |
266
- | `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])` |
267
- | `positionLabel` | `'top' \| 'bottom' \| 'inner'` | `'top'` | Vị trí hiển thị label của từng bước | `positionLabel: 'bottom'` |
268
- | `justifyLabel` | `'start' \| 'center' \| 'end'` | `'center'` | Căn chỉnh ngang của label và nội dung bên trong bước | `justifyLabel: 'start'` |
269
- | `widthStep` | `string` | `'80px'` | Chiều rộng mỗi thanh bước | `widthStep: '60px'` |
270
- | `heightStep` | `string` | `'12px'` | Chiều cao mỗi thanh bước | `heightStep: '8px'` |
271
- | `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'` |
272
- | `radiusStep` | `number` | `20` | Border radius (đơn vị px) — `20` tạo hình pill đầy đủ | `radiusStep: 4` |
273
- | `classInclude` | `string` | `''` | Class CSS bổ sung cho thẻ container bao ngoài | `classInclude: 'my-[16px]'` |
210
+ | Property | Type | Default | Mô tả | Ví dụ |
211
+ | --------------------- | ------------------------------------------------------------------------------- | ----------- | ------------------------------------------------------------ | ------------------------------------------------------------- |
212
+ | `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, ... })` |
213
+ | `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])` |
214
+ | `positionLabel` | `'top' \| 'bottom' \| 'inner'` | `'top'` | Vị trí hiển thị label của từng bước | `positionLabel: 'bottom'` |
215
+ | `justifyLabel` | `'start' \| 'center' \| 'end'` | `'center'` | Căn chỉnh ngang của label và nội dung bên trong bước | `justifyLabel: 'start'` |
216
+ | `widthStep` | `string` | `'80px'` | Chiều rộng mỗi thanh bước | `widthStep: '60px'` |
217
+ | `heightStep` | `string` | `'12px'` | Chiều cao mỗi thanh bước | `heightStep: '8px'` |
218
+ | `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'` |
219
+ | `radiusStep` | `number` | `20` | Border radius (đơn vị px) — `20` tạo hình pill đầy đủ | `radiusStep: 4` |
220
+ | `classInclude` | `string` | `''` | Class CSS bổ sung cho thẻ container bao ngoài | `classInclude: 'my-[16px]'` |
274
221
 
275
222
  ### IProcessBarStepSimpleConfigInterface
276
223
 
277
224
  Dùng trong `simpleConfig` — component tự động tạo các bước dựa trên config này.
278
225
 
279
- | Property | Type | Default | Mô tả | Ví dụ |
280
- |---|---|---|---|---|
281
- | `totalStep` | `number` | **Bắt buộc** | Tổng số bước cần hiển thị | `totalStep: 5` |
282
- | `currentStep` | `number` | **Bắt buộc** | Index bước hiện tại (bắt đầu từ 1) | `currentStep: 3` |
283
- | `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` |
284
- | `currentStepColor` | `string` | **Bắt buộc** | Màu của thanh bước đang ở vị trí `currentStep` | `currentStepColor: '#3B82F6'` |
285
- | `stepCompletedColor` | `string` | **Bắt buộc** | Màu của các thanh bước đã hoàn thành (`index <= completedStep`) | `stepCompletedColor: '#10B981'` |
226
+ | Property | Type | Default | Mô tả | Ví dụ |
227
+ | -------------------- | -------- | --------------- | --------------------------------------------------------------------------------------------------------------- | ------------------------------- |
228
+ | `totalStep` | `number` | **Bắt buộc** | Tổng số bước cần hiển thị | `totalStep: 5` |
229
+ | `currentStep` | `number` | **Bắt buộc** | Index bước hiện tại (bắt đầu từ 1) | `currentStep: 3` |
230
+ | `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` |
231
+ | `currentStepColor` | `string` | **Bắt buộc** | Màu của thanh bước đang ở vị trí `currentStep` | `currentStepColor: '#3B82F6'` |
232
+ | `stepCompletedColor` | `string` | **Bắt buộc** | Màu của các thanh bước đã hoàn thành (`index <= completedStep`) | `stepCompletedColor: '#10B981'` |
286
233
 
287
234
  ### IProcessBarStepAdvancedConfigInterface
288
235
 
289
236
  Dùng trong `advancedConfig` — mỗi bước là một `WritableSignal<IProcessBarStepAdvancedConfigInterface>`.
290
237
 
291
- | Property | Type | Default | Mô tả | Ví dụ |
292
- |---|---|---|---|---|
293
- | `processCompleted` | `boolean` | `false` | Bước đã hoàn thành — áp dụng `processCompletedColor` | `processCompleted: true` |
294
- | `processCompletedColor` | `string` | `'#33DA8A'` | Màu nền khi bước đã hoàn thành | `processCompletedColor: '#10B981'` |
295
- | `isCurrentProcess` | `boolean` | `false` | Bước đang được xử lý — áp dụng `currentProcessColor` | `isCurrentProcess: true` |
296
- | `currentProcessColor` | `string` | `'#4E8CF7'` | Màu nền khi bước đang được xử lý | `currentProcessColor: '#3B82F6'` |
297
- | `label` | `string` | `undefined` | Text label hiển thị theo `positionLabel` | `label: 'Đặt hàng'` |
298
- | `classLabel` | `string` | `''` | Class CSS bổ sung cho thẻ label | `classLabel: 'text-green-600'` |
299
- | `classIncludeStep` | `string` | `''` | Class CSS bổ sung cho thanh bước (step bar) | `classIncludeStep: 'shadow-sm'` |
300
- | `classIncludeContainer` | `string` | `''` | Class CSS bổ sung cho container bao bọc bước (step + label) | `classIncludeContainer: 'px-[4px]'` |
238
+ | Property | Type | Default | Mô tả | Ví dụ |
239
+ | ----------------------- | --------- | ----------- | ----------------------------------------------------------- | ----------------------------------- |
240
+ | `processCompleted` | `boolean` | `false` | Bước đã hoàn thành — áp dụng `processCompletedColor` | `processCompleted: true` |
241
+ | `processCompletedColor` | `string` | `'#33DA8A'` | Màu nền khi bước đã hoàn thành | `processCompletedColor: '#10B981'` |
242
+ | `isCurrentProcess` | `boolean` | `false` | Bước đang được xử lý — áp dụng `currentProcessColor` | `isCurrentProcess: true` |
243
+ | `currentProcessColor` | `string` | `'#4E8CF7'` | Màu nền khi bước đang được xử lý | `currentProcessColor: '#3B82F6'` |
244
+ | `label` | `string` | `undefined` | Text label hiển thị theo `positionLabel` | `label: 'Đặt hàng'` |
245
+ | `classLabel` | `string` | `''` | Class CSS bổ sung cho thẻ label | `classLabel: 'text-green-600'` |
246
+ | `classIncludeStep` | `string` | `''` | Class CSS bổ sung cho thanh bước (step bar) | `classIncludeStep: 'shadow-sm'` |
247
+ | `classIncludeContainer` | `string` | `''` | Class CSS bổ sung cho container bao bọc bước (step + label) | `classIncludeContainer: 'px-[4px]'` |
301
248
 
302
249
  ## Thứ tự ưu tiên màu sắc
303
250
 
@@ -318,11 +265,3 @@ Với mỗi bước, màu nền được xác định theo thứ tự ưu tiên
318
265
  ⚠️ **Advanced Mode — Color Priority**: Màu `processCompletedColor` ghi đè `currentProcessColor`. Nếu một bước vừa có `processCompleted: true` vừa có `isCurrentProcess: true`, màu hoàn thành sẽ được hiển thị.
319
266
 
320
267
  ⚠️ **Global Default Token**: Dùng `PROCESS_BAR_STEPS_CONFIG_DEFAULT_TOKEN_INJECT` (từ `@libs-ui/utils`) để thiết lập giá trị mặc định cho `widthStep`, `heightStep`, `backgroundColorStep`, `radiusStep` ở cấp app — tránh lặp lại config trong từng component.
321
-
322
- ## Demo
323
-
324
- ```bash
325
- npx nx serve core-ui
326
- ```
327
-
328
- Truy cập: http://localhost:4500/components/process-bar/steps
package/package.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "name": "@libs-ui/components-process-bar-steps",
3
- "version": "0.2.357-1",
3
+ "version": "0.2.357-10",
4
4
  "peerDependencies": {
5
5
  "@angular/core": ">=18.0.0",
6
- "@libs-ui/utils": "0.2.357-1"
6
+ "@libs-ui/utils": "0.2.357-10"
7
7
  },
8
8
  "sideEffects": false,
9
9
  "module": "fesm2022/libs-ui-components-process-bar-steps.mjs",