@libs-ui/components-inputs-input 0.2.355-9 → 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 +283 -2
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -1,3 +1,284 @@
|
|
|
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
|
+
| Property | Type | Default | Description |
|
|
160
|
+
| -------------------------------------------- | -------------------------------- | -------------------------- | -------------------------------------------- |
|
|
161
|
+
| `[acceptNegativeValue]` | `boolean` | `false` | Cho phép giá trị âm |
|
|
162
|
+
| `[acceptOnlyClickIcon]` | `boolean` | `false` | Chỉ cho phép click vào icon |
|
|
163
|
+
| `[autoAddZeroLessThan10InTypeInt]` | `boolean` | `false` | Tự động thêm số 0 nếu < 10 (int) |
|
|
164
|
+
| `[autoRemoveEmoji]` | `boolean` | `false` | Tự động loại bỏ emoji |
|
|
165
|
+
| `[backgroundNone]` | `boolean` | `false` | Trong suốt background |
|
|
166
|
+
| `[blurTimeOut]` | `number` | `32` | Delay time cho blur event |
|
|
167
|
+
| `[borderError]` | `boolean` | `false` | Hiển thị border error |
|
|
168
|
+
| `[classContainerBottomInput]` | `string` | `' '` | Class cho container dưới input |
|
|
169
|
+
| `[classContainerInput]` | `string` | `'w-full'` | Class cho container input |
|
|
170
|
+
| `[classInclude]` | `string` | `' w-full '` | Class bao ngoài component |
|
|
171
|
+
| `[dataType]` | `TYPE_DATA_TYPE_INPUT` | `'string'` | Data type: string, int, float, bigint |
|
|
172
|
+
| `[defaultHeight]` | `number` | `32` | Chiều cao mặc định |
|
|
173
|
+
| `[disable]` | `boolean` | `false` | Disable mode |
|
|
174
|
+
| `[emitEmptyInDataTypeNumber]` | `boolean` | `false` | Emit empty string khi xoá hết number |
|
|
175
|
+
| `[fixedFloat]` | `number` | `undefined` | Số chữ số thập phân |
|
|
176
|
+
| `[focusInput]` | `boolean` | `false` | Auto focus input |
|
|
177
|
+
| `[focusTimeOut]` | `number` | `600` | Delay time cho focus method |
|
|
178
|
+
| `[iconLeftClass]` | `string` | `''` | Class cho icon trái |
|
|
179
|
+
| `[iconRightClass]` | `string` | `undefined` | Class cho icon phải |
|
|
180
|
+
| `[iframeTextareaCustomStyle]` | `IIframeTextareaCustomStyle` | `undefined` | Custom style cho iframe textarea |
|
|
181
|
+
| `[ignoreBlockInputMaxValue]` | `boolean` | `undefined` | Không chặn nhập quá max value |
|
|
182
|
+
| `[ignoreStopPropagationEvent]` | `boolean` | `undefined` | Không chặn propagation event |
|
|
183
|
+
| `[ignoreWidthInput100]` | `boolean` | `undefined` | Không set width 100% |
|
|
184
|
+
| `[keepPlaceholderOnly]` | `boolean` | `false` | Chỉ giữ placeholder (ẩn value) |
|
|
185
|
+
| `[keepZeroInTypeInt]` | `boolean` | `false` | Giữ số 0 ở đầu (int) |
|
|
186
|
+
| `[maxHeightTextArea]` | `number` | `250` | Max height cho textarea |
|
|
187
|
+
| `[maxLength]` | `number` | `undefined` | Max character length |
|
|
188
|
+
| `[maxLengthNumberCount]` | `number` | `undefined` | Max length cho phần số (bigint) |
|
|
189
|
+
| `[minHeightTextArea]` | `number` | `undefined` | Min height cho textarea |
|
|
190
|
+
| `[minValueNumber]` | `number` | `undefined` | Min value cho number input |
|
|
191
|
+
| `[maxValueNumber]` | `number` | `undefined` | Max value cho number input |
|
|
192
|
+
| `[noBorder]` | `boolean` | `false` | Ẩn border |
|
|
193
|
+
| `[onlyAcceptNegativeValue]` | `boolean` | `false` | Chỉ chấp nhận số âm |
|
|
194
|
+
| `[placeholder]` | `string` | `' '` | Placeholder text |
|
|
195
|
+
| `[popoverContentIconLeft]` | `string` | `''` | Popover content icon trái |
|
|
196
|
+
| `[popoverContentIconRight]` | `string` | `''` | Popover content icon phải |
|
|
197
|
+
| `[readonly]` | `boolean` | `false` | Readonly mode |
|
|
198
|
+
| `[resetAutoCompletePassword]` | `boolean` | `false` | Reset autocomplete cho password |
|
|
199
|
+
| `[resize]` | `TYPE_INPUT_RESIZE_MODE` | `'vertical'` | Resize mode |
|
|
200
|
+
| `[selectAllTimeOut]` | `number` | `600` | Delay time cho selectAll |
|
|
201
|
+
| `[setIconRightColorSameColorDisableReadOnly]` | `boolean` | `false` | Icon phải cùng màu disable text |
|
|
202
|
+
| `[showCount]` | `boolean` | `false` | Hiển thị character count |
|
|
203
|
+
| `[tabInsertContentTagInput]` | `boolean` | `false` | Cho phép dùng Tab để insert |
|
|
204
|
+
| `[tagInput]` | `TYPE_TAG_INPUT` | `'input'` | Tag type: input, textarea, iframe-textarea |
|
|
205
|
+
| `[templateLeftBottomInput]` | `TemplateRef<TYPE_TEMPLATE_REF>` | `undefined` | Template custom dưới trái |
|
|
206
|
+
| `[templateRightBottomInput]` | `TemplateRef<TYPE_TEMPLATE_REF>` | `undefined` | Template custom dưới phải |
|
|
207
|
+
| `[textAreaEnterNotNewLine]` | `boolean` | `false` | Enter không xuống dòng trong textarea |
|
|
208
|
+
| `[typeInput]` | `TYPE_INPUT` | `'text'` | Input type: text, number, password |
|
|
209
|
+
| `[useColorModeExist]` | `boolean` | `false` | Sử dụng màu sắc theo mode của hệ thống |
|
|
210
|
+
| `[value]` | `string \| number` | `''` | Input value (model binding) |
|
|
211
|
+
| `[valueUpDownNumber]` | `number` | `undefined` | Bước nhảy cho nút tăng giảm |
|
|
212
|
+
| `[zIndexPopoverContent]` | `number` | `10` | Z-index cho popover content |
|
|
213
|
+
|
|
214
|
+
**Note**: Component có 50+ inputs. Xem demo tại `/inputs/input` để biết chi tiết.
|
|
215
|
+
|
|
216
|
+
### Outputs
|
|
217
|
+
|
|
218
|
+
| Property | Type | Description |
|
|
219
|
+
| -------------------------------- | ------------------------------------------ | --------------------------------------------- |
|
|
220
|
+
| Property | Type | Description |
|
|
221
|
+
| -------------------------------- | ------------------------------------------ | -------------------------------------------- |
|
|
222
|
+
| `(outChange)` | `any` | Emit khi value thay đổi (two-way binding) |
|
|
223
|
+
| `(outChangeValueByButtonUpDown)` | `void` | Emit khi click button up/down |
|
|
224
|
+
| `(outEnterEvent)` | `IEvent` | Emit khi nhấn Enter |
|
|
225
|
+
| `(outFileDrop)` | `File` | Emit khi drop single file |
|
|
226
|
+
| `(outFilesDrop)` | `Array<File>` | Emit khi drop multiple files |
|
|
227
|
+
| `(outFocusAndBlurEvent)` | `IFocusAndBlurEvent` | Emit khi focus/blur |
|
|
228
|
+
| `(outFunctionsControl)` | `IInputFunctionControlEvent` | Emit function controls instance |
|
|
229
|
+
| `(outHeightAreaChange)` | `{ isChange: boolean; height: number; }` | Emit khi height textarea thay đổi auto-resize |
|
|
230
|
+
| `(outIconLeft)` | `string` | Emit khi click icon left |
|
|
231
|
+
| `(outIconRight)` | `string` | Emit khi click icon right |
|
|
232
|
+
| `(outInputEvent)` | `IEvent` | Emit pure input event (native) |
|
|
233
|
+
|
|
234
|
+
### FunctionsControl Methods
|
|
235
|
+
|
|
236
|
+
| Method | Description |
|
|
237
|
+
| ---------------------------- | ------------------------- |
|
|
238
|
+
| `focus(emitEvent?: boolean)` | Focus vào input |
|
|
239
|
+
| `blur(emitEvent?: boolean)` | Blur khỏi input |
|
|
240
|
+
| `insertContent(data)` | Insert content vào cursor |
|
|
241
|
+
| `resetValue()` | Reset value về empty |
|
|
242
|
+
| `getElementValue()` | Lấy value từ element |
|
|
243
|
+
| `selectAllContent()` | Select all content |
|
|
244
|
+
|
|
245
|
+
## Types
|
|
246
|
+
|
|
247
|
+
```typescript
|
|
248
|
+
type TYPE_INPUT = 'text' | 'number' | 'password';
|
|
249
|
+
type TYPE_DATA_TYPE_INPUT = 'string' | 'int' | 'float' | 'bigint';
|
|
250
|
+
type TYPE_TAG_INPUT = 'input' | 'textarea' | 'iframe-textarea';
|
|
251
|
+
type TYPE_INPUT_RESIZE_MODE = 'auto' | 'vertical' | 'horizontal' | 'none';
|
|
252
|
+
|
|
253
|
+
interface IInputFunctionControlEvent {
|
|
254
|
+
focus: (emitEvent?: boolean) => Promise<void>;
|
|
255
|
+
blur: (emitEvent?: boolean) => Promise<void>;
|
|
256
|
+
insertContent: (data: string | number) => Promise<void>;
|
|
257
|
+
resetValue: () => Promise<void>;
|
|
258
|
+
getElementValue: () => Promise<any> | undefined;
|
|
259
|
+
selectAllContent: () => Promise<void>;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
interface IIframeTextareaCustomStyle {
|
|
263
|
+
borderRadius?: string;
|
|
264
|
+
borderColor?: string;
|
|
265
|
+
padding?: string;
|
|
266
|
+
lineHeight?: string;
|
|
267
|
+
fontSize?: string;
|
|
268
|
+
height?: string;
|
|
269
|
+
color?: string;
|
|
270
|
+
backgroundColor?: string;
|
|
271
|
+
}
|
|
272
|
+
```
|
|
273
|
+
|
|
274
|
+
## Demo
|
|
275
|
+
|
|
276
|
+
```bash
|
|
277
|
+
npx nx serve core-ui
|
|
278
|
+
```
|
|
279
|
+
|
|
280
|
+
Truy cập: `http://localhost:4500/inputs/input`
|
|
281
|
+
|
|
282
|
+
## License
|
|
283
|
+
|
|
284
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-inputs-input",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.356-0",
|
|
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.
|
|
8
|
-
"@libs-ui/components-popover": "0.2.
|
|
9
|
-
"@libs-ui/interfaces-types": "0.2.
|
|
10
|
-
"@libs-ui/services-config-project": "0.2.
|
|
11
|
-
"@libs-ui/utils": "0.2.
|
|
7
|
+
"@libs-ui/components-buttons-sort": "0.2.356-0",
|
|
8
|
+
"@libs-ui/components-popover": "0.2.356-0",
|
|
9
|
+
"@libs-ui/interfaces-types": "0.2.356-0",
|
|
10
|
+
"@libs-ui/services-config-project": "0.2.356-0",
|
|
11
|
+
"@libs-ui/utils": "0.2.356-0",
|
|
12
12
|
"@ngx-translate/core": "^15.0.0",
|
|
13
13
|
"rxjs": "~7.8.0"
|
|
14
14
|
},
|