@libs-ui/components-tags 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 +152 -2
- package/package.json +14 -14
package/README.md
CHANGED
|
@@ -1,3 +1,153 @@
|
|
|
1
|
-
# tags
|
|
1
|
+
# @libs-ui/components-tags
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> Library Angular Component quản lý và hiển thị danh sách các thẻ (Tags/Labels) với hỗ trợ tìm kiếm, lựa chọn từ danh sách, và tùy chỉnh giao diện mạnh mẽ.
|
|
4
|
+
|
|
5
|
+
## Giới thiệu
|
|
6
|
+
|
|
7
|
+
`LibsUiComponentsTagsComponent` là một component linh hoạt cho phép người dùng chọn một hoặc nhiều mục từ một danh sách hoặc nhập trực tiếp. Nó hỗ trợ hiển thị avatar, các trạng thái validation, tìm kiếm online/offline, và tích hợp sâu với `libs_ui-components-list` và `libs_ui-components-popover`.
|
|
8
|
+
|
|
9
|
+
### Tính năng
|
|
10
|
+
|
|
11
|
+
- ✅ **Multiple Selection**: Chọn nhiều mục cùng lúc.
|
|
12
|
+
- ✅ **Single Selection**: Chế độ chọn một mục duy nhất (UI giống dropdown).
|
|
13
|
+
- ✅ **Search Online/Offline**: Tìm kiếm linh hoạt từ local data hoặc qua API.
|
|
14
|
+
- ✅ **Avatar Support**: Tự động hiển thị avatar hoặc text avatar cho mỗi tag.
|
|
15
|
+
- ✅ **Enter to Add**: Cho phép tạo mới tag bằng cách nhấn Enter.
|
|
16
|
+
- ✅ **Validation**: Hỗ trợ required, max items, và pattern validation.
|
|
17
|
+
- ✅ **Custom Styling**: Tùy chỉnh màu sắc, border cho từng tag qua config.
|
|
18
|
+
- ✅ **OnPush Change Detection**: Tối ưu hiệu năng.
|
|
19
|
+
|
|
20
|
+
## Khi nào sử dụng
|
|
21
|
+
|
|
22
|
+
- Trong các form cần chọn nhiều nhãn (labels), người nhận (recipients), hoặc phân loại (categories).
|
|
23
|
+
- Khi cần một bộ chọn (selector) có khả năng tìm kiếm mạnh mẽ và hiển thị thông tin phong phú (ảnh, tên).
|
|
24
|
+
- Thay thế cho các input text thuần túy khi dữ liệu có cấu trúc.
|
|
25
|
+
|
|
26
|
+
## Cài đặt
|
|
27
|
+
|
|
28
|
+
```bash
|
|
29
|
+
# npm
|
|
30
|
+
npm install @libs-ui/components-tags
|
|
31
|
+
|
|
32
|
+
# yarn
|
|
33
|
+
yarn add @libs-ui/components-tags
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## Import
|
|
37
|
+
|
|
38
|
+
```typescript
|
|
39
|
+
import { LibsUiComponentsTagsComponent } from '@libs-ui/components-tags';
|
|
40
|
+
|
|
41
|
+
@Component({
|
|
42
|
+
standalone: true,
|
|
43
|
+
imports: [LibsUiComponentsTagsComponent],
|
|
44
|
+
// ...
|
|
45
|
+
})
|
|
46
|
+
export class YourComponent {}
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## Ví dụ
|
|
50
|
+
|
|
51
|
+
### Basic Usage
|
|
52
|
+
|
|
53
|
+
```html
|
|
54
|
+
<libs_ui-components-tags
|
|
55
|
+
[listConfig]="listConfig"
|
|
56
|
+
[(keysSelected)]="selectedKeys"
|
|
57
|
+
placeholder="Chọn nhãn..." />
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
```typescript
|
|
61
|
+
// Trong component class
|
|
62
|
+
readonly listConfig: IListConfigItem = {
|
|
63
|
+
// Config cho LibsUiComponentsListComponent
|
|
64
|
+
httpRequest: {
|
|
65
|
+
url: '/api/tags',
|
|
66
|
+
method: 'GET'
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
readonly selectedKeys = signal<string[]>([]);
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
## API
|
|
73
|
+
|
|
74
|
+
### libs_ui-components-tags
|
|
75
|
+
|
|
76
|
+
#### Inputs
|
|
77
|
+
|
|
78
|
+
| Property | Type | Default | Description |
|
|
79
|
+
| ------------------------------ | ----------------------- | ----------------------- | ----------------------------------------------------------- |
|
|
80
|
+
| `[config]` | `ITagsConfig` | `undefined` | Cấu hình chuyên sâu cho giao diện và logic của tags. |
|
|
81
|
+
| `[listConfig]` | `IListConfigItem` | `undefined` | Cấu hình cho danh sách gợi ý (Popover list). |
|
|
82
|
+
| `[placeholder]` | `string` | `'i18n_import_content'` | Nội dung placeholder khi chưa có tag nào hoặc đang focus. |
|
|
83
|
+
| `[singleSelected]` | `boolean` | `false` | Nếu `true`, chỉ cho phép chọn duy nhất một mục. |
|
|
84
|
+
| `[maxItemInput]` | `number` | `undefined` | Giới hạn số lượng tag tối đa có thể chọn. |
|
|
85
|
+
| `[defaultKeysSelected]` | `Array<any>` | `undefined` | Danh sách các keys mặc định được chọn ban đầu. |
|
|
86
|
+
| `[httpRequestDetailItemByIds]` | `IHttpRequestConfig` | `undefined` | API dùng để lấy thông tin chi tiết các items dựa trên keys. |
|
|
87
|
+
| `[disable]` | `boolean` | `false` | Vô hiệu hóa component. |
|
|
88
|
+
| `[readonly]` | `boolean` | `false` | Chế độ chỉ đọc, không thể xóa hoặc thêm tag. |
|
|
89
|
+
| `[zIndex]` | `number` | `1000` | z-index cho popover list. |
|
|
90
|
+
| `[fieldLabel]` | `string` | `'label'` | Tên trường hiển thị label cho tag. |
|
|
91
|
+
| `[defaultItemsSelected]` | `Array<any>` | `[]` | Danh sách các item object được chọn ban đầu. |
|
|
92
|
+
| `[isSearchOnline]` | `boolean` | `false` | Tìm kiếm online (qua API) hay offline (local). |
|
|
93
|
+
| `[maxItemInput]` | `number` | `undefined` | Giới hạn số lượng tag tối đa có thể chọn. |
|
|
94
|
+
| `[validMaxItemSelected]` | `IValidMaxItemSelected` | `undefined` | Cấu hình validation cho số lượng item tối đa. |
|
|
95
|
+
| `[validPattern]` | `IValidPattern[]` | `undefined` | Cấu hình validation theo pattern (regex). |
|
|
96
|
+
| `[fieldGetImage]` | `string` | `undefined` | Tên trường lấy URL ảnh avatar. |
|
|
97
|
+
| `[imageSize]` | `number` | `16` | Kích thước avatar (16, 24, 32, ...). |
|
|
98
|
+
| `[keysDisableItem]` | `Array<any>` | `[]` | Danh sách keys bị vô hiệu hóa (không thể xóa). |
|
|
99
|
+
| `[validRequired]` | `IMessageTranslate` | `undefined` | Message lỗi khi không có tag nào được chọn. |
|
|
100
|
+
| `[showListBellow]` | `boolean` | `false` | Luôn hiển thị danh sách gợi ý bên dưới. |
|
|
101
|
+
| `[enterAutoAddTagToList]` | `boolean` | `false` | Tự động thêm tag mới vào danh sách khi nhấn Enter. |
|
|
102
|
+
|
|
103
|
+
#### Outputs
|
|
104
|
+
|
|
105
|
+
| Property | Type | Description |
|
|
106
|
+
| ------------------------------- | --------------------------- | ---------------------------------------------------------- |
|
|
107
|
+
| `(outSelectMultiItem)` | `Array<any>` | Emit danh sách các đối tượng (items) đã được chọn. |
|
|
108
|
+
| `(outFunctionsControl)` | `ITagsFunctionControlEvent` | Cung cấp các methods để điều khiển component từ bên ngoài. |
|
|
109
|
+
| `(outValidEvent)` | `boolean` | Emit trạng thái validation (true nếu hợp lệ). |
|
|
110
|
+
| `(outClickButtonOther)` | `IButton` | Emit khi click vào nút khác trên danh sách. |
|
|
111
|
+
| `(outShowListEvent)` | `boolean` | Emit khi ẩn/hiện danh sách gợi ý. |
|
|
112
|
+
| `(outLoadingGetDetailSelected)` | `boolean` | Emit trạng thái loading khi lấy chi tiết item qua API. |
|
|
113
|
+
|
|
114
|
+
## Types & Interfaces
|
|
115
|
+
|
|
116
|
+
```typescript
|
|
117
|
+
export interface ITagsConfig {
|
|
118
|
+
getValue?: (item: unknown) => string; // Hàm custom lấy label
|
|
119
|
+
getStyles?: (item: unknown) => any; // Hàm custom style cho tag
|
|
120
|
+
getDisableItem?: (item: unknown) => boolean; // Disable click xóa cho tag cụ thể
|
|
121
|
+
ignoreInput?: boolean; // Ẩn input nhập text
|
|
122
|
+
uiLikeDropdown?: boolean; // Giao diện giống dropdown classic
|
|
123
|
+
directionList?: TYPE_POPOVER_DIRECTION; // Hướng hiển thị danh sách
|
|
124
|
+
// ... (see source for all options)
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
export interface ITagsFunctionControlEvent {
|
|
128
|
+
checkIsValid: () => Promise<boolean>;
|
|
129
|
+
clearItemSelected: (ignoreValid?: boolean) => Promise<void>;
|
|
130
|
+
focusInput: () => Promise<void>;
|
|
131
|
+
refreshListData: () => Promise<void>;
|
|
132
|
+
resetToDefaultDataSelected: (item?: Array<unknown>) => Promise<void>;
|
|
133
|
+
// ... (see source for all methods)
|
|
134
|
+
}
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
## Demo
|
|
138
|
+
|
|
139
|
+
```bash
|
|
140
|
+
npx nx serve core-ui
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
Truy cập: `http://localhost:4500/tags`
|
|
144
|
+
|
|
145
|
+
## Unit Tests
|
|
146
|
+
|
|
147
|
+
```bash
|
|
148
|
+
npx nx test components-tags
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
## License
|
|
152
|
+
|
|
153
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-tags",
|
|
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
|
-
"@libs-ui/components-avatar": "0.2.
|
|
8
|
-
"@libs-ui/components-popover": "0.2.
|
|
9
|
-
"@libs-ui/utils": "0.2.
|
|
10
|
-
"@libs-ui/components-buttons-button": "0.2.
|
|
11
|
-
"@libs-ui/components-dropdown": "0.2.
|
|
12
|
-
"@libs-ui/components-inputs-input": "0.2.
|
|
13
|
-
"@libs-ui/components-inputs-search": "0.2.
|
|
14
|
-
"@libs-ui/components-inputs-valid": "0.2.
|
|
15
|
-
"@libs-ui/components-label": "0.2.
|
|
16
|
-
"@libs-ui/components-list": "0.2.
|
|
17
|
-
"@libs-ui/interfaces-types": "0.2.
|
|
18
|
-
"@libs-ui/services-http-request": "0.2.
|
|
7
|
+
"@libs-ui/components-avatar": "0.2.356-0",
|
|
8
|
+
"@libs-ui/components-popover": "0.2.356-0",
|
|
9
|
+
"@libs-ui/utils": "0.2.356-0",
|
|
10
|
+
"@libs-ui/components-buttons-button": "0.2.356-0",
|
|
11
|
+
"@libs-ui/components-dropdown": "0.2.356-0",
|
|
12
|
+
"@libs-ui/components-inputs-input": "0.2.356-0",
|
|
13
|
+
"@libs-ui/components-inputs-search": "0.2.356-0",
|
|
14
|
+
"@libs-ui/components-inputs-valid": "0.2.356-0",
|
|
15
|
+
"@libs-ui/components-label": "0.2.356-0",
|
|
16
|
+
"@libs-ui/components-list": "0.2.356-0",
|
|
17
|
+
"@libs-ui/interfaces-types": "0.2.356-0",
|
|
18
|
+
"@libs-ui/services-http-request": "0.2.356-0",
|
|
19
19
|
"@ngx-translate/core": "^15.0.0",
|
|
20
20
|
"rxjs": "~7.8.0",
|
|
21
|
-
"@libs-ui/components-click-outside": "0.2.
|
|
21
|
+
"@libs-ui/components-click-outside": "0.2.356-0"
|
|
22
22
|
},
|
|
23
23
|
"sideEffects": false,
|
|
24
24
|
"module": "fesm2022/libs-ui-components-tags.mjs",
|