@libs-ui/components-inputs-search 0.2.357-0 → 0.2.357-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.
- package/README.md +3 -13
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -58,20 +58,18 @@ import {
|
|
|
58
58
|
|
|
59
59
|
```html
|
|
60
60
|
<libs_ui-components-inputs-search
|
|
61
|
+
[searchConfig]="{ placeholder: 'Tìm kiếm khách hàng...' }"
|
|
61
62
|
(outSearch)="handlerSearch($event)">
|
|
62
63
|
</libs_ui-components-inputs-search>
|
|
63
64
|
```
|
|
64
65
|
|
|
65
66
|
```typescript
|
|
66
|
-
handlerSearch(
|
|
67
|
-
event.stopPropagation();
|
|
67
|
+
handlerSearch(keyword: string): void {
|
|
68
68
|
// keyword đã được trim, chỉ emit sau debounce hoặc khi nhấn Enter
|
|
69
69
|
this.loadData({ search: keyword });
|
|
70
70
|
}
|
|
71
71
|
```
|
|
72
72
|
|
|
73
|
-
> Lưu ý: `outSearch` emit kiểu `string` (không phải `Event`). Để gọi `event.stopPropagation()`, hãy xem hướng dẫn tại phần @Output bên dưới.
|
|
74
|
-
|
|
75
73
|
### Ví dụ 2 — Với placeholder và nút xóa nhanh
|
|
76
74
|
|
|
77
75
|
```html
|
|
@@ -193,7 +191,7 @@ handlerSearch(keyword: string): void {
|
|
|
193
191
|
| `defaultHeight` | `number` | `32` | Chiều cao mặc định (px) của ô input | `defaultHeight: 36` |
|
|
194
192
|
| `hasClearSearch` | `boolean` | `undefined` | Hiển thị nút xóa (X) khi ô có nội dung | `hasClearSearch: true` |
|
|
195
193
|
| `iconLeftClass` | `string` | `'libs-ui-icon-search'` | Class icon phía trái | `iconLeftClass: 'libs-ui-icon-filter'` |
|
|
196
|
-
| `iconRightClass` | `string` | `undefined` | Class icon phía phải (thêm vào sau icon xóa nếu có) | `iconRightClass: 'libs-ui-icon-
|
|
194
|
+
| `iconRightClass` | `string` | `undefined` | Class icon phía phải (thêm vào sau icon xóa nếu có) | `iconRightClass: 'libs-ui-icon-tooltip-outline'` |
|
|
197
195
|
| `noBorder` | `boolean` | `false` | Ẩn đường viền của ô input | `noBorder: true` |
|
|
198
196
|
| `placeholder` | `string` | `'i18n_search'` | Placeholder của ô input (hỗ trợ i18n key) | `placeholder: 'Tìm kiếm...'` |
|
|
199
197
|
| `popoverContentIconRight` | `string` | `''` | Nội dung popover hiển thị khi hover icon phải | `popoverContentIconRight: 'i18n_search_hint'` |
|
|
@@ -283,11 +281,3 @@ export interface IFocusAndBlurEvent {
|
|
|
283
281
|
⚠️ **value trong searchConfig chỉ là giá trị khởi tạo**: Sau khi component khởi tạo, thay đổi `searchConfig().value` từ bên ngoài không tự động cập nhật giao diện. Dùng `FunctionsControl.resetValue()` hoặc `FunctionsControl.insertContent()` để cập nhật programmatically.
|
|
284
282
|
|
|
285
283
|
⚠️ **outValueChange vs outSearch**: Dùng `outValueChange` khi cần phản hồi tức thì (ví dụ: highlight từ khóa, đếm ký tự). Dùng `outSearch` cho các tác vụ tốn tài nguyên (gọi API).
|
|
286
|
-
|
|
287
|
-
## Demo
|
|
288
|
-
|
|
289
|
-
```bash
|
|
290
|
-
npx nx serve core-ui
|
|
291
|
-
```
|
|
292
|
-
|
|
293
|
-
Truy cập: http://localhost:4500/components/inputs/search
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-inputs-search",
|
|
3
|
-
"version": "0.2.357-
|
|
3
|
+
"version": "0.2.357-10",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/core": ">=18.0.0",
|
|
6
|
-
"@libs-ui/components-inputs-input": "0.2.357-
|
|
7
|
-
"@libs-ui/interfaces-types": "0.2.357-
|
|
6
|
+
"@libs-ui/components-inputs-input": "0.2.357-10",
|
|
7
|
+
"@libs-ui/interfaces-types": "0.2.357-10",
|
|
8
8
|
"@ngx-translate/core": "^15.0.0",
|
|
9
9
|
"rxjs": "~7.8.0"
|
|
10
10
|
},
|