@libs-ui/components-inputs-multi-language 0.2.355-13 → 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 +111 -2
- package/package.json +10 -10
package/README.md
CHANGED
|
@@ -1,3 +1,112 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Multi-Language Input Component
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
`@libs-ui/components-inputs-multi-language` là một component mạnh mẽ hỗ trợ nhập liệu đa ngôn ngữ và đa tiền tệ trong các ứng dụng Angular. Component này cung cấp giao diện linh hoạt cho phép người dùng quản lý nội dung giữa nhiều ngôn ngữ khác nhau, hỗ trợ cả định dạng văn bản thuần túy, số học và trình chỉnh sửa văn bản giàu tính năng (Quill).
|
|
4
|
+
|
|
5
|
+
## Tính năng nổi bật
|
|
6
|
+
|
|
7
|
+
- 🌍 **Đa ngôn ngữ**: Hỗ trợ nhập liệu cho nhiều ngôn ngữ đồng thời, tự động quản lý danh sách ngôn ngữ kích hoạt.
|
|
8
|
+
- 💰 **Đa tiền tệ**: Chế độ `integer` cho phép nhập liệu các giá trị tiền tệ đi kèm với đơn vị tiền tệ tương ứng.
|
|
9
|
+
- 🛠️ **Đa dạng kiểu View**: Hỗ trợ `text`, `number`, `integer`, `float`, `editor` (Quill) và `textarea`.
|
|
10
|
+
- ✅ **Validation tích hợp**: Kiểm tra tính hợp lệ của dữ liệu (bắt buộc, độ dài tối thiểu/tối đa) cho từng ngôn ngữ.
|
|
11
|
+
- 🔄 **Quản lý linh hoạt**: Thêm/Xóa ngôn ngữ dễ dàng qua giao diện người dùng.
|
|
12
|
+
- 📱 **Responsive Layout**: Hỗ trợ hiển thị theo hàng (`row`) hoặc cột (`column`).
|
|
13
|
+
- 🎨 **Tùy biến giao diện**: Dễ dàng tùy chỉnh class CSS thông qua các inputs.
|
|
14
|
+
|
|
15
|
+
## Cài đặt
|
|
16
|
+
|
|
17
|
+
Sử dụng npm hoặc yarn để cài đặt:
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npm install @libs-ui/components-inputs-multi-language
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Cách sử dụng
|
|
24
|
+
|
|
25
|
+
### Import Module
|
|
26
|
+
|
|
27
|
+
```typescript
|
|
28
|
+
import { LibsUiComponentsInputsMultiLanguageComponent } from '@libs-ui/components-inputs-multi-language';
|
|
29
|
+
|
|
30
|
+
@Component({
|
|
31
|
+
standalone: true,
|
|
32
|
+
imports: [LibsUiComponentsInputsMultiLanguageComponent],
|
|
33
|
+
// ...
|
|
34
|
+
})
|
|
35
|
+
export class YourComponent {}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### Ví dụ cơ bản (Nhập liệu văn bản)
|
|
39
|
+
|
|
40
|
+
```html
|
|
41
|
+
<libs_ui-components-inputs-multi_language
|
|
42
|
+
[(dataLanguage)]="myData"
|
|
43
|
+
[placeholder]="'Nhập tiêu đề...'"
|
|
44
|
+
[titleField]="'Tiêu đề'"></libs_ui-components-inputs-multi_language>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
### Ví dụ nâng cao (Đa tiền tệ)
|
|
48
|
+
|
|
49
|
+
```html
|
|
50
|
+
<libs_ui-components-inputs-multi_language
|
|
51
|
+
[viewType]="'integer'"
|
|
52
|
+
[(dataLanguage)]="priceData"
|
|
53
|
+
[titleField]="'Giá sản phẩm'"></libs_ui-components-inputs-multi_language>
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## API Reference
|
|
57
|
+
|
|
58
|
+
### Inputs
|
|
59
|
+
|
|
60
|
+
| Thuộc tính | Kiểu dữ liệu | Mặc định | Mô tả |
|
|
61
|
+
| :---------------- | :------------------------- | :---------------- | :----------------------------------------------------------------------- |
|
|
62
|
+
| `optionsLanguage` | `Array<IOption>` | `langOptions()` | Danh sách các tùy chọn ngôn ngữ/tiền tệ. |
|
|
63
|
+
| `viewType` | `TYPE_VIEW_MULTI_LANGUAGE` | `'text'` | Kiểu hiển thị: `text`, `integer`, `number`, `editor`, `float`, `bigint`. |
|
|
64
|
+
| `singleLanguage` | `boolean` | `false` | Nếu `true`, chỉ cho phép hiển thị một ngôn ngữ duy nhất. |
|
|
65
|
+
| `dataLanguage` | `IDataMultiLanguage` | `{}` | **(Model)** Dữ liệu ngôn ngữ hiện tại. |
|
|
66
|
+
| `data` | `Array<IDataItem>` | `[]` | **(Model)** Cấu hình các item nhập liệu bên trong. |
|
|
67
|
+
| `validRequired` | `IValidRequired` | `validRequired()` | Cấu hình validation bắt buộc. |
|
|
68
|
+
| `titleField` | `string` | `undefined` | Tiêu đề chung cho các trường nhập liệu. |
|
|
69
|
+
| `placeholder` | `string` | `undefined` | Placeholder cho các input. |
|
|
70
|
+
| `viewPosition` | `'row' \| 'column'` | `'row'` | Hướng hiển thị của label và input. |
|
|
71
|
+
| `ignoreRemove` | `boolean` | `false` | Nếu `true`, ẩn nút xóa ngôn ngữ. |
|
|
72
|
+
| `readonly` | `boolean` | `false` | Chế độ chỉ đọc. |
|
|
73
|
+
| `zIndex` | `number` | `undefined` | Z-index cho các thành phần dropdown/popover. |
|
|
74
|
+
|
|
75
|
+
### Outputs
|
|
76
|
+
|
|
77
|
+
| Sự kiện | Kiểu dữ liệu | Mô tả |
|
|
78
|
+
| :---------------------- | :---------------------------------------- | :------------------------------------------------------------------------- |
|
|
79
|
+
| `outEventMultiLanguage` | `IEventMultiLanguage` | Phát ra khi có hành động thêm hoặc xóa ngôn ngữ. |
|
|
80
|
+
| `outFunctionsControl` | `IInputMultiLanguageFunctionControlEvent` | Cung cấp các phương thức điều khiển component (`checkIsValid`, `getData`). |
|
|
81
|
+
| `outChangeValueInput` | `void` | Phát ra khi giá trị trong bất kỳ input nào thay đổi. |
|
|
82
|
+
|
|
83
|
+
## Types & Interfaces
|
|
84
|
+
|
|
85
|
+
```typescript
|
|
86
|
+
export interface IDataItem {
|
|
87
|
+
keyBindData?: string;
|
|
88
|
+
placeholder?: string;
|
|
89
|
+
type?: string;
|
|
90
|
+
isOneValue?: boolean;
|
|
91
|
+
titleField?: string;
|
|
92
|
+
validRequired?: IValidRequired;
|
|
93
|
+
// ...
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
export interface IDataMultiLanguage {
|
|
97
|
+
[param: string]: IDataLanguage | string | number;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
export type TYPE_VIEW_MULTI_LANGUAGE = 'text' | 'integer' | 'number' | 'editor' | 'float' | 'bigint';
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
## Tech Stack
|
|
104
|
+
|
|
105
|
+
- **Framework**: Angular 18+
|
|
106
|
+
- **Styling**: Tailwind CSS
|
|
107
|
+
- **Utilities**: `@libs-ui/utils`
|
|
108
|
+
- **I18n**: `@ngx-translate/core`
|
|
109
|
+
|
|
110
|
+
## License
|
|
111
|
+
|
|
112
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-inputs-multi-language",
|
|
3
|
-
"version": "0.2.355-
|
|
3
|
+
"version": "0.2.355-15",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/common": ">=18.0.0",
|
|
6
6
|
"@angular/core": ">=18.0.0",
|
|
7
|
-
"@libs-ui/components-inputs-valid": "0.2.355-
|
|
8
|
-
"@libs-ui/components-buttons-button": "0.2.355-
|
|
9
|
-
"@libs-ui/utils": "0.2.355-
|
|
7
|
+
"@libs-ui/components-inputs-valid": "0.2.355-15",
|
|
8
|
+
"@libs-ui/components-buttons-button": "0.2.355-15",
|
|
9
|
+
"@libs-ui/utils": "0.2.355-15",
|
|
10
10
|
"@ngx-translate/core": "^15.0.0",
|
|
11
|
-
"@libs-ui/components-dropdown": "0.2.355-
|
|
12
|
-
"@libs-ui/components-popover": "0.2.355-
|
|
11
|
+
"@libs-ui/components-dropdown": "0.2.355-15",
|
|
12
|
+
"@libs-ui/components-popover": "0.2.355-15",
|
|
13
13
|
"rxjs": "~7.8.0",
|
|
14
|
-
"@libs-ui/pipes-escape-html": "0.2.355-
|
|
15
|
-
"@libs-ui/components-inputs-quill": "0.2.355-
|
|
16
|
-
"@libs-ui/components-list": "0.2.355-
|
|
17
|
-
"@libs-ui/services-http-request": "0.2.355-
|
|
14
|
+
"@libs-ui/pipes-escape-html": "0.2.355-15",
|
|
15
|
+
"@libs-ui/components-inputs-quill": "0.2.355-15",
|
|
16
|
+
"@libs-ui/components-list": "0.2.355-15",
|
|
17
|
+
"@libs-ui/services-http-request": "0.2.355-15"
|
|
18
18
|
},
|
|
19
19
|
"sideEffects": false,
|
|
20
20
|
"module": "fesm2022/libs-ui-components-inputs-multi-language.mjs",
|