@libs-ui/components-dropdown 0.2.357-7 → 0.2.357-9
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 +20 -10
- package/package.json +11 -11
package/README.md
CHANGED
|
@@ -505,14 +505,28 @@ selectedKey = signal<string>('item-id-123'); // sẽ tự gọi API để load t
|
|
|
505
505
|
|
|
506
506
|
### 11. Dropdown không load list trước khi search
|
|
507
507
|
|
|
508
|
+
Cơ chế "chưa search thì chưa load" được bật qua `ignoreShowDataWhenNotSearch: true` **bên trong `listConfig`** (thuộc `IListConfigItem`), không phải một input riêng của dropdown.
|
|
509
|
+
|
|
510
|
+
```typescript
|
|
511
|
+
readonly listConfigNotSearch: IListConfigItem = {
|
|
512
|
+
type: 'text',
|
|
513
|
+
httpRequestData: signal<IHttpRequestConfig>({
|
|
514
|
+
objectInstance: new UserService(),
|
|
515
|
+
functionName: 'list',
|
|
516
|
+
argumentsValue: [],
|
|
517
|
+
}),
|
|
518
|
+
ignoreShowDataWhenNotSearch: true, // không load list khi vừa mở; chỉ load khi có keyword
|
|
519
|
+
configTemplateText: signal({ fieldKey: 'id', getValue: (item) => item.name }),
|
|
520
|
+
};
|
|
521
|
+
```
|
|
522
|
+
|
|
508
523
|
```html
|
|
509
524
|
<libs_ui-components-dropdown
|
|
510
525
|
[labelConfig]="{ labelLeft: 'Gõ keyword để bắt đầu load' }"
|
|
511
|
-
[listConfig]="
|
|
526
|
+
[listConfig]="listConfigNotSearch"
|
|
512
527
|
[isSearchOnline]="true"
|
|
513
528
|
[listHiddenInputSearch]="false"
|
|
514
529
|
[listSearchConfig]="{ noBorder: true, placeholder: 'Nhập để tìm kiếm...' }"
|
|
515
|
-
[dropdownIgnoreNotSearch]="true"
|
|
516
530
|
/>
|
|
517
531
|
```
|
|
518
532
|
|
|
@@ -652,6 +666,8 @@ handlerFunctionsControl(event: IDropdownFunctionControlEvent): void {
|
|
|
652
666
|
| `resetError()` | `() => Promise<void>` | Xóa error message đang hiển thị và border đỏ |
|
|
653
667
|
| `setError(message)` | `(message: string) => Promise<void>` | Hiển thị error message tùy chỉnh (có thể truyền i18n key) |
|
|
654
668
|
| `setItemSelectedByKey(id)` | `(id: unknown) => Promise<void>` | Chọn item theo key, tự gọi API `httpRequestDetailItemById` nếu có để lấy chi tiết |
|
|
669
|
+
| `setSelectedKey(key, options?)` | `(key: unknown, options?: { reset?: boolean }) => Promise<void>` | Set key đã chọn theo chương trình (single select); `options.reset=true` sẽ reset trước khi set |
|
|
670
|
+
| `setSelectedMultiKey(keys, options?)` | `(keys: unknown[], options?: { reset?: boolean }) => Promise<void>` | Set mảng key đã chọn theo chương trình (multi select); `options.reset=true` sẽ reset trước khi set |
|
|
655
671
|
| `updateLabelItemSelected(label)` | `(label: string) => Promise<void>` | Cập nhật text hiển thị của item đã chọn mà không cần reload |
|
|
656
672
|
|
|
657
673
|
## Types & Interfaces
|
|
@@ -745,6 +761,8 @@ interface IDropdownFunctionControlEvent {
|
|
|
745
761
|
reset: () => Promise<void>;
|
|
746
762
|
refreshList: () => Promise<void>;
|
|
747
763
|
setItemSelectedByKey: (id: unknown) => Promise<void>;
|
|
764
|
+
setSelectedKey: (key: unknown, options?: { reset?: boolean }) => Promise<void>;
|
|
765
|
+
setSelectedMultiKey: (keys: unknown[], options?: { reset?: boolean }) => Promise<void>;
|
|
748
766
|
getDisable: () => Promise<boolean>;
|
|
749
767
|
}
|
|
750
768
|
```
|
|
@@ -781,11 +799,3 @@ Component tabs nội bộ, được sử dụng tự động khi truyền `[tabs
|
|
|
781
799
|
⚠️ **`listKeysHidden` không dùng kèm `configCheckboxCheckAll`**: Tương tự `listKeysDisable`, tránh dùng kết hợp với `configCheckboxCheckAll`.
|
|
782
800
|
|
|
783
801
|
⚠️ **XSS Safety**: Khi `getValue`/`getLabelItem` trả về HTML có thể chứa dữ liệu từ người dùng, BẮT BUỘC bọc trong `escapeHtml()` từ `@libs-ui/utils`.
|
|
784
|
-
|
|
785
|
-
## Demo
|
|
786
|
-
|
|
787
|
-
```bash
|
|
788
|
-
npx nx serve core-ui
|
|
789
|
-
```
|
|
790
|
-
|
|
791
|
-
Truy cập: http://localhost:4500/dropdown
|
package/package.json
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-dropdown",
|
|
3
|
-
"version": "0.2.357-
|
|
3
|
+
"version": "0.2.357-9",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/common": ">=18.0.0",
|
|
6
6
|
"@angular/core": ">=18.0.0",
|
|
7
|
-
"@libs-ui/components-avatar": "0.2.357-
|
|
8
|
-
"@libs-ui/components-buttons-button": "0.2.357-
|
|
9
|
-
"@libs-ui/components-inputs-search": "0.2.357-
|
|
10
|
-
"@libs-ui/components-label": "0.2.357-
|
|
11
|
-
"@libs-ui/components-list": "0.2.357-
|
|
12
|
-
"@libs-ui/components-popover": "0.2.357-
|
|
13
|
-
"@libs-ui/pipes-security-trust": "0.2.357-
|
|
14
|
-
"@libs-ui/services-http-request": "0.2.357-
|
|
15
|
-
"@libs-ui/utils": "0.2.357-
|
|
7
|
+
"@libs-ui/components-avatar": "0.2.357-9",
|
|
8
|
+
"@libs-ui/components-buttons-button": "0.2.357-9",
|
|
9
|
+
"@libs-ui/components-inputs-search": "0.2.357-9",
|
|
10
|
+
"@libs-ui/components-label": "0.2.357-9",
|
|
11
|
+
"@libs-ui/components-list": "0.2.357-9",
|
|
12
|
+
"@libs-ui/components-popover": "0.2.357-9",
|
|
13
|
+
"@libs-ui/pipes-security-trust": "0.2.357-9",
|
|
14
|
+
"@libs-ui/services-http-request": "0.2.357-9",
|
|
15
|
+
"@libs-ui/utils": "0.2.357-9",
|
|
16
16
|
"@ngx-translate/core": "^15.0.0",
|
|
17
|
-
"@libs-ui/interfaces-types": "0.2.357-
|
|
17
|
+
"@libs-ui/interfaces-types": "0.2.357-9"
|
|
18
18
|
},
|
|
19
19
|
"sideEffects": false,
|
|
20
20
|
"module": "fesm2022/libs-ui-components-dropdown.mjs",
|