@libs-ui/components-breadcrumb 0.2.355-9 → 0.2.356-0
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 +73 -180
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,235 +1,128 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @libs-ui/components-breadcrumb
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> Component Breadcrumb để hiển thị tiến trình của một quy trình gồm nhiều bước.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## Giới thiệu
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
`LibsUiComponentsBreadcrumbComponent` là một standalone Angular component được thiết kế để hiển thị các bước trong một flowchart hoặc tiến trình làm việc. Mỗi bước có thể có trạng thái hoàn thành, đang chọn hoặc vô hiệu hóa.
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
- Hỗ trợ trạng thái hoàn thành (completed), chọn (selected), và vô hiệu hóa (disabled)
|
|
11
|
-
- Căn chỉnh linh hoạt: `center` | `left` | `right`
|
|
12
|
-
- Tùy chỉnh CSS class cho mỗi bước
|
|
13
|
-
- Phát ra sự kiện khi người dùng chọn bước
|
|
14
|
-
- Hỗ trợ nền trắng (backgroundWhite)
|
|
9
|
+
### Tính năng
|
|
15
10
|
|
|
16
|
-
|
|
11
|
+
- ✅ Hỗ trợ nhiều chế độ hiển thị (center, left, right).
|
|
12
|
+
- ✅ Tùy chỉnh chiều rộng khoảng cách giữa các bước.
|
|
13
|
+
- ✅ Tích hợp đa ngôn ngữ cho tiêu đề các bước.
|
|
14
|
+
- ✅ Điều khiển linh hoạt qua `FunctionsControl` (set selected, set completed, disable steps...).
|
|
15
|
+
- ✅ Sử dụng Angular Signals cho tính phản hồi cao.
|
|
16
|
+
- ✅ OnPush Change Detection tối ưu hiệu năng.
|
|
17
17
|
|
|
18
|
-
|
|
18
|
+
## Khi nào sử dụng
|
|
19
19
|
|
|
20
|
-
-
|
|
21
|
-
-
|
|
20
|
+
- Khi người dùng cần biết họ đang ở đâu trong một quy trình gồm nhiều bước.
|
|
21
|
+
- Khi cần hướng dẫn người dùng hoàn thành các bước theo một trình tự nhất định.
|
|
22
|
+
- Phù hợp cho các form đăng ký nhiều bước, quy trình checkout, hoặc thiết lập thông số.
|
|
22
23
|
|
|
23
|
-
|
|
24
|
+
## Cài đặt
|
|
24
25
|
|
|
25
26
|
```bash
|
|
26
27
|
npm install @libs-ui/components-breadcrumb
|
|
27
28
|
```
|
|
28
29
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
```bash
|
|
32
|
-
yarn add @libs-ui/components-breadcrumb
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
## Sử dụng
|
|
36
|
-
|
|
37
|
-
### Import và sử dụng ngay trong template
|
|
30
|
+
## Import
|
|
38
31
|
|
|
39
32
|
```typescript
|
|
40
|
-
import { Component } from '@angular/core';
|
|
41
33
|
import { LibsUiComponentsBreadcrumbComponent } from '@libs-ui/components-breadcrumb';
|
|
42
34
|
|
|
43
35
|
@Component({
|
|
44
|
-
selector: 'app-example',
|
|
45
36
|
standalone: true,
|
|
46
37
|
imports: [LibsUiComponentsBreadcrumbComponent],
|
|
47
|
-
|
|
48
|
-
<libs_ui-components-breadcrumb
|
|
49
|
-
[steps]="steps"
|
|
50
|
-
[completedIndex]="[1]"
|
|
51
|
-
[mode]="'center'"></libs_ui-components-breadcrumb>
|
|
52
|
-
`,
|
|
38
|
+
// ...
|
|
53
39
|
})
|
|
54
|
-
export class
|
|
55
|
-
steps = [
|
|
56
|
-
{ number: 1, title: 'Bước 1' },
|
|
57
|
-
{ number: 2, title: 'Bước 2' },
|
|
58
|
-
{ number: 3, title: 'Bước 3' },
|
|
59
|
-
];
|
|
60
|
-
}
|
|
40
|
+
export class YourComponent {}
|
|
61
41
|
```
|
|
62
42
|
|
|
63
|
-
|
|
43
|
+
## Ví dụ
|
|
64
44
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
imports: [LibsUiComponentsBreadcrumbComponent],
|
|
70
|
-
templateUrl: './example.component.html',
|
|
71
|
-
})
|
|
72
|
-
export class ExampleComponent {}
|
|
45
|
+
### Basic
|
|
46
|
+
|
|
47
|
+
```html
|
|
48
|
+
<libs_ui-components-breadcrumb [steps]="breadcrumbSteps" />
|
|
73
49
|
```
|
|
74
50
|
|
|
51
|
+
### Với External Controls
|
|
52
|
+
|
|
75
53
|
```html
|
|
76
54
|
<libs_ui-components-breadcrumb
|
|
77
|
-
[steps]="
|
|
78
|
-
|
|
79
|
-
mode="left"></libs_ui-components-breadcrumb>
|
|
55
|
+
[steps]="breadcrumbSteps"
|
|
56
|
+
(outFunctionControl)="onFunctionsControl($event)" />
|
|
80
57
|
```
|
|
81
58
|
|
|
82
|
-
##
|
|
59
|
+
## API
|
|
83
60
|
|
|
84
|
-
-
|
|
85
|
-
- **Tailwind CSS**: Tùy chọn cho styling
|
|
61
|
+
### libs_ui-components-breadcrumb
|
|
86
62
|
|
|
87
|
-
|
|
63
|
+
#### Inputs
|
|
88
64
|
|
|
89
|
-
|
|
65
|
+
| Property | Type | Default | Description |
|
|
66
|
+
| -------------------- | ------------------------------- | ----------- | --------------------------------------------------- |
|
|
67
|
+
| `[width]` | `number` | `24` | Chiều rộng của dải ngăn cách giữa các bước (pixel). |
|
|
68
|
+
| `[mode]` | `'center' \| 'left' \| 'right'` | `'center'` | Chế độ hiển thị của breadcrumb. |
|
|
69
|
+
| `[(steps)]` | `Array<ITabBreadCrumb>` | `undefined` | Danh sách các bước breadcrumb. |
|
|
70
|
+
| `[classInclude]` | `string` | `undefined` | Class CSS bổ sung cho container. |
|
|
71
|
+
| `[(completedIndex)]` | `Array<number>` | `[]` | Danh sách index các bước đã hoàn thành. |
|
|
72
|
+
| `[backgroundWhite]` | `boolean` | `undefined` | Có sử dụng nền trắng cho container không. |
|
|
90
73
|
|
|
91
|
-
|
|
92
|
-
| --------------- | ----------------------- | ----------- | ----------------------------------------------- |
|
|
93
|
-
| width | `number` | `24` | Chiều rộng mỗi bước (pixel) |
|
|
94
|
-
| mode | `TYPE_MODE_BREADCRUMB` | `'center'` | Căn chỉnh breadcrumb: `center` `left` `right` |
|
|
95
|
-
| steps | `Array<ITabBreadCrumb>` | `[]` | Danh sách các bước với số và tiêu đề |
|
|
96
|
-
| classInclude | `string` | `undefined` | CSS class bổ sung cho mỗi bước |
|
|
97
|
-
| completedIndex | `Array<number>` | `[]` | Các index bước đã hoàn thành |
|
|
98
|
-
| backgroundWhite | `boolean` | `false` | Bật nền trắng khi `true` |
|
|
74
|
+
#### Outputs
|
|
99
75
|
|
|
100
|
-
|
|
76
|
+
| Property | Type | Description |
|
|
77
|
+
| ---------------------- | --------------------------------- | ---------------------------------------------- |
|
|
78
|
+
| `(outStepSelected)` | `ITabBreadCrumbSelected` | Emit khi người dùng click vào một bước. |
|
|
79
|
+
| `(outFunctionControl)` | `IBreadCrumbFunctionControlEvent` | Emit object chứa các hàm điều khiển component. |
|
|
101
80
|
|
|
102
|
-
|
|
103
|
-
| --------------- | ---------------------------------- | ------------------------------------------------- |
|
|
104
|
-
| outStepSelected | `(ITabBreadCrumbSelected) => void` | Phát ra sự kiện khi chọn bước, trả về `{ index }` |
|
|
81
|
+
#### FunctionsControl Methods
|
|
105
82
|
|
|
106
|
-
|
|
83
|
+
| Method | Parameters | Description |
|
|
84
|
+
| -------------------- | ----------------------------------- | ---------------------------------------------- |
|
|
85
|
+
| `setSelectedStep` | `index: number` | Thiết lập bước đang được chọn. |
|
|
86
|
+
| `setCompletedStep` | `complete: boolean, index: number` | Đánh dấu một bước là đã hoàn thành hoặc chưa. |
|
|
87
|
+
| `setStepDisable` | `steps: Array<number>` | Thiết lập danh sách các bước bị vô hiệu hóa. |
|
|
88
|
+
| `getCompleteIndex` | - | Trả về danh sách index các bước đã hoàn thành. |
|
|
89
|
+
| `getSelectedIndex` | - | Trả về index bước hiện tại đang được chọn. |
|
|
90
|
+
| `resetCompleteIndex` | `resetAll: boolean, index?: number` | Reset trạng thái hoàn thành của các bước. |
|
|
107
91
|
|
|
108
|
-
|
|
92
|
+
## Types & Interfaces
|
|
109
93
|
|
|
110
94
|
```typescript
|
|
111
95
|
export interface ITabBreadCrumb {
|
|
112
96
|
number: number;
|
|
113
97
|
title: string;
|
|
114
98
|
valid?: boolean;
|
|
115
|
-
config?: IPopover;
|
|
116
99
|
disable?: boolean;
|
|
117
100
|
classInclude?: string;
|
|
118
101
|
}
|
|
119
|
-
```
|
|
120
|
-
|
|
121
|
-
#### `TYPE_MODE_BREADCRUMB`
|
|
122
|
-
|
|
123
|
-
```typescript
|
|
124
|
-
export type TYPE_MODE_BREADCRUMB = 'center' | 'left' | 'right';
|
|
125
|
-
```
|
|
126
|
-
|
|
127
|
-
## Ví dụ
|
|
128
|
-
|
|
129
|
-
### Breadcrumb cơ bản
|
|
130
102
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
```typescript
|
|
134
|
-
import { Component } from '@angular/core';
|
|
135
|
-
import { LibsUiComponentsBreadcrumbComponent } from '@libs-ui/components-breadcrumb';
|
|
136
|
-
|
|
137
|
-
@Component({
|
|
138
|
-
selector: 'app-breadcrumb-basic',
|
|
139
|
-
standalone: true,
|
|
140
|
-
imports: [LibsUiComponentsBreadcrumbComponent],
|
|
141
|
-
template: `
|
|
142
|
-
<libs_ui-components-breadcrumb [steps]="steps"></libs_ui-components-breadcrumb>
|
|
143
|
-
`,
|
|
144
|
-
})
|
|
145
|
-
export class BreadcrumbBasicComponent {
|
|
146
|
-
steps = [
|
|
147
|
-
{ number: 1, title: 'Bước 1' },
|
|
148
|
-
{ number: 2, title: 'Bước 2' },
|
|
149
|
-
{ number: 3, title: 'Bước 3' },
|
|
150
|
-
];
|
|
103
|
+
export interface ITabBreadCrumbSelected {
|
|
104
|
+
index: number;
|
|
151
105
|
}
|
|
152
|
-
```
|
|
153
|
-
|
|
154
|
-
### Breadcrumb với các chế độ căn chỉnh
|
|
155
|
-
|
|
156
|
-
**HTML (breadcrumb-mode.component.html):**
|
|
157
|
-
|
|
158
|
-
```html
|
|
159
|
-
<div class="flex gap-4">
|
|
160
|
-
<libs_ui-components-breadcrumb
|
|
161
|
-
[steps]="steps"
|
|
162
|
-
mode="left"></libs_ui-components-breadcrumb>
|
|
163
|
-
<libs_ui-components-breadcrumb
|
|
164
|
-
[steps]="steps"
|
|
165
|
-
mode="center"></libs_ui-components-breadcrumb>
|
|
166
|
-
<libs_ui-components-breadcrumb
|
|
167
|
-
[steps]="steps"
|
|
168
|
-
mode="right"></libs_ui-components-breadcrumb>
|
|
169
|
-
</div>
|
|
170
|
-
```
|
|
171
106
|
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
@Component({
|
|
181
|
-
selector: 'app-breadcrumb-status',
|
|
182
|
-
standalone: true,
|
|
183
|
-
imports: [LibsUiComponentsBreadcrumbComponent],
|
|
184
|
-
templateUrl: './breadcrumb-status.component.html',
|
|
185
|
-
})
|
|
186
|
-
export class BreadcrumbStatusComponent {
|
|
187
|
-
steps = [
|
|
188
|
-
{ number: 1, title: 'Bước 1', valid: true },
|
|
189
|
-
{ number: 2, title: 'Bước 2', valid: false },
|
|
190
|
-
{ number: 3, title: 'Bước 3', disable: true },
|
|
191
|
-
{ number: 4, title: 'Bước 4' },
|
|
192
|
-
];
|
|
193
|
-
completedIndex = [0];
|
|
107
|
+
export interface IBreadCrumbFunctionControlEvent {
|
|
108
|
+
setSelectedStep: (index: number) => Promise<void>;
|
|
109
|
+
setCompletedStep: (complete: boolean, index: number) => Promise<void>;
|
|
110
|
+
setStepDisable: (steps: Array<number>) => Promise<void>;
|
|
111
|
+
getCompleteIndex: () => Promise<Array<number>>;
|
|
112
|
+
getSelectedIndex: () => Promise<number>;
|
|
113
|
+
resetCompleteIndex: (resetAll: boolean, index?: number) => Promise<void>;
|
|
194
114
|
}
|
|
195
115
|
```
|
|
196
116
|
|
|
197
|
-
|
|
117
|
+
## Công nghệ
|
|
198
118
|
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
119
|
+
| Technology | Version | Purpose |
|
|
120
|
+
| --------------- | ------- | ---------------- |
|
|
121
|
+
| Angular | 18+ | Framework |
|
|
122
|
+
| Angular Signals | - | State management |
|
|
123
|
+
| TailwindCSS | 3.x | Styling |
|
|
124
|
+
| OnPush | - | Change Detection |
|
|
125
|
+
|
|
126
|
+
## License
|
|
204
127
|
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
- +**HTML (breadcrumb-arrow.component.html):**
|
|
208
|
-
+```html
|
|
209
|
-
+<libs_ui-components-breadcrumb-multi_step
|
|
210
|
-
- [stepsMulti]="arrowSteps"
|
|
211
|
-
- (outMultiStepSelect)="onArrowStepSelected($event)">
|
|
212
|
-
+</libs_ui-components-breadcrumb-multi_step>
|
|
213
|
-
+```
|
|
214
|
-
- +**TypeScript (breadcrumb-arrow.component.ts):**
|
|
215
|
-
+```typescript
|
|
216
|
-
+import { Component } from '@angular/core';
|
|
217
|
-
+import { LibsUiComponentsBreadcrumbMultiStepComponent } from '@libs-ui/components-breadcrumb';
|
|
218
|
-
+import { ITabBreadCrumbMultiStep, TYPE_MULTI_STEP } from '@libs-ui/components-breadcrumb';
|
|
219
|
-
- +@Component({
|
|
220
|
-
- selector: 'app-breadcrumb-arrow',
|
|
221
|
-
- standalone: true,
|
|
222
|
-
- imports: [LibsUiComponentsBreadcrumbMultiStepComponent],
|
|
223
|
-
- templateUrl: './breadcrumb-arrow.component.html'
|
|
224
|
-
+})
|
|
225
|
-
+export class BreadcrumbArrowComponent {
|
|
226
|
-
- arrowSteps: ITabBreadCrumbMultiStep[] = [
|
|
227
|
-
- { number: 1, title: 'Bước 1', status: 'completed' as TYPE_MULTI_STEP, type: 'text' },
|
|
228
|
-
- { number: 2, title: 'Bước 2', status: 'selected' as TYPE_MULTI_STEP, type: 'text' },
|
|
229
|
-
- { number: 3, title: 'Bước 3', status: 'normal' as TYPE_MULTI_STEP, type: 'text' }
|
|
230
|
-
- ];
|
|
231
|
-
- onArrowStepSelected(event: any) {
|
|
232
|
-
- console.log('Arrow step selected:', event);
|
|
233
|
-
- }
|
|
234
|
-
+}
|
|
235
|
-
+```
|
|
128
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-breadcrumb",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.356-0",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/common": ">=18.0.0",
|
|
6
6
|
"@angular/core": ">=18.0.0",
|
|
7
7
|
"@ngx-translate/core": "^15.0.0",
|
|
8
|
-
"@libs-ui/components-list": "0.2.
|
|
9
|
-
"@libs-ui/components-popover": "0.2.
|
|
10
|
-
"@libs-ui/components-dropdown": "0.2.
|
|
8
|
+
"@libs-ui/components-list": "0.2.356-0",
|
|
9
|
+
"@libs-ui/components-popover": "0.2.356-0",
|
|
10
|
+
"@libs-ui/components-dropdown": "0.2.356-0"
|
|
11
11
|
},
|
|
12
12
|
"sideEffects": false,
|
|
13
13
|
"module": "fesm2022/libs-ui-components-breadcrumb.mjs",
|