@libs-ui/components-breadcrumb 0.2.355-0 → 0.2.355-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/package.json +4 -4
  2. package/README.md +0 -235
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@libs-ui/components-breadcrumb",
3
- "version": "0.2.355-0",
3
+ "version": "0.2.355-10",
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.355-0",
9
- "@libs-ui/components-popover": "0.2.355-0",
10
- "@libs-ui/components-dropdown": "0.2.355-0"
8
+ "@libs-ui/components-list": "0.2.355-10",
9
+ "@libs-ui/components-popover": "0.2.355-10",
10
+ "@libs-ui/components-dropdown": "0.2.355-10"
11
11
  },
12
12
  "sideEffects": false,
13
13
  "module": "fesm2022/libs-ui-components-breadcrumb.mjs",
package/README.md DELETED
@@ -1,235 +0,0 @@
1
- # Breadcrumb
2
-
3
- ## Giới thiệu
4
-
5
- `@libs-ui/components-breadcrumb` là một component Angular giúp hiển thị đường dẫn phân cấp (breadcrumb) hoặc tiến trình theo các bước, với khả năng đánh dấu bước đã hoàn thành, bước đang chọn, và bước vô hiệu hóa.
6
-
7
- ## Tính năng
8
-
9
- - Hiển thị danh sách các bước với số và tiêu đề
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)
15
-
16
- ## Cài đặt
17
-
18
- ### Yêu cầu
19
-
20
- - Angular 18.0.0 trở lên
21
- - Tailwind CSS 3.3.0 trở lên (nếu sử dụng Tailwind)
22
-
23
- ### Hướng dẫn cài đặt
24
-
25
- ```bash
26
- npm install @libs-ui/components-breadcrumb
27
- ```
28
-
29
- hoặc
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
38
-
39
- ```typescript
40
- import { Component } from '@angular/core';
41
- import { LibsUiComponentsBreadcrumbComponent } from '@libs-ui/components-breadcrumb';
42
-
43
- @Component({
44
- selector: 'app-example',
45
- standalone: true,
46
- imports: [LibsUiComponentsBreadcrumbComponent],
47
- template: `
48
- <libs_ui-components-breadcrumb
49
- [steps]="steps"
50
- [completedIndex]="[1]"
51
- [mode]="'center'"></libs_ui-components-breadcrumb>
52
- `,
53
- })
54
- export class ExampleComponent {
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
- }
61
- ```
62
-
63
- #### Sử dụng với file HTML riêng biệt
64
-
65
- ```typescript
66
- @Component({
67
- selector: 'app-example',
68
- standalone: true,
69
- imports: [LibsUiComponentsBreadcrumbComponent],
70
- templateUrl: './example.component.html',
71
- })
72
- export class ExampleComponent {}
73
- ```
74
-
75
- ```html
76
- <libs_ui-components-breadcrumb
77
- [steps]="steps"
78
- [completedIndex]="[1]"
79
- mode="left"></libs_ui-components-breadcrumb>
80
- ```
81
-
82
- ## Công nghệ sử dụng
83
-
84
- - **Angular 18**: Sử dụng standalone components và Signals
85
- - **Tailwind CSS**: Tùy chọn cho styling
86
-
87
- ## API Reference
88
-
89
- ### Inputs
90
-
91
- | Tên | Kiểu dữ liệu | Mặc định | Mô tả |
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` |
99
-
100
- ### Outputs
101
-
102
- | Tên | Kiểu dữ liệu | Mô tả |
103
- | --------------- | ---------------------------------- | ------------------------------------------------- |
104
- | outStepSelected | `(ITabBreadCrumbSelected) => void` | Phát ra sự kiện khi chọn bước, trả về `{ index }` |
105
-
106
- ### Interfaces
107
-
108
- #### `ITabBreadCrumb`
109
-
110
- ```typescript
111
- export interface ITabBreadCrumb {
112
- number: number;
113
- title: string;
114
- valid?: boolean;
115
- config?: IPopover;
116
- disable?: boolean;
117
- classInclude?: string;
118
- }
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
-
131
- **TypeScript (breadcrumb-basic.component.ts):**
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
- ];
151
- }
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
-
172
- ### Breadcrumb với bước hoàn thành và vô hiệu hóa
173
-
174
- **TypeScript (breadcrumb-status.component.ts):**
175
-
176
- ```typescript
177
- import { Component } from '@angular/core';
178
- import { LibsUiComponentsBreadcrumbComponent } from '@libs-ui/components-breadcrumb';
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];
194
- }
195
- ```
196
-
197
- **HTML (breadcrumb-status.component.html):**
198
-
199
- ```html
200
- <libs_ui-components-breadcrumb
201
- [steps]="steps"
202
- [completedIndex]="completedIndex"></libs_ui-components-breadcrumb>
203
- ```
204
-
205
- +### Breadcrumb Arrow Style (Multi-Step)
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
- +```