@libs-ui/components-list 0.2.356-3 → 0.2.356-5
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 +243 -71
- package/esm2022/index.mjs +2 -1
- package/esm2022/list.component.mjs +18 -2
- package/esm2022/templates/checkbox/checkbox.component.mjs +9 -12
- package/esm2022/templates/no-data/no-data.component.mjs +27 -0
- package/esm2022/templates/radio/radio.component.mjs +9 -9
- package/esm2022/templates/templates.component.abstract.mjs +3 -2
- package/esm2022/templates/text/text.component.mjs +5 -3
- package/fesm2022/libs-ui-components-list.mjs +57 -20
- package/fesm2022/libs-ui-components-list.mjs.map +1 -1
- package/index.d.ts +1 -0
- package/list.component.d.ts +16 -1
- package/package.json +23 -23
- package/templates/no-data/no-data.component.d.ts +15 -0
- package/templates/templates.component.abstract.d.ts +2 -1
package/README.md
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
# @libs-ui/components-list
|
|
2
2
|
|
|
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.
|
|
3
|
+
> Component mạnh mẽ hỗ trợ hiển thị danh sách với nhiều định dạng: Text, Radio, Checkbox, Tag và Group/Tree. Kèm sub-component hiển thị giao diện No-Data linh hoạt.
|
|
4
|
+
|
|
5
|
+
**Version:** `0.2.356-3` | **Package:** `@libs-ui/components-list`
|
|
4
6
|
|
|
5
7
|
## Giới thiệu
|
|
6
8
|
|
|
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
|
|
9
|
+
`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. 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
10
|
|
|
9
11
|
### Tính năng
|
|
10
12
|
|
|
@@ -12,9 +14,11 @@
|
|
|
12
14
|
- ✅ **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
15
|
- ✅ **Tìm kiếm Thông minh**: Hỗ trợ cả tìm kiếm Online (server-side) và Offline (client-side).
|
|
14
16
|
- ✅ **Tích hợp HTTP**: Tự động load dữ liệu thông qua cấu hình `httpRequestData`.
|
|
17
|
+
- ✅ **Virtual Scroll**: Tối ưu render danh sách lớn.
|
|
15
18
|
- ✅ **OnPush Change Detection**: Tối ưu hiệu năng render.
|
|
16
19
|
- ✅ **Standalone Component**: Dễ dàng import và sử dụng.
|
|
17
20
|
- ✅ **Angular Signals**: State management hiện đại và reactive.
|
|
21
|
+
- ✅ **Custom Row/Column**: Tùy biến layout từng item qua cấu hình `rows`/`cols`.
|
|
18
22
|
|
|
19
23
|
## Khi nào sử dụng
|
|
20
24
|
|
|
@@ -23,6 +27,13 @@
|
|
|
23
27
|
- 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
28
|
- 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
29
|
|
|
30
|
+
## ⚠️ Important Notes
|
|
31
|
+
|
|
32
|
+
- **Config Type**: Phải luôn cung cấp `type` và signal config tương ứng (ví dụ: `configTemplateText` cho type `text`).
|
|
33
|
+
- **Performance**: Virtual scroll được bật mặc định cho danh sách lớn. Tắt bằng cách set `notUseVirtualScroll: true` trong config.
|
|
34
|
+
- **Signals**: Các cấu hình bên trong `config` (như `httpRequestData`) phải là `WritableSignal` để component có thể reactive.
|
|
35
|
+
- **keysDisableItem + configCheckboxCheckAll**: Không dùng `keysDisableItem` kết hợp với template checkbox có `configCheckboxCheckAll`.
|
|
36
|
+
|
|
26
37
|
## Cài đặt
|
|
27
38
|
|
|
28
39
|
```bash
|
|
@@ -36,8 +47,12 @@ yarn add @libs-ui/components-list
|
|
|
36
47
|
## Import
|
|
37
48
|
|
|
38
49
|
```typescript
|
|
50
|
+
// Component chính
|
|
39
51
|
import { LibsUiComponentsListComponent } from '@libs-ui/components-list';
|
|
40
52
|
|
|
53
|
+
// Sub-component No-Data (khi cần dùng riêng)
|
|
54
|
+
import { LibsUiComponentsListTemplatesNoDataComponent } from '@libs-ui/components-list';
|
|
55
|
+
|
|
41
56
|
@Component({
|
|
42
57
|
standalone: true,
|
|
43
58
|
imports: [LibsUiComponentsListComponent],
|
|
@@ -48,76 +63,183 @@ export class YourComponent {}
|
|
|
48
63
|
|
|
49
64
|
## Ví dụ
|
|
50
65
|
|
|
51
|
-
### Basic (Text)
|
|
66
|
+
### Basic (Text – Single Select)
|
|
52
67
|
|
|
53
68
|
```html
|
|
54
69
|
<libs_ui-components-list
|
|
55
|
-
[config]="
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
70
|
+
[config]="configText()"
|
|
71
|
+
[keySelected]="keySelected()"
|
|
72
|
+
(outSelectKey)="onSelect($event)"
|
|
73
|
+
(outFunctionsControl)="onFunctionsControl($event)"></libs_ui-components-list>
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
```typescript
|
|
77
|
+
configText = signal<IListConfigItem>({
|
|
78
|
+
type: 'text',
|
|
79
|
+
httpRequestData: signal<IHttpRequestConfig>({
|
|
80
|
+
objectInstance: returnListObject(myData),
|
|
81
|
+
argumentsValue: [],
|
|
82
|
+
functionName: 'list',
|
|
83
|
+
}),
|
|
84
|
+
configTemplateText: signal({
|
|
85
|
+
fieldKey: 'id',
|
|
86
|
+
getValue: (item) => item.name || item.label,
|
|
87
|
+
}),
|
|
88
|
+
});
|
|
63
89
|
```
|
|
64
90
|
|
|
65
91
|
### Checkbox (Multi-select)
|
|
66
92
|
|
|
67
93
|
```html
|
|
68
94
|
<libs_ui-components-list
|
|
69
|
-
[config]="
|
|
70
|
-
|
|
71
|
-
configTemplateCheckbox: signal({
|
|
72
|
-
fieldKey: 'id',
|
|
73
|
-
getValue: (item) => item.name
|
|
74
|
-
})
|
|
75
|
-
}"
|
|
76
|
-
[multiKeySelected]="['1', '2']"
|
|
95
|
+
[config]="configCheckbox()"
|
|
96
|
+
[multiKeySelected]="multiKeySelected()"
|
|
77
97
|
(outSelectMultiKey)="onMultiSelect($event)"></libs_ui-components-list>
|
|
78
98
|
```
|
|
79
99
|
|
|
100
|
+
```typescript
|
|
101
|
+
configCheckbox = signal<IListConfigItem>({
|
|
102
|
+
type: 'checkbox',
|
|
103
|
+
configTemplateCheckbox: signal({
|
|
104
|
+
fieldKey: 'id',
|
|
105
|
+
getValue: (item) => item.name,
|
|
106
|
+
}),
|
|
107
|
+
});
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
### Tag + Search
|
|
111
|
+
|
|
112
|
+
```html
|
|
113
|
+
<libs_ui-components-list
|
|
114
|
+
[config]="configTag()"
|
|
115
|
+
[searchConfig]="{ placeholder: 'Tìm theo tên...' }"></libs_ui-components-list>
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
```typescript
|
|
119
|
+
configTag = signal<IListConfigItem>({
|
|
120
|
+
type: 'tag',
|
|
121
|
+
configTemplateTag: signal({ fieldKey: 'id', getValue: (item) => item.name }),
|
|
122
|
+
});
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
### Group / Tree
|
|
126
|
+
|
|
127
|
+
```typescript
|
|
128
|
+
import { buildListGroupConfig } from '@libs-ui/components-list';
|
|
129
|
+
|
|
130
|
+
configGroup = signal<IListConfigItem>({
|
|
131
|
+
type: 'group',
|
|
132
|
+
configTemplateGroup: buildListGroupConfig('group_tree_checkbox_1'),
|
|
133
|
+
});
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
### Custom Row & Column
|
|
137
|
+
|
|
138
|
+
```typescript
|
|
139
|
+
configCustomRow = signal<IListConfigItem>({
|
|
140
|
+
type: 'text',
|
|
141
|
+
configTemplateText: signal({
|
|
142
|
+
fieldKey: 'id',
|
|
143
|
+
rows: signal([
|
|
144
|
+
signal({
|
|
145
|
+
classRow: 'flex flex-col',
|
|
146
|
+
cols: signal([signal({ getValue: (data) => of(`<b>${data.item.name}</b>`) }), signal({ getValue: (data) => of(data.item.subTitle) })]),
|
|
147
|
+
}),
|
|
148
|
+
signal({ getValue: (data) => of(data.item.desc) }),
|
|
149
|
+
]),
|
|
150
|
+
}),
|
|
151
|
+
});
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
### No-Data (Default)
|
|
155
|
+
|
|
156
|
+
```html
|
|
157
|
+
<libs_ui-components-list-templates-no_data
|
|
158
|
+
[config]="configEmpty()"
|
|
159
|
+
[keySearch]="''"
|
|
160
|
+
[loading]="false"
|
|
161
|
+
[enableNoData]="true"></libs_ui-components-list-templates-no_data>
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
### No-Data (Custom trước khi search)
|
|
165
|
+
|
|
166
|
+
```html
|
|
167
|
+
<ng-template #tplNoData>
|
|
168
|
+
<div class="flex flex-col items-center p-4">
|
|
169
|
+
<span>Vui lòng nhập thông tin để tìm kiếm.</span>
|
|
170
|
+
</div>
|
|
171
|
+
</ng-template>
|
|
172
|
+
|
|
173
|
+
<libs_ui-components-list-templates-no_data
|
|
174
|
+
[config]="configEmpty()"
|
|
175
|
+
[keySearch]="''"
|
|
176
|
+
[loading]="false"
|
|
177
|
+
[enableNoData]="true"
|
|
178
|
+
[templateRefNotSearchNoData]="tplNoData"></libs_ui-components-list-templates-no_data>
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
### No-Result (Custom sau khi search)
|
|
182
|
+
|
|
183
|
+
```html
|
|
184
|
+
<ng-template
|
|
185
|
+
#tplNoResult
|
|
186
|
+
let-keySearch="keySearch">
|
|
187
|
+
<div>
|
|
188
|
+
Không có kết quả cho:
|
|
189
|
+
<b>{{ keySearch }}</b>
|
|
190
|
+
</div>
|
|
191
|
+
</ng-template>
|
|
192
|
+
|
|
193
|
+
<libs_ui-components-list-templates-no_data
|
|
194
|
+
[config]="configEmpty()"
|
|
195
|
+
[keySearch]="searchKeyword"
|
|
196
|
+
[loading]="false"
|
|
197
|
+
[enableNoData]="true"
|
|
198
|
+
[templateRefSearchNoData]="tplNoResult"></libs_ui-components-list-templates-no_data>
|
|
199
|
+
```
|
|
200
|
+
|
|
80
201
|
## API
|
|
81
202
|
|
|
82
203
|
### libs_ui-components-list
|
|
83
204
|
|
|
84
205
|
#### Inputs
|
|
85
206
|
|
|
86
|
-
| Property | Type | Default | Description
|
|
87
|
-
| ------------------------------------------------- | -------------------------------- | -------------- |
|
|
88
|
-
| `autoSelectedFirstItemCallOutsideBefore` | `boolean` | `false` | Tự động chọn item đầu tiên nếu chưa có item nào được chọn.
|
|
89
|
-
| `backgroundListCustom` | `string` | `bg-[#ffffff]` | Màu nền tùy chỉnh cho danh sách.
|
|
90
|
-
| `buttonsOther` | `IButton[]` | `undefined` | Danh sách các nút bấm khác hiển thị
|
|
91
|
-
| `clickExactly` | `boolean` | `undefined` | Chỉ kích hoạt chọn khi click chính xác vào item.
|
|
92
|
-
| `config` | `IListConfigItem` |
|
|
93
|
-
| `disable` | `boolean` | `false` | Vô hiệu hóa toàn bộ component.
|
|
94
|
-
| `disableLabel` | `boolean` | `false` | Vô hiệu hóa nhãn (label).
|
|
95
|
-
| `dividerClassInclude` | `string` | `undefined` | Class CSS bổ sung cho đường kẻ phân cách.
|
|
96
|
-
| `dropdownTabKeyActive` | `string` | `undefined` | Key của tab đang active trong dropdown.
|
|
97
|
-
| `focusInputSearch` | `boolean` | `undefined` | Tự động focus vào ô tìm kiếm khi dữ liệu load xong.
|
|
98
|
-
| `functionGetItemsAutoAddList` | `() => Array<any>` | `undefined` | Hàm lấy danh sách item tự động thêm vào list.
|
|
99
|
-
| `hasButtonUnSelectOption` | `boolean` | `undefined` | Hiển thị nút bỏ chọn tất cả.
|
|
100
|
-
| `hasDivider` | `boolean` | `true` | Hiển thị gạch phân cách giữa các
|
|
101
|
-
| `hiddenInputSearch` | `boolean` | `false` | Ẩn/hiện thanh tìm kiếm.
|
|
102
|
-
| `ignoreClassDisableDefaultWhenUseKeysDisableItem` | `boolean` | `undefined` | Bỏ class disable mặc định khi dùng keysDisableItem
|
|
103
|
-
| `isSearchOnline` | `boolean` | `false` | Bật tìm kiếm từ Server (call API).
|
|
104
|
-
| `keySearch` | `string` | `undefined` | Giá trị tìm kiếm khởi tạo.
|
|
105
|
-
| `keySelected` | `any` | `undefined` | Key đang chọn (
|
|
106
|
-
| `keysDisableItem` | `Array<any>` | `undefined` | Danh sách các keys bị vô hiệu hóa.
|
|
107
|
-
| `keysHiddenItem` | `Array<any>` | `undefined` | Danh sách các keys bị ẩn đi.
|
|
108
|
-
| `labelConfig` | `ILabel` | `undefined` | Cấu hình label tiêu
|
|
109
|
-
| `loadingIconSize` | `'large' \| 'medium' \| 'small'` | `undefined` | Kích thước icon loading.
|
|
110
|
-
| `maxItemShow` | `number` | `undefined` | Số lượng item tối đa hiển thị trước khi scroll.
|
|
111
|
-
| `multiKeySelected` | `Array<any>` | `[]` | Danh sách keys đang chọn (
|
|
112
|
-
| `paddingLeftItem` | `boolean` | `undefined` | Thêm padding bên trái cho item.
|
|
113
|
-
| `resetKeyWhenSelectAllKeyDropdown` | `boolean` | `undefined` | Reset key khi chọn tất cả trong dropdown.
|
|
114
|
-
| `searchConfig` | `IInputSearchConfig` | `{}` | Cấu hình chi tiết cho ô tìm kiếm.
|
|
115
|
-
| `searchPadding` | `boolean` | `undefined` | Thêm padding cho thanh tìm kiếm.
|
|
116
|
-
| `showValidateBottom` | `boolean` | `undefined` | Hiển thị thông báo validate ở phía dưới.
|
|
117
|
-
| `skipFocusInputWhenKeySearchStoreUndefined` | `boolean` | `undefined` | Bỏ qua focus input nếu keySearchStore là undefined.
|
|
118
|
-
| `templateRefSearchNoData` | `TemplateRef` | `undefined` | Template hiển thị khi tìm kiếm không có kết quả.
|
|
119
|
-
| `
|
|
120
|
-
| `
|
|
207
|
+
| Property | Type | Default | Description |
|
|
208
|
+
| ------------------------------------------------- | -------------------------------- | -------------- | -------------------------------------------------------------------------- |
|
|
209
|
+
| `autoSelectedFirstItemCallOutsideBefore` | `boolean` | `false` | Tự động chọn item đầu tiên nếu chưa có item nào được chọn. |
|
|
210
|
+
| `backgroundListCustom` | `string` | `bg-[#ffffff]` | Màu nền tùy chỉnh cho danh sách. |
|
|
211
|
+
| `buttonsOther` | `IButton[]` | `undefined` | Danh sách các nút bấm khác hiển thị cuối danh sách. |
|
|
212
|
+
| `clickExactly` | `boolean` | `undefined` | Chỉ kích hoạt chọn khi click chính xác vào item. |
|
|
213
|
+
| `config` | `IListConfigItem` | **REQUIRED** | Cấu hình chính (loại template, logic lấy dữ liệu...). |
|
|
214
|
+
| `disable` | `boolean` | `false` | Vô hiệu hóa toàn bộ component. |
|
|
215
|
+
| `disableLabel` | `boolean` | `false` | Vô hiệu hóa nhãn (label). |
|
|
216
|
+
| `dividerClassInclude` | `string` | `undefined` | Class CSS bổ sung cho đường kẻ phân cách. |
|
|
217
|
+
| `dropdownTabKeyActive` | `string` | `undefined` | Key của tab đang active trong dropdown. |
|
|
218
|
+
| `focusInputSearch` | `boolean` | `undefined` | Tự động focus vào ô tìm kiếm khi dữ liệu load xong. |
|
|
219
|
+
| `functionGetItemsAutoAddList` | `() => Array<any>` | `undefined` | Hàm lấy danh sách item tự động thêm vào list. |
|
|
220
|
+
| `hasButtonUnSelectOption` | `boolean` | `undefined` | Hiển thị nút bỏ chọn tất cả. |
|
|
221
|
+
| `hasDivider` | `boolean` | `true` | Hiển thị gạch phân cách giữa các phần. |
|
|
222
|
+
| `hiddenInputSearch` | `boolean` | `false` | Ẩn/hiện thanh tìm kiếm. |
|
|
223
|
+
| `ignoreClassDisableDefaultWhenUseKeysDisableItem` | `boolean` | `undefined` | Bỏ class disable mặc định khi dùng `keysDisableItem`. |
|
|
224
|
+
| `isSearchOnline` | `boolean` | `false` | Bật tìm kiếm từ Server (call API). |
|
|
225
|
+
| `keySearch` | `string` | `undefined` | Giá trị tìm kiếm khởi tạo. |
|
|
226
|
+
| `keySelected` | `any` | `undefined` | Key đang chọn (single select). |
|
|
227
|
+
| `keysDisableItem` | `Array<any>` | `undefined` | Danh sách các keys bị vô hiệu hóa. |
|
|
228
|
+
| `keysHiddenItem` | `Array<any>` | `undefined` | Danh sách các keys bị ẩn đi. |
|
|
229
|
+
| `labelConfig` | `ILabel` | `undefined` | Cấu hình label tiêu đề cho danh sách. |
|
|
230
|
+
| `loadingIconSize` | `'large' \| 'medium' \| 'small'` | `undefined` | Kích thước icon loading. |
|
|
231
|
+
| `maxItemShow` | `number` | `undefined` | Số lượng item tối đa hiển thị trước khi scroll. |
|
|
232
|
+
| `multiKeySelected` | `Array<any>` | `[]` | Danh sách keys đang chọn (multi select). |
|
|
233
|
+
| `paddingLeftItem` | `boolean` | `undefined` | Thêm padding bên trái cho item. |
|
|
234
|
+
| `resetKeyWhenSelectAllKeyDropdown` | `boolean` | `undefined` | Reset key khi chọn tất cả trong dropdown. |
|
|
235
|
+
| `searchConfig` | `IInputSearchConfig` | `{}` | Cấu hình chi tiết cho ô tìm kiếm. |
|
|
236
|
+
| `searchPadding` | `boolean` | `undefined` | Thêm padding cho thanh tìm kiếm. |
|
|
237
|
+
| `showValidateBottom` | `boolean` | `undefined` | Hiển thị thông báo validate ở phía dưới. |
|
|
238
|
+
| `skipFocusInputWhenKeySearchStoreUndefined` | `boolean` | `undefined` | Bỏ qua focus input nếu `keySearchStore` là undefined. |
|
|
239
|
+
| `templateRefSearchNoData` | `TemplateRef` | `undefined` | Template hiển thị khi tìm kiếm không có kết quả. |
|
|
240
|
+
| `templateRefNotSearchNoData` | `TemplateRef` | `undefined` | Template hiển thị khi không trong trạng thái tìm kiếm và không có dữ liệu. |
|
|
241
|
+
| `validRequired` | `IValidRequired` | `undefined` | Cấu hình bắt buộc phải chọn item. |
|
|
242
|
+
| `zIndex` | `number` | `undefined` | Z-index cho danh sách. |
|
|
121
243
|
|
|
122
244
|
#### Outputs
|
|
123
245
|
|
|
@@ -135,41 +257,91 @@ export class YourComponent {}
|
|
|
135
257
|
| `(outSelectMultiKey)` | `IListDataEmitMultiKey` | Phát ra khi chọn nhiều item (Multi Select). |
|
|
136
258
|
| `(outUnSelectMultiKey)` | `Array<unknown>` | Phát ra danh sách các keys bị bỏ chọn. |
|
|
137
259
|
|
|
138
|
-
#### Methods (via outFunctionsControl)
|
|
260
|
+
#### Methods (via `outFunctionsControl`)
|
|
261
|
+
|
|
262
|
+
| Method | Parameters | Description |
|
|
263
|
+
| -------------------- | -------------------------- | ----------------------------------------------------------- |
|
|
264
|
+
| `checkIsValid()` | `-` | Kiểm tra tính hợp lệ của lựa chọn (nếu có `validRequired`). |
|
|
265
|
+
| `getRectListView()` | `-` | Lấy kích thước và vị trí của list view container. |
|
|
266
|
+
| `refresh()` | `-` | Làm mới danh sách và tải lại dữ liệu từ đầu. |
|
|
267
|
+
| `removeItems()` | `keys: Array<any>` | Xóa các item cụ thể khỏi danh sách theo keys. |
|
|
268
|
+
| `resetKeySelected()` | `-` | Xóa sạch toàn bộ các item đang được chọn. |
|
|
269
|
+
| `updateData()` | `data: IDataUpdateToStore` | Cập nhật dữ liệu cụ thể vào store của list. |
|
|
139
270
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
|
147
|
-
|
|
|
271
|
+
### libs_ui-components-list-templates-no_data
|
|
272
|
+
|
|
273
|
+
Sub-component hiển thị giao diện trạng thái No-Data, có thể dùng độc lập hoặc tích hợp qua `[templateRefSearchNoData]` / `[templateRefNotSearchNoData]`.
|
|
274
|
+
|
|
275
|
+
#### Inputs
|
|
276
|
+
|
|
277
|
+
| Property | Type | Default | Description |
|
|
278
|
+
| ---------------------------- | ----------------- | ------------ | ------------------------------------------------------------------------------ |
|
|
279
|
+
| `config` | `IListConfigItem` | **REQUIRED** | Cấu hình list (dùng để lấy `textNoData`). |
|
|
280
|
+
| `keySearch` | `string` | `''` | Keyword đang search. Nếu rỗng → hiển thị no-data; nếu có → hiển thị no-result. |
|
|
281
|
+
| `loading` | `boolean` | `false` | Đang tải dữ liệu — khi `true` sẽ không hiển thị no-data. |
|
|
282
|
+
| `enableNoData` | `boolean` | `false` | Bật/tắt hiển thị trạng thái no-data. |
|
|
283
|
+
| `templateRefNotSearchNoData` | `TemplateRef` | `undefined` | Template tùy chỉnh khi chưa tìm kiếm (keySearch rỗng). |
|
|
284
|
+
| `templateRefSearchNoData` | `TemplateRef` | `undefined` | Template tùy chỉnh khi tìm kiếm không có kết quả. |
|
|
148
285
|
|
|
149
286
|
## Types & Interfaces
|
|
150
287
|
|
|
151
288
|
```typescript
|
|
289
|
+
export type TYPE_TEMPLATE = 'checkbox' | 'group' | 'radio' | 'text' | 'tag';
|
|
290
|
+
|
|
152
291
|
export interface IListConfigItem {
|
|
153
|
-
type:
|
|
292
|
+
type: TYPE_TEMPLATE;
|
|
154
293
|
httpRequestData?: WritableSignal<IHttpRequestConfig>;
|
|
155
294
|
configTemplateText?: WritableSignal<IListConfigItemText>;
|
|
295
|
+
configTemplateRadio?: WritableSignal<IListConfigItemRadio>;
|
|
296
|
+
configTemplateCheckbox?: WritableSignal<IListConfigItemCheckbox>;
|
|
297
|
+
configTemplateGroup?: WritableSignal<IListConfigItemGroup>;
|
|
298
|
+
configTemplateTag?: WritableSignal<IListConfigItemTag>;
|
|
299
|
+
textNoData?: string;
|
|
300
|
+
autoSelectFirstItem?: boolean;
|
|
301
|
+
sort?: (items: Array<any>) => void;
|
|
156
302
|
// ...
|
|
157
303
|
}
|
|
158
304
|
|
|
159
305
|
export interface IListDataEmitKey {
|
|
160
|
-
key:
|
|
306
|
+
key: unknown;
|
|
161
307
|
item: any;
|
|
308
|
+
isClickManual: boolean;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
export interface IListDataEmitMultiKey {
|
|
312
|
+
keys: Array<unknown>;
|
|
313
|
+
mapKeys: Array<IListDataEmitKey>;
|
|
314
|
+
isClickManual: boolean;
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
export interface IListFunctionControlEvent {
|
|
318
|
+
checkIsValid: () => Promise<boolean>;
|
|
319
|
+
refresh: () => Promise<void>;
|
|
320
|
+
resetKeySelected: () => Promise<void>;
|
|
321
|
+
getRectListView: () => Promise<IBoundingClientRect>;
|
|
322
|
+
removeItems: (keys: Array<string>) => Promise<void>;
|
|
323
|
+
updateData: (data: IDataUpdateToStore) => Promise<void>;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
export interface IDataUpdateToStore {
|
|
327
|
+
newData: WritableSignal<Array<WritableSignal<any>>>;
|
|
328
|
+
functionCustomAddDataToStore: (newData: WritableSignal<Array<WritableSignal<any>>>, store: WritableSignal<Array<WritableSignal<any>>>) => void;
|
|
162
329
|
}
|
|
163
330
|
```
|
|
164
331
|
|
|
332
|
+
## Demo
|
|
333
|
+
|
|
334
|
+
- **Local**: [http://localhost:4500/components/list](http://localhost:4500/components/list)
|
|
335
|
+
|
|
165
336
|
## Công nghệ
|
|
166
337
|
|
|
167
|
-
| Technology | Purpose
|
|
168
|
-
| ----------------- |
|
|
169
|
-
| Angular 18+ | Framework chính
|
|
170
|
-
| Angular Signals | Quản lý state reactive
|
|
171
|
-
| TailwindCSS | Styling hệ thống
|
|
172
|
-
| Dynamic Component | Khởi tạo template linh hoạt
|
|
338
|
+
| Technology | Purpose |
|
|
339
|
+
| ----------------- | ----------------------------- |
|
|
340
|
+
| Angular 18+ | Framework chính |
|
|
341
|
+
| Angular Signals | Quản lý state reactive |
|
|
342
|
+
| TailwindCSS | Styling hệ thống |
|
|
343
|
+
| Dynamic Component | Khởi tạo template linh hoạt |
|
|
344
|
+
| Virtual Scroll | Render danh sách lớn hiệu quả |
|
|
173
345
|
|
|
174
346
|
## License
|
|
175
347
|
|
package/esm2022/index.mjs
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export * from './list.component';
|
|
2
2
|
export * from './defines/list.define';
|
|
3
3
|
export * from './interfaces';
|
|
4
|
-
|
|
4
|
+
export * from './templates/no-data/no-data.component';
|
|
5
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvbGlzdC9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxrQkFBa0IsQ0FBQztBQUNqQyxjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsY0FBYyxDQUFDO0FBQzdCLGNBQWMsdUNBQXVDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL2xpc3QuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vZGVmaW5lcy9saXN0LmRlZmluZSc7XG5leHBvcnQgKiBmcm9tICcuL2ludGVyZmFjZXMnO1xuZXhwb3J0ICogZnJvbSAnLi90ZW1wbGF0ZXMvbm8tZGF0YS9uby1kYXRhLmNvbXBvbmVudCc7Il19
|