Multi-Language Input Component

@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).

Tính năng nổi bật

• 🌍 Đ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.
• 💰 Đ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.
• 🛠️ Đa dạng kiểu View: Hỗ trợ text, number, integer, float, editor (Quill) và textarea.
• ✅ 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ữ.
• 🔄 Quản lý linh hoạt: Thêm/Xóa ngôn ngữ dễ dàng qua giao diện người dùng.
• 📱 Responsive Layout: Hỗ trợ hiển thị theo hàng (row) hoặc cột (column).
• 🎨 Tùy biến giao diện: Dễ dàng tùy chỉnh class CSS thông qua các inputs.

Cài đặt

Sử dụng npm hoặc yarn để cài đặt:

npm install @libs-ui/components-inputs-multi-language

Cách sử dụng

Import Module

import { LibsUiComponentsInputsMultiLanguageComponent } from '@libs-ui/components-inputs-multi-language';

@Component({
  standalone: true,
  imports: [LibsUiComponentsInputsMultiLanguageComponent],
  // ...
})
export class YourComponent {}

Ví dụ cơ bản (Nhập liệu văn bản)

<libs_ui-components-inputs-multi_language
  [(dataLanguage)]="myData"
  [placeholder]="'Nhập tiêu đề...'"
  [titleField]="'Tiêu đề'"></libs_ui-components-inputs-multi_language>

Ví dụ nâng cao (Đa tiền tệ)

<libs_ui-components-inputs-multi_language
  [viewType]="'integer'"
  [(dataLanguage)]="priceData"
  [titleField]="'Giá sản phẩm'"></libs_ui-components-inputs-multi_language>

API Reference

Inputs

| Thuộc tính | Kiểu dữ liệu | Mặc định | Mô tả | | :----------------------------- | :------------------------- | :------------------- | :----------------------------------------------------------------------- | | acceptNegativeValue | boolean | undefined | Cho phép nhập số âm. | | classIncludeKey | string | 'libs-ui-font-h4r' | Class cho phần hiển thị key (label). | | classIncludeValue | string | 'libs-ui-font-h4s' | Class cho phần hiển thị value. | | countCharacters | boolean | undefined | Hiển thị bộ đếm ký tự. | | data | Array<IDataItem> | [] | (Model) Cấu hình các item nhập liệu bên trong. | | dataLanguage | IDataMultiLanguage | {} | (Model) Dữ liệu ngôn ngữ hiện tại. | | extendClass | string | undefined | Class mở rộng cho container chính. | | extendClassContent | string | undefined | Class mở rộng cho phần nội dung input. | | ignoreAdd | boolean | undefined | Ẩn nút thêm ngôn ngữ mới. | | ignoreRemove | boolean | undefined | Ẩn nút xóa ngôn ngữ. | | keyHeader | string | undefined | Key dùng để hiển thị header (nếu có). | | maxValueNumber | number | undefined | Giá trị tối đa cho input số. | | multiLine | boolean | undefined | Cho phép nhập nhiều dòng (textarea). | | onlyAcceptNegativeValue | boolean | undefined | Chỉ chấp nhận giá trị âm. | | optionsLanguage | Array<IOption> | langOptions() | Danh sách các tùy chọn ngôn ngữ/tiền tệ. | | placeholder | string | undefined | Placeholder cho các input. | | readonly | boolean | false | Chế độ chỉ đọc. | | singleLanguage | boolean | undefined | Đơn ngôn ngữ (chỉ hiển thị 1 ngôn ngữ mặc định). | | textArea | boolean | undefined | Sử dụng textarea thay vì input text. | | titleField | string | undefined | Tiêu đề chung cho các trường nhập liệu. | | validMaxLength | IValidLength | { length: 0 } | Cấu hình độ dài tối đa cho validation. | | validMinLength | IValidLength | undefined | Cấu hình độ dài tối thiểu cho validation. | | validOneDefaultMultiLanguage | string | undefined | Key ngôn ngữ mặc định bắt buộc nhập nếu chỉ nhập 1 ngôn ngữ | | validRequired | IValidRequired | validRequired() | Cấu hình validation bắt buộc. | | valueUpDownNumber | number | undefined | Bước nhảy cho nút tăng giảm giá trị số. | | viewContent | boolean | undefined | Chỉ hiển thị nội dung (view mode), không phải input. | | viewPosition | 'row' \| 'column' | 'row' | Hướng hiển thị của label và input. | | viewType | TYPE_VIEW_MULTI_LANGUAGE | 'text' | Kiểu hiển thị: text, integer, number, editor, float, bigint. | | zIndex | number | undefined | Z-index cho các thành phần dropdown/popover. |

Outputs

| Sự kiện | Kiểu dữ liệu | Mô tả | | :---------------------- | :---------------------------------------- | :------------------------------------------------------------------------- | | outChangeTypeLanguage | boolean | Phát ra khi thay đổi loại ngôn ngữ (đơn/đa). | | outChangeValueInput | void | Phát ra khi giá trị trong bất kỳ input nào thay đổi. | | outEventMultiLanguage | IEventMultiLanguage | Phát ra khi có hành động thêm hoặc xóa ngôn ngữ. | | outFunctionsControl | IInputMultiLanguageFunctionControlEvent | Cung cấp các phương thức điều khiển component (checkIsValid, getData). |

Types & Interfaces

export interface IDataItem {
  keyBindData?: string;
  placeholder?: string;
  type?: string;
  header?: IConfigMultiLanguageHeader;
  isOneValue?: boolean;
  classIncludeInput?: string;
  titleField?: string;
  isCountCharacters?: boolean;
  validRequired?: IValidRequired;
  dataMultiLanguage?: IDataMultiLanguage;
  validRequiredLangDefault?: IValidRequired;
  validRequiredDefault?: IValidRequired;
}

export interface IConfigMultiLanguageHeader {
  title?: string;
  isShowInput?: boolean;
  validRequired?: {
    isRequired?: boolean;
  };
  keyBindData?: string;
  dataDefault?:
    | IDataMultiLanguage
    | {
        total?: IDataMultiLanguage;
      };
  type?: string;
}

export interface IDataMultiLanguage {
  [param: string]: IDataLanguage | string | number;
}

export interface IDataLanguage {
  [param: string]: string | number;
}

export interface IEventMultiLanguage {
  action: 'add' | 'remove';
  data: IDataMultiLanguage;
}

export type TYPE_VIEW_MULTI_LANGUAGE = 'text' | 'integer' | 'number' | 'editor' | 'float' | 'bigint';

export interface IInputMultiLanguageFunctionControlEvent {
  checkIsValid: () => Promise<boolean>;
  getData: () => Promise<IDataMultiLanguage[] | IDataMultiLanguage | undefined>;
}

export interface IOption {
  label: string;
  key: string;
}

export interface ICurrencyUnit {
  label: string;
  id: string;
  type: string;
}

Tech Stack

• Framework: Angular 18+
• Styling: Tailwind CSS
• Utilities: @libs-ui/utils
• I18n: @ngx-translate/core

License

MIT