@libs-ui/components-process-bar-steps 0.2.355-13 → 0.2.355-15
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 +137 -2
- package/esm2022/index.mjs +2 -1
- package/index.d.ts +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,3 +1,138 @@
|
|
|
1
|
-
# process-bar-steps
|
|
1
|
+
# @libs-ui/components-process-bar-steps
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> Component hiển thị quy trình theo từng bước (stepper), hỗ trợ custom label và state.
|
|
4
|
+
|
|
5
|
+
## Giới thiệu
|
|
6
|
+
|
|
7
|
+
`LibsUiComponentsProcessBarStepsComponent` là một standalone Angular component dùng để hiển thị các thanh tiến trình dạng bước (stepper). Nó cực kỳ hữu ích cho việc hiển thị trạng thái đơn hàng, quy trình wizard, hoặc lộ trình. Component hỗ trợ 2 chế độ cấu hình: Đơn giản (Simple) và Nâng cao (Advanced).
|
|
8
|
+
|
|
9
|
+
### Tính năng
|
|
10
|
+
|
|
11
|
+
- ✅ **Simple Mode**: Cấu hình nhanh số lượng bước và bước hiện tại.
|
|
12
|
+
- ✅ **Advanced Mode**: Tùy chỉnh chi tiết từng bước (Label, Color, State) sử dụng Signals.
|
|
13
|
+
- ✅ **Customizable Layout**: Hỗ trợ vị trí Label (top, bottom, inner) và Alignment (start, center, end).
|
|
14
|
+
- ✅ **Reactive**: Tích hợp chặt chẽ với Angular Signals.
|
|
15
|
+
- ✅ **OnPush Change Detection**: Tối ưu hiệu năng.
|
|
16
|
+
|
|
17
|
+
## Khi nào sử dụng
|
|
18
|
+
|
|
19
|
+
- Hiển thị trạng thái đơn hàng (Order Tracking).
|
|
20
|
+
- Hiển thị các bước trong quy trình đăng ký/wizard.
|
|
21
|
+
- Hiển thị lộ trình học tập hoặc milestones.
|
|
22
|
+
|
|
23
|
+
## Cài đặt
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
# npm
|
|
27
|
+
npm install @libs-ui/components-process-bar-steps
|
|
28
|
+
|
|
29
|
+
# yarn
|
|
30
|
+
yarn add @libs-ui/components-process-bar-steps
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Import
|
|
34
|
+
|
|
35
|
+
```typescript
|
|
36
|
+
import { LibsUiComponentsProcessBarStepsComponent } from '@libs-ui/components-process-bar-steps';
|
|
37
|
+
|
|
38
|
+
@Component({
|
|
39
|
+
standalone: true,
|
|
40
|
+
imports: [LibsUiComponentsProcessBarStepsComponent],
|
|
41
|
+
// ...
|
|
42
|
+
})
|
|
43
|
+
export class YourComponent {}
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## Ví dụ
|
|
47
|
+
|
|
48
|
+
### Simple Config
|
|
49
|
+
|
|
50
|
+
```html
|
|
51
|
+
<libs_ui-components-process_bar-steps [config]="config" />
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
```typescript
|
|
55
|
+
readonly config = signal<IProcessBarStepConfigInterface>({
|
|
56
|
+
simpleConfig: signal({
|
|
57
|
+
totalStep: 4,
|
|
58
|
+
currentStep: 2,
|
|
59
|
+
currentStepColor: '#3B82F6',
|
|
60
|
+
stepCompletedColor: '#10B981'
|
|
61
|
+
}),
|
|
62
|
+
widthStep: '60px'
|
|
63
|
+
});
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
### Advanced Config
|
|
67
|
+
|
|
68
|
+
```typescript
|
|
69
|
+
const step1 = signal({ label: 'Step 1', processCompleted: true });
|
|
70
|
+
const step2 = signal({ label: 'Step 2', isCurrentProcess: true });
|
|
71
|
+
|
|
72
|
+
readonly config = signal<IProcessBarStepConfigInterface>({
|
|
73
|
+
advancedConfig: signal([step1, step2]),
|
|
74
|
+
positionLabel: 'bottom'
|
|
75
|
+
});
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
## API
|
|
79
|
+
|
|
80
|
+
### libs_ui-components-process_bar-steps
|
|
81
|
+
|
|
82
|
+
#### Inputs
|
|
83
|
+
|
|
84
|
+
| Property | Type | Default | Description |
|
|
85
|
+
| ---------- | --------------------------------------------- | ---------- | ------------------------------------------- |
|
|
86
|
+
| `[config]` | `InputSignal<IProcessBarStepConfigInterface>` | `Required` | Object configuration chứa toàn bộ settings. |
|
|
87
|
+
|
|
88
|
+
#### IProcessBarStepConfigInterface
|
|
89
|
+
|
|
90
|
+
| Property | Type | Description |
|
|
91
|
+
| --------------------- | ------------------------------------------ | ------------------------------------------ |
|
|
92
|
+
| `simpleConfig` | `WritableSignal<SimpleConfig>` | Cấu hình đơn giản. |
|
|
93
|
+
| `advancedConfig` | `WritableSignal<Signal<AdvancedConfig>[]>` | Cấu hình nâng cao (array các signals). |
|
|
94
|
+
| `positionLabel` | `'top' \| 'bottom' \| 'inner'` | Vị trí hiển thị label. |
|
|
95
|
+
| `justifyLabel` | `'start' \| 'center' \| 'end'` | Căn lề cho label và nội dung. |
|
|
96
|
+
| `widthStep` | `string` | Chiều rộng mỗi bước (vd: "80px"). |
|
|
97
|
+
| `heightStep` | `string` | Chiều cao mỗi bước. |
|
|
98
|
+
| `backgroundColorStep` | `string` | Màu nền mặc định cho các bước chưa active. |
|
|
99
|
+
| `radiusStep` | `number` | Bo góc (px). |
|
|
100
|
+
| `classInclude` | `string` | Custom class cho container. |
|
|
101
|
+
|
|
102
|
+
#### IProcessBarStepSimpleConfigInterface
|
|
103
|
+
|
|
104
|
+
| Property | Type | Description |
|
|
105
|
+
| -------------------- | -------- | ------------------------------------------------ |
|
|
106
|
+
| `totalStep` | `number` | Tổng số bước. |
|
|
107
|
+
| `currentStep` | `number` | Bước hiện tại (1-based index). |
|
|
108
|
+
| `completedStep` | `number` | Các bước đã hoàn thành (mặc định = currentStep). |
|
|
109
|
+
| `currentStepColor` | `string` | Màu của bước hiện tại. |
|
|
110
|
+
| `stepCompletedColor` | `string` | Màu của các bước đã hoàn thành. |
|
|
111
|
+
|
|
112
|
+
#### IProcessBarStepAdvancedConfigInterface
|
|
113
|
+
|
|
114
|
+
| Property | Type | Description |
|
|
115
|
+
| ----------------------- | --------- | --------------------------- |
|
|
116
|
+
| `label` | `string` | Label hiển thị. |
|
|
117
|
+
| `processCompleted` | `boolean` | Trạng thái đã hoàn thành. |
|
|
118
|
+
| `processCompletedColor` | `string` | Màu khi hoàn thành. |
|
|
119
|
+
| `isCurrentProcess` | `boolean` | Trạng thái đang thực hiện. |
|
|
120
|
+
| `currentProcessColor` | `string` | Màu khi đang thực hiện. |
|
|
121
|
+
| `classIncludeStep` | `string` | Custom class cho từng bước. |
|
|
122
|
+
| `classLabel` | `string` | Custom class cho label. |
|
|
123
|
+
|
|
124
|
+
## Công nghệ
|
|
125
|
+
|
|
126
|
+
| Technology | Version | Purpose |
|
|
127
|
+
| --------------- | ------- | ---------------- |
|
|
128
|
+
| Angular | 18+ | Framework |
|
|
129
|
+
| Angular Signals | - | State management |
|
|
130
|
+
| OnPush | - | Change Detection |
|
|
131
|
+
|
|
132
|
+
## Demo
|
|
133
|
+
|
|
134
|
+
```bash
|
|
135
|
+
npx nx serve core-ui
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
Truy cập path: `/components/process-bar/steps`
|
package/esm2022/index.mjs
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
|
+
export * from './process-bar-step.interface';
|
|
1
2
|
export * from './process-bar-steps.component';
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
3
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvcHJvY2Vzcy1iYXIvc3RlcHMvc3JjL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsOEJBQThCLENBQUM7QUFDN0MsY0FBYywrQkFBK0IsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vcHJvY2Vzcy1iYXItc3RlcC5pbnRlcmZhY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9wcm9jZXNzLWJhci1zdGVwcy5jb21wb25lbnQnO1xuIl19
|
package/index.d.ts
CHANGED