@libs-ui/components-inputs-input 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 +234 -2
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -1,3 +1,235 @@
|
|
|
1
|
-
# inputs-input
|
|
1
|
+
# @libs-ui/components-inputs-input
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> Universal input component hỗ trợ text, number, textarea với validation và customization đầy đủ
|
|
4
|
+
|
|
5
|
+
**Version:** 0.2.355-14
|
|
6
|
+
|
|
7
|
+
## Giới thiệu
|
|
8
|
+
|
|
9
|
+
`LibsUiComponentsInputsInputComponent` là một standalone Angular component đa năng cho việc nhập liệu. Component hỗ trợ nhiều loại dữ liệu (string, int, float, bigint), nhiều tag (input, textarea, iframe-textarea), và có khả năng tùy biến cao với validation, icons, templates, và external controls.
|
|
10
|
+
|
|
11
|
+
### Tính năng
|
|
12
|
+
|
|
13
|
+
- ✅ Hỗ trợ nhiều data types: string, int, float, bigint
|
|
14
|
+
- ✅ Hỗ trợ nhiều tag types: input, textarea, iframe-textarea
|
|
15
|
+
- ✅ Auto-resize cho textarea
|
|
16
|
+
- ✅ Number formatting theo ngôn ngữ (VI/EN)
|
|
17
|
+
- ✅ Min/Max value validation cho number
|
|
18
|
+
- ✅ Character count display
|
|
19
|
+
- ✅ Icon left/right với popover
|
|
20
|
+
- ✅ Template slots (left/right bottom)
|
|
21
|
+
- ✅ Up/Down buttons cho number input
|
|
22
|
+
- ✅ Drag & drop file support
|
|
23
|
+
- ✅ External control via FunctionsControl
|
|
24
|
+
- ✅ OnPush Change Detection
|
|
25
|
+
- ✅ Angular Signals
|
|
26
|
+
|
|
27
|
+
## Khi nào sử dụng
|
|
28
|
+
|
|
29
|
+
- Cần input field cơ bản cho text hoặc number
|
|
30
|
+
- Cần textarea với auto-resize
|
|
31
|
+
- Cần format number theo locale (VI/EN)
|
|
32
|
+
- Cần validation min/max cho number input
|
|
33
|
+
- Cần hiển thị character count
|
|
34
|
+
- Cần custom icons với popover
|
|
35
|
+
- Cần control input từ component cha
|
|
36
|
+
- Cần drag & drop file vào input
|
|
37
|
+
|
|
38
|
+
## Important Notes
|
|
39
|
+
|
|
40
|
+
⚠️ **Data Type Handling**: Component tự động format number theo ngôn ngữ hiện tại (VI dùng dấu `.` cho thousands, EN dùng `,`).
|
|
41
|
+
|
|
42
|
+
⚠️ **Textarea Auto-resize**: Khi dùng `tagInput="textarea"`, component tự động điều chỉnh height dựa trên content.
|
|
43
|
+
|
|
44
|
+
⚠️ **Number Precision**:
|
|
45
|
+
|
|
46
|
+
- `int`: max 16-17 digits
|
|
47
|
+
- `float`: max 15 digits (font) + decimals
|
|
48
|
+
- `bigint`: configurable via `maxLengthNumberCount` và `fixedFloat`
|
|
49
|
+
|
|
50
|
+
⚠️ **Value Model**: `value` là model (two-way binding), component tự động parse và emit theo `dataType`.
|
|
51
|
+
|
|
52
|
+
## Cài đặt
|
|
53
|
+
|
|
54
|
+
```bash
|
|
55
|
+
npm install @libs-ui/components-inputs-input
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## Import
|
|
59
|
+
|
|
60
|
+
```typescript
|
|
61
|
+
import { LibsUiComponentsInputsInputComponent } from '@libs-ui/components-inputs-input';
|
|
62
|
+
|
|
63
|
+
@Component({
|
|
64
|
+
standalone: true,
|
|
65
|
+
imports: [LibsUiComponentsInputsInputComponent],
|
|
66
|
+
})
|
|
67
|
+
export class YourComponent {}
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
## Ví dụ
|
|
71
|
+
|
|
72
|
+
### Basic Text Input
|
|
73
|
+
|
|
74
|
+
```html
|
|
75
|
+
<libs_ui-components-inputs-input
|
|
76
|
+
[(value)]="textValue"
|
|
77
|
+
[placeholder]="'Enter text'"
|
|
78
|
+
(outChange)="onTextChange($event)" />
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
### Number Input với Min/Max
|
|
82
|
+
|
|
83
|
+
```html
|
|
84
|
+
<libs_ui-components-inputs-input
|
|
85
|
+
[dataType]="'int'"
|
|
86
|
+
[(value)]="numberValue"
|
|
87
|
+
[minValueNumber]="0"
|
|
88
|
+
[maxValueNumber]="100"
|
|
89
|
+
[placeholder]="'0-100'" />
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
### Textarea với Auto-resize
|
|
93
|
+
|
|
94
|
+
```html
|
|
95
|
+
<libs_ui-components-inputs-input
|
|
96
|
+
[tagInput]="'textarea'"
|
|
97
|
+
[(value)]="textareaValue"
|
|
98
|
+
[minHeightTextArea]="100"
|
|
99
|
+
[maxHeightTextArea]="300"
|
|
100
|
+
[showCount]="true"
|
|
101
|
+
[maxLength]="500" />
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
### Float Input với Fixed Decimal
|
|
105
|
+
|
|
106
|
+
```html
|
|
107
|
+
<libs_ui-components-inputs-input
|
|
108
|
+
[dataType]="'float'"
|
|
109
|
+
[(value)]="floatValue"
|
|
110
|
+
[fixedFloat]="2"
|
|
111
|
+
[acceptNegativeValue]="true" />
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
### Input với Icons
|
|
115
|
+
|
|
116
|
+
```html
|
|
117
|
+
<libs_ui-components-inputs-input
|
|
118
|
+
[(value)]="searchValue"
|
|
119
|
+
[iconLeftClass]="'libs-ui-icon-search'"
|
|
120
|
+
[iconRightClass]="'libs-ui-icon-close'"
|
|
121
|
+
[popoverContentIconLeft]="'Search for items'"
|
|
122
|
+
(outIconLeft)="onSearchClick()"
|
|
123
|
+
(outIconRight)="onClearClick()" />
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
### External Control
|
|
127
|
+
|
|
128
|
+
```html
|
|
129
|
+
<libs_ui-components-inputs-input
|
|
130
|
+
[(value)]="controlledValue"
|
|
131
|
+
(outFunctionsControl)="onFunctionsControl($event)" />
|
|
132
|
+
|
|
133
|
+
<button (click)="focusInput()">Focus</button>
|
|
134
|
+
<button (click)="insertText('Hello')">Insert Text</button>
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
```typescript
|
|
138
|
+
functionControl = signal<IInputFunctionControlEvent | null>(null);
|
|
139
|
+
|
|
140
|
+
onFunctionsControl(control: IInputFunctionControlEvent) {
|
|
141
|
+
this.functionControl.set(control);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
async focusInput() {
|
|
145
|
+
await this.functionControl()?.focus();
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
async insertText(text: string) {
|
|
149
|
+
await this.functionControl()?.insertContent(text);
|
|
150
|
+
}
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
## API
|
|
154
|
+
|
|
155
|
+
### Inputs (Most Common)
|
|
156
|
+
|
|
157
|
+
| Property | Type | Default | Description |
|
|
158
|
+
| ----------------------- | ------------------------ | ------------ | ------------------------------------------ |
|
|
159
|
+
| `[tagInput]` | `TYPE_TAG_INPUT` | `'input'` | Tag type: input, textarea, iframe-textarea |
|
|
160
|
+
| `[dataType]` | `TYPE_DATA_TYPE_INPUT` | `'string'` | Data type: string, int, float, bigint |
|
|
161
|
+
| `[typeInput]` | `TYPE_INPUT` | `'text'` | Input type: text, number, password |
|
|
162
|
+
| `[value]` | `string \| number` | `''` | Input value (model binding) |
|
|
163
|
+
| `[placeholder]` | `string` | `' '` | Placeholder text |
|
|
164
|
+
| `[maxLength]` | `number` | `undefined` | Max character length |
|
|
165
|
+
| `[minValueNumber]` | `number` | `undefined` | Min value cho number input |
|
|
166
|
+
| `[maxValueNumber]` | `number` | `undefined` | Max value cho number input |
|
|
167
|
+
| `[fixedFloat]` | `number` | `undefined` | Số chữ số thập phân |
|
|
168
|
+
| `[acceptNegativeValue]` | `boolean` | `false` | Cho phép giá trị âm |
|
|
169
|
+
| `[readonly]` | `boolean` | `false` | Readonly mode |
|
|
170
|
+
| `[disable]` | `boolean` | `false` | Disable mode |
|
|
171
|
+
| `[showCount]` | `boolean` | `false` | Hiển thị character count |
|
|
172
|
+
| `[autoRemoveEmoji]` | `boolean` | `false` | Tự động loại bỏ emoji |
|
|
173
|
+
| `[noBorder]` | `boolean` | `false` | Ẩn border |
|
|
174
|
+
| `[borderError]` | `boolean` | `false` | Hiển thị border error |
|
|
175
|
+
| `[iconLeftClass]` | `string` | `''` | Class cho icon trái |
|
|
176
|
+
| `[iconRightClass]` | `string` | `undefined` | Class cho icon phải |
|
|
177
|
+
| `[minHeightTextArea]` | `number` | `undefined` | Min height cho textarea |
|
|
178
|
+
| `[maxHeightTextArea]` | `number` | `250` | Max height cho textarea |
|
|
179
|
+
| `[resize]` | `TYPE_INPUT_RESIZE_MODE` | `'vertical'` | Resize mode |
|
|
180
|
+
| `[focusInput]` | `boolean` | `false` | Auto focus input |
|
|
181
|
+
|
|
182
|
+
**Note**: Component có 50+ inputs. Xem demo tại `/inputs/input` để biết chi tiết.
|
|
183
|
+
|
|
184
|
+
### Outputs
|
|
185
|
+
|
|
186
|
+
| Property | Type | Description |
|
|
187
|
+
| ------------------------ | ---------------------------- | ------------------------- |
|
|
188
|
+
| `(outChange)` | `any` | Emit khi value thay đổi |
|
|
189
|
+
| `(outFocusAndBlurEvent)` | `IFocusAndBlurEvent` | Emit khi focus/blur |
|
|
190
|
+
| `(outEnterEvent)` | `IEvent` | Emit khi nhấn Enter |
|
|
191
|
+
| `(outIconLeft)` | `string` | Emit khi click icon left |
|
|
192
|
+
| `(outIconRight)` | `string` | Emit khi click icon right |
|
|
193
|
+
| `(outFunctionsControl)` | `IInputFunctionControlEvent` | Emit function controls |
|
|
194
|
+
| `(outFilesDrop)` | `Array<File>` | Emit khi drop files |
|
|
195
|
+
|
|
196
|
+
### FunctionsControl Methods
|
|
197
|
+
|
|
198
|
+
| Method | Description |
|
|
199
|
+
| ---------------------------- | ------------------------- |
|
|
200
|
+
| `focus(emitEvent?: boolean)` | Focus vào input |
|
|
201
|
+
| `blur(emitEvent?: boolean)` | Blur khỏi input |
|
|
202
|
+
| `insertContent(data)` | Insert content vào cursor |
|
|
203
|
+
| `resetValue()` | Reset value về empty |
|
|
204
|
+
| `getElementValue()` | Lấy value từ element |
|
|
205
|
+
| `selectAllContent()` | Select all content |
|
|
206
|
+
|
|
207
|
+
## Types
|
|
208
|
+
|
|
209
|
+
```typescript
|
|
210
|
+
type TYPE_INPUT = 'text' | 'number' | 'password';
|
|
211
|
+
type TYPE_DATA_TYPE_INPUT = 'string' | 'int' | 'float' | 'bigint';
|
|
212
|
+
type TYPE_TAG_INPUT = 'input' | 'textarea' | 'iframe-textarea';
|
|
213
|
+
type TYPE_INPUT_RESIZE_MODE = 'auto' | 'vertical' | 'horizontal' | 'none';
|
|
214
|
+
|
|
215
|
+
interface IInputFunctionControlEvent {
|
|
216
|
+
focus: (emitEvent?: boolean) => Promise<void>;
|
|
217
|
+
blur: (emitEvent?: boolean) => Promise<void>;
|
|
218
|
+
insertContent: (data: string | number) => Promise<void>;
|
|
219
|
+
resetValue: () => Promise<void>;
|
|
220
|
+
getElementValue: () => Promise<any> | undefined;
|
|
221
|
+
selectAllContent: () => Promise<void>;
|
|
222
|
+
}
|
|
223
|
+
```
|
|
224
|
+
|
|
225
|
+
## Demo
|
|
226
|
+
|
|
227
|
+
```bash
|
|
228
|
+
npx nx serve core-ui
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
Truy cập: `http://localhost:4500/inputs/input`
|
|
232
|
+
|
|
233
|
+
## License
|
|
234
|
+
|
|
235
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-inputs-input",
|
|
3
|
-
"version": "0.2.355-
|
|
3
|
+
"version": "0.2.355-15",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/core": ">=18.0.0",
|
|
6
6
|
"@angular/platform-browser": ">=18.0.0",
|
|
7
|
-
"@libs-ui/components-buttons-sort": "0.2.355-
|
|
8
|
-
"@libs-ui/components-popover": "0.2.355-
|
|
9
|
-
"@libs-ui/interfaces-types": "0.2.355-
|
|
10
|
-
"@libs-ui/services-config-project": "0.2.355-
|
|
11
|
-
"@libs-ui/utils": "0.2.355-
|
|
7
|
+
"@libs-ui/components-buttons-sort": "0.2.355-15",
|
|
8
|
+
"@libs-ui/components-popover": "0.2.355-15",
|
|
9
|
+
"@libs-ui/interfaces-types": "0.2.355-15",
|
|
10
|
+
"@libs-ui/services-config-project": "0.2.355-15",
|
|
11
|
+
"@libs-ui/utils": "0.2.355-15",
|
|
12
12
|
"@ngx-translate/core": "^15.0.0",
|
|
13
13
|
"rxjs": "~7.8.0"
|
|
14
14
|
},
|