@libs-ui/components-list 0.2.355-14 → 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 +145 -2
- package/defines/list.define.d.ts +1 -1
- package/package.json +23 -23
package/README.md
CHANGED
|
@@ -1,3 +1,146 @@
|
|
|
1
|
-
# list
|
|
1
|
+
# @libs-ui/components-list
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> Component mạnh mẽ hỗ trợ hiển thị danh sách với nhiều định dạng: Text, Radio, Checkbox và Group/Tree.
|
|
4
|
+
|
|
5
|
+
## Giới thiệu
|
|
6
|
+
|
|
7
|
+
`LibsUiComponentsListComponent` là một standalone Angular component được thiết kế để xử lý các bài toán hiển thị danh sách phức tạp trong ứng dụng. Component này không chỉ hiển thị dữ liệu mà còn tích hợp sâu với các dịch vụ lấy dữ liệu (HTTP), tìm kiếm và quản lý trạng thái chọn item.
|
|
8
|
+
|
|
9
|
+
### Tính năng
|
|
10
|
+
|
|
11
|
+
- ✅ **Đa dạng Template**: Hỗ trợ 5 loại hiển thị: `text`, `radio`, `checkbox`, `tag`, `group`.
|
|
12
|
+
- ✅ **Cấu trúc Cây (Group/Tree)**: Hiển thị phân cấp không giới hạn level với logic quan hệ cha-con tinh tế.
|
|
13
|
+
- ✅ **Tìm kiếm Thông minh**: Hỗ trợ cả tìm kiếm Online (server-side) và Offline (client-side).
|
|
14
|
+
- ✅ **Tích hợp HTTP**: Tự động load dữ liệu thông qua cấu hình `httpRequestData`.
|
|
15
|
+
- ✅ **OnPush Change Detection**: Tối ưu hiệu năng render.
|
|
16
|
+
- ✅ **Standalone Component**: Dễ dàng import và sử dụng.
|
|
17
|
+
- ✅ **Angular Signals**: State management hiện đại và reactive.
|
|
18
|
+
|
|
19
|
+
## Khi nào sử dụng
|
|
20
|
+
|
|
21
|
+
- Khi cần hiển thị danh sách các tùy chọn cho người dùng chọn một hoặc nhiều.
|
|
22
|
+
- Khi xây dựng các bộ lọc (filters) có cấu trúc phân cấp phức tạp.
|
|
23
|
+
- Khi danh sách có kích thước lớn và cần tối ưu hiệu năng render (Virtual Scroll).
|
|
24
|
+
- Khi muốn đồng bộ hóa việc tìm kiếm và hiển thị dữ liệu từ API một cách tự động.
|
|
25
|
+
|
|
26
|
+
## Cài đặt
|
|
27
|
+
|
|
28
|
+
```bash
|
|
29
|
+
# npm
|
|
30
|
+
npm install @libs-ui/components-list
|
|
31
|
+
|
|
32
|
+
# yarn
|
|
33
|
+
yarn add @libs-ui/components-list
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## Import
|
|
37
|
+
|
|
38
|
+
```typescript
|
|
39
|
+
import { LibsUiComponentsListComponent } from '@libs-ui/components-list';
|
|
40
|
+
|
|
41
|
+
@Component({
|
|
42
|
+
standalone: true,
|
|
43
|
+
imports: [LibsUiComponentsListComponent],
|
|
44
|
+
// ...
|
|
45
|
+
})
|
|
46
|
+
export class YourComponent {}
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## Ví dụ
|
|
50
|
+
|
|
51
|
+
### Basic (Text)
|
|
52
|
+
|
|
53
|
+
```html
|
|
54
|
+
<libs_ui-components-list
|
|
55
|
+
[config]="{
|
|
56
|
+
type: 'text',
|
|
57
|
+
configTemplateText: signal({
|
|
58
|
+
fieldKey: 'id',
|
|
59
|
+
getValue: (item) => item.label
|
|
60
|
+
})
|
|
61
|
+
}"
|
|
62
|
+
(outSelectKey)="onSelect($event)"></libs_ui-components-list>
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### Checkbox (Multi-select)
|
|
66
|
+
|
|
67
|
+
```html
|
|
68
|
+
<libs_ui-components-list
|
|
69
|
+
[config]="{
|
|
70
|
+
type: 'checkbox',
|
|
71
|
+
configTemplateCheckbox: signal({
|
|
72
|
+
fieldKey: 'id',
|
|
73
|
+
getValue: (item) => item.name
|
|
74
|
+
})
|
|
75
|
+
}"
|
|
76
|
+
[multiKeySelected]="['1', '2']"
|
|
77
|
+
(outSelectMultiKey)="onMultiSelect($event)"></libs_ui-components-list>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
## API
|
|
81
|
+
|
|
82
|
+
### libs_ui-components-list
|
|
83
|
+
|
|
84
|
+
#### Inputs
|
|
85
|
+
|
|
86
|
+
| Property | Type | Default | Description |
|
|
87
|
+
| --------------------- | ----------------- | ----------- | ---------------------------------------------------- |
|
|
88
|
+
| `[config]` | `IListConfigItem` | `required` | Cấu hình chính (loại template, logic lấy dữ liệu...) |
|
|
89
|
+
| `[keySearch]` | `string` | `undefined` | Giá trị tìm kiếm khởi tạo |
|
|
90
|
+
| `[keySelected]` | `any` | `undefined` | Key đang chọn (single select) |
|
|
91
|
+
| `[multiKeySelected]` | `Array<any>` | `[]` | Danh sách keys đang chọn (multi select) |
|
|
92
|
+
| `[hiddenInputSearch]` | `boolean` | `false` | Ẩn/hiện thanh tìm kiếm |
|
|
93
|
+
| `[isSearchOnline]` | `boolean` | `false` | Bật tìm kiếm từ Server |
|
|
94
|
+
| `[disable]` | `boolean` | `false` | Vô hiệu hóa component |
|
|
95
|
+
| `[labelConfig]` | `ILabel` | `undefined` | Cấu hình label tiêu đề |
|
|
96
|
+
| `[validRequired]` | `IValidRequired` | `undefined` | Bắt buộc phải chọn item |
|
|
97
|
+
| `[hasDivider]` | `boolean` | `true` | Hiển thị gạch phân cách |
|
|
98
|
+
| `[maxItemShow]` | `number` | `undefined` | Số lượng item tối đa hiển thị (không scroll) |
|
|
99
|
+
|
|
100
|
+
#### Outputs
|
|
101
|
+
|
|
102
|
+
| Property | Type | Description |
|
|
103
|
+
| ----------------------- | --------------------------- | ------------------------------------------- |
|
|
104
|
+
| `(outSelectKey)` | `IListDataEmitKey` | Phát ra khi chọn 1 item |
|
|
105
|
+
| `(outSelectMultiKey)` | `IListDataEmitMultiKey` | Phát ra khi chọn nhiều item |
|
|
106
|
+
| `(outKeySearch)` | `string` | Phát ra khi keyword tìm kiếm thay đổi |
|
|
107
|
+
| `(outFunctionsControl)` | `IListFunctionControlEvent` | Cung cấp các method điều khiển từ bên ngoài |
|
|
108
|
+
| `(outLoading)` | `boolean` | Trạng thái đang tải dữ liệu |
|
|
109
|
+
|
|
110
|
+
#### Methods
|
|
111
|
+
|
|
112
|
+
| Method | Parameters | Description |
|
|
113
|
+
| -------------------- | ------------------ | --------------------------------- |
|
|
114
|
+
| `checkIsValid()` | `-` | Kiểm tra tính hợp lệ của lựa chọn |
|
|
115
|
+
| `refresh()` | `-` | Tải lại toàn bộ dữ liệu |
|
|
116
|
+
| `resetKeySelected()` | `-` | Xóa sạch các item đang chọn |
|
|
117
|
+
| `removeItems()` | `keys: Array<any>` | Xóa item cụ thể khỏi danh sách |
|
|
118
|
+
|
|
119
|
+
## Types & Interfaces
|
|
120
|
+
|
|
121
|
+
```typescript
|
|
122
|
+
export interface IListConfigItem {
|
|
123
|
+
type: 'text' | 'radio' | 'checkbox' | 'group' | 'tag';
|
|
124
|
+
httpRequestData?: WritableSignal<IHttpRequestConfig>;
|
|
125
|
+
configTemplateText?: WritableSignal<IListConfigItemText>;
|
|
126
|
+
// ...
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
export interface IListDataEmitKey {
|
|
130
|
+
key: any;
|
|
131
|
+
item: any;
|
|
132
|
+
}
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
## Công nghệ
|
|
136
|
+
|
|
137
|
+
| Technology | Purpose |
|
|
138
|
+
| ----------------- | --------------------------- |
|
|
139
|
+
| Angular 18+ | Framework chính |
|
|
140
|
+
| Angular Signals | Quản lý state reactive |
|
|
141
|
+
| TailwindCSS | Styling hệ thống |
|
|
142
|
+
| Dynamic Component | Khởi tạo template linh hoạt |
|
|
143
|
+
|
|
144
|
+
## License
|
|
145
|
+
|
|
146
|
+
MIT
|
package/defines/list.define.d.ts
CHANGED
|
@@ -6,7 +6,7 @@ import { LibsUiComponentsListRadioComponent } from '../templates/radio/radio.com
|
|
|
6
6
|
import { LibsUiComponentsListTagComponent } from '../templates/tag/tag.component';
|
|
7
7
|
import { LibsUiComponentsListTextComponent } from '../templates/text/text.component';
|
|
8
8
|
import { ALLOWED_GROUP_OVERRIDES_TYPE, CONFIG_LIST_GROUP_TYPE, IListConfigItem, IListConfigItemGroup } from './../interfaces/config-item.interface';
|
|
9
|
-
export declare const getComponentByType: (typeTemplate: TYPE_TEMPLATE) => typeof
|
|
9
|
+
export declare const getComponentByType: (typeTemplate: TYPE_TEMPLATE) => typeof LibsUiComponentsListCheckboxComponent | typeof LibsUiComponentsListGroupComponent | typeof LibsUiComponentsListRadioComponent | typeof LibsUiComponentsListTagComponent | typeof LibsUiComponentsListTextComponent;
|
|
10
10
|
export declare const getFieldKeyByType: (config: IListConfigItem | undefined, fieldKeyDefault: string) => string;
|
|
11
11
|
export declare const initConfig: (config: IListConfigItem) => void;
|
|
12
12
|
/**
|
package/package.json
CHANGED
|
@@ -1,34 +1,34 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-list",
|
|
3
|
-
"version": "0.2.355-
|
|
3
|
+
"version": "0.2.355-15",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/common": ">=18.0.0",
|
|
6
6
|
"@angular/core": ">=18.0.0",
|
|
7
|
-
"@libs-ui/utils": "0.2.355-
|
|
8
|
-
"@libs-ui/components-avatar": "0.2.355-
|
|
9
|
-
"@libs-ui/components-badge": "0.2.355-
|
|
10
|
-
"@libs-ui/components-buttons-button": "0.2.355-
|
|
11
|
-
"@libs-ui/components-buttons-sort": "0.2.355-
|
|
12
|
-
"@libs-ui/components-checkbox-group": "0.2.355-
|
|
13
|
-
"@libs-ui/components-label": "0.2.355-
|
|
14
|
-
"@libs-ui/components-popover": "0.2.355-
|
|
15
|
-
"@libs-ui/services-http-request": "0.2.355-
|
|
7
|
+
"@libs-ui/utils": "0.2.355-15",
|
|
8
|
+
"@libs-ui/components-avatar": "0.2.355-15",
|
|
9
|
+
"@libs-ui/components-badge": "0.2.355-15",
|
|
10
|
+
"@libs-ui/components-buttons-button": "0.2.355-15",
|
|
11
|
+
"@libs-ui/components-buttons-sort": "0.2.355-15",
|
|
12
|
+
"@libs-ui/components-checkbox-group": "0.2.355-15",
|
|
13
|
+
"@libs-ui/components-label": "0.2.355-15",
|
|
14
|
+
"@libs-ui/components-popover": "0.2.355-15",
|
|
15
|
+
"@libs-ui/services-http-request": "0.2.355-15",
|
|
16
16
|
"rxjs": "~7.8.0",
|
|
17
|
-
"@libs-ui/interfaces-types": "0.2.355-
|
|
18
|
-
"@libs-ui/components-inputs-input": "0.2.355-
|
|
19
|
-
"@libs-ui/components-inputs-search": "0.2.355-
|
|
20
|
-
"@libs-ui/components-inputs-valid": "0.2.355-
|
|
21
|
-
"@libs-ui/services-dynamic-component": "0.2.355-
|
|
17
|
+
"@libs-ui/interfaces-types": "0.2.355-15",
|
|
18
|
+
"@libs-ui/components-inputs-input": "0.2.355-15",
|
|
19
|
+
"@libs-ui/components-inputs-search": "0.2.355-15",
|
|
20
|
+
"@libs-ui/components-inputs-valid": "0.2.355-15",
|
|
21
|
+
"@libs-ui/services-dynamic-component": "0.2.355-15",
|
|
22
22
|
"@ngx-translate/core": "^15.0.0",
|
|
23
23
|
"@iharbeck/ngx-virtual-scroller": "15.2.0",
|
|
24
|
-
"@libs-ui/components-checkbox-single": "0.2.355-
|
|
25
|
-
"@libs-ui/components-scroll-overlay": "0.2.355-
|
|
26
|
-
"@libs-ui/components-spinner": "0.2.355-
|
|
27
|
-
"@libs-ui/icons": "0.2.355-
|
|
28
|
-
"@libs-ui/pipes-call-function-in-template": "0.2.355-
|
|
29
|
-
"@libs-ui/pipes-convert-object-to-signal": "0.2.355-
|
|
30
|
-
"@libs-ui/components-radio-single": "0.2.355-
|
|
31
|
-
"@libs-ui/components-switch": "0.2.355-
|
|
24
|
+
"@libs-ui/components-checkbox-single": "0.2.355-15",
|
|
25
|
+
"@libs-ui/components-scroll-overlay": "0.2.355-15",
|
|
26
|
+
"@libs-ui/components-spinner": "0.2.355-15",
|
|
27
|
+
"@libs-ui/icons": "0.2.355-15",
|
|
28
|
+
"@libs-ui/pipes-call-function-in-template": "0.2.355-15",
|
|
29
|
+
"@libs-ui/pipes-convert-object-to-signal": "0.2.355-15",
|
|
30
|
+
"@libs-ui/components-radio-single": "0.2.355-15",
|
|
31
|
+
"@libs-ui/components-switch": "0.2.355-15"
|
|
32
32
|
},
|
|
33
33
|
"sideEffects": false,
|
|
34
34
|
"module": "fesm2022/libs-ui-components-list.mjs",
|