@libs-ui/components-inputs-search 0.2.355-8 → 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 +134 -2
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,3 +1,135 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Search Input Component
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
`@libs-ui/components-inputs-search` là một thành phần nhập liệu chuyên dụng cho tính năng tìm kiếm. Nó được xây dựng dựa trên `LibsUiComponentsInputsInputComponent` và bổ sung các tính năng như tự động kích hoạt tìm kiếm sau một khoảng thời gian chờ (debounce), nút xóa nội dung tìm kiếm nhanh, và hỗ trợ các biểu tượng tùy chỉnh.
|
|
4
|
+
|
|
5
|
+
## Tính năng nổi bật
|
|
6
|
+
|
|
7
|
+
- 🔍 **Auto-complete Search**: Tự động phát ra sự kiện tìm kiếm sau khi người dùng ngừng nhập (mặc định 1 giây).
|
|
8
|
+
- ⚡ **Debounce & Throttle**: Tích hợp sẵn cơ chế debounce cho việc nhập liệu và throttle cho phím Enter.
|
|
9
|
+
- 🧹 **Clearable Support**: Hỗ trợ nút xóa (`hasClearSearch`) xuất hiện khi có nội dung trong ô tìm kiếm.
|
|
10
|
+
- 🎨 **Flexible Styling**: Dễ dàng tùy chỉnh border, background, chiều cao và các class CSS bổ sung.
|
|
11
|
+
- ⌨️ **Keyboard Support**: Hỗ trợ phím Enter để kích hoạt tìm kiếm ngay lập tức.
|
|
12
|
+
- 🛡️ **Signal Based**: Hoạt động mượt mà với Angular Signals.
|
|
13
|
+
|
|
14
|
+
## Cài đặt
|
|
15
|
+
|
|
16
|
+
Sử dụng npm hoặc yarn để cài đặt:
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install @libs-ui/components-inputs-search
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Cách sử dụng
|
|
23
|
+
|
|
24
|
+
### Import Module
|
|
25
|
+
|
|
26
|
+
```typescript
|
|
27
|
+
import { LibsUiComponentsInputsSearchComponent } from '@libs-ui/components-inputs-search';
|
|
28
|
+
|
|
29
|
+
@Component({
|
|
30
|
+
standalone: true,
|
|
31
|
+
imports: [LibsUiComponentsInputsSearchComponent],
|
|
32
|
+
// ...
|
|
33
|
+
})
|
|
34
|
+
export class YourComponent {}
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### Ví dụ cơ bản
|
|
38
|
+
|
|
39
|
+
```html
|
|
40
|
+
<libs_ui-components-inputs-search
|
|
41
|
+
(outSearch)="onSearch($event)"
|
|
42
|
+
[searchConfig]="{
|
|
43
|
+
placeholder: 'Tìm kiếm khách hàng...',
|
|
44
|
+
hasClearSearch: true
|
|
45
|
+
}"></libs_ui-components-inputs-search>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### Tùy chỉnh Debounce và Icon
|
|
49
|
+
|
|
50
|
+
```html
|
|
51
|
+
<libs_ui-components-inputs-search
|
|
52
|
+
[debounceTime]="500"
|
|
53
|
+
[searchConfig]="{
|
|
54
|
+
iconLeftClass: 'libs-ui-icon-filter',
|
|
55
|
+
placeholder: 'Lọc nhanh...'
|
|
56
|
+
}"
|
|
57
|
+
(outSearch)="handleFastFilter($event)"></libs_ui-components-inputs-search>
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
## API Reference
|
|
61
|
+
|
|
62
|
+
### Inputs
|
|
63
|
+
|
|
64
|
+
| Thuộc tính | Kiểu dữ liệu | Mặc định | Mô tả |
|
|
65
|
+
| :--------------------------- | :------------------- | :------- | :-------------------------------------------------------- |
|
|
66
|
+
| `searchConfig` | `IInputSearchConfig` | `{}` | Cấu hình cho ô tìm kiếm (placeholder, value, icons, ...). |
|
|
67
|
+
| `blurTimeOut` | `number` | `600` | Thời gian chờ trước khi emit sự kiện blur. |
|
|
68
|
+
| `debounceTime` | `number` | `1000` | Thời gian chờ (ms) trước khi phát ra `outSearch`. |
|
|
69
|
+
| `disable` | `boolean` | `false` | Vô hiệu hóa ô tìm kiếm. |
|
|
70
|
+
| `focusTimeOut` | `number` | `600` | Thời gian chờ trước khi emit sự kiện focus. |
|
|
71
|
+
| `ignoreAutoComplete` | `boolean` | `false` | Nếu true, sẽ không tự động emit `outSearch`. |
|
|
72
|
+
| `ignoreStopPropagationEvent` | `boolean` | `false` | Ngăn chặn sự kiện lan truyền ra ngoài. |
|
|
73
|
+
| `readonly` | `boolean` | `false` | Chế độ chỉ đọc. |
|
|
74
|
+
|
|
75
|
+
### Outputs
|
|
76
|
+
|
|
77
|
+
| Sự kiện | Kiểu dữ liệu | Mô tả |
|
|
78
|
+
| :-------------------- | :--------------------------- | :--------------------------------------------------------------------------- |
|
|
79
|
+
| `outFocusAndBlur` | `IFocusAndBlurEvent` | Sự kiện focus và blur. |
|
|
80
|
+
| `outFunctionsControl` | `IInputFunctionControlEvent` | Cung cấp các phương thức điều khiển (focus, blur, ...). |
|
|
81
|
+
| `outIconLeft` | `string` | Sự kiện khi click vào icon bên trái. |
|
|
82
|
+
| `outIconRight` | `string` | Sự kiện khi click vào icon bên phải. |
|
|
83
|
+
| `outSearch` | `string` | Phát ra nội dung tìm kiếm sau khoảng thời gian debounce hoặc khi nhấn Enter. |
|
|
84
|
+
| `outValueChange` | `string` | Phát ra nội dung mới ngay lập tức mỗi khi gõ phím. |
|
|
85
|
+
|
|
86
|
+
## Types & Interfaces
|
|
87
|
+
|
|
88
|
+
### IInputSearchConfig
|
|
89
|
+
|
|
90
|
+
Giao diện cấu hình toàn diện cho component Search.
|
|
91
|
+
|
|
92
|
+
```typescript
|
|
93
|
+
export interface IInputSearchConfig {
|
|
94
|
+
classInclude?: string;
|
|
95
|
+
classContainerInput?: string;
|
|
96
|
+
placeholder?: string;
|
|
97
|
+
value?: string;
|
|
98
|
+
noBorder?: boolean;
|
|
99
|
+
backgroundNone?: boolean;
|
|
100
|
+
iconLeftClass?: string;
|
|
101
|
+
iconRightClass?: string;
|
|
102
|
+
defaultHeight?: number;
|
|
103
|
+
classCoverInputSearch?: string;
|
|
104
|
+
hasClearSearch?: boolean;
|
|
105
|
+
popoverContentIconRight?: string;
|
|
106
|
+
}
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
### IInputFunctionControlEvent
|
|
110
|
+
|
|
111
|
+
Được kế thừa từ component Input cơ bản để điều khiển hành vi.
|
|
112
|
+
|
|
113
|
+
```typescript
|
|
114
|
+
export interface IInputFunctionControlEvent {
|
|
115
|
+
focus: (emitEvent?: boolean) => Promise<void>;
|
|
116
|
+
blur: (emitEvent?: boolean) => Promise<void>;
|
|
117
|
+
resetValue: () => Promise<void>;
|
|
118
|
+
insertContent: (data: string | number) => Promise<void>;
|
|
119
|
+
// ... and other methods from @libs-ui/components-inputs-input
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
export interface IFocusAndBlurEvent {
|
|
123
|
+
focus: boolean;
|
|
124
|
+
event: FocusEvent;
|
|
125
|
+
}
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
## Tech Stack
|
|
129
|
+
|
|
130
|
+
- **Core**: Angular 18+, RxJS (Subject, debounceTime, throttleTime)
|
|
131
|
+
- **Base**: `@libs-ui/components-inputs-input`
|
|
132
|
+
|
|
133
|
+
## License
|
|
134
|
+
|
|
135
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-inputs-search",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.356-0",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/core": ">=18.0.0",
|
|
6
|
-
"@libs-ui/components-inputs-input": "0.2.
|
|
7
|
-
"@libs-ui/interfaces-types": "0.2.
|
|
6
|
+
"@libs-ui/components-inputs-input": "0.2.356-0",
|
|
7
|
+
"@libs-ui/interfaces-types": "0.2.356-0",
|
|
8
8
|
"@ngx-translate/core": "^15.0.0",
|
|
9
9
|
"rxjs": "~7.8.0"
|
|
10
10
|
},
|