@libs-ui/components-inputs-calculator

Component Calculator nâng cao hỗ trợ nhập liệu biểu thức toán học kết hợp với các trường dữ liệu động.

Giới thiệu

LibsUiComponentsInputsCalculatorComponent là một standalone Angular component cho phép người dùng xây dựng các công thức tính toán phức tạp bằng cách kết hợp các phím số, toán tử và các trường dữ liệu từ hệ thống.

Tính năng

• ✅ Token-based Input: Hiển thị biểu thức dưới dạng các khối (tokens) trực quan.
• ✅ Dynamic Fields: Tích hợp với Popover và List để chọn tham số động.
• ✅ Keyboard Shortcuts: Hỗ trợ đầy đủ phím số và phím toán tử.
• ✅ Smart Editing: Cơ chế xóa thông minh (Backspace/Delete) tại vị trí cursor.
• ✅ OnPush Change Detection: Tối ưu hiệu năng.
• ✅ Angular Signals: Quản lý state hiện đại.

Khi nào sử dụng

• Xây dựng trình soạn thảo công thức (Formula Editor).
• Cấu hình các biểu thức tính toán lương, doanh thu, hoặc các chỉ số kinh doanh.
• Khi cần một giao diện nhập liệu toán học an toàn, ngăn chặn nhập text tự do không hợp lệ.

Cài đặt

# npm
npm install @libs-ui/components-inputs-calculator

Import

import { LibsUiComponentsInputsCalculatorComponent } from '@libs-ui/components-inputs-calculator';

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

Ví dụ

Cơ bản

<libs_ui-components-inputs-calculator
  [configField]="calculatorConfig"
  (outChangeExpressions)="onSave($event)" />

Với giá trị khởi tạo

<libs_ui-components-inputs-calculator
  [configField]="calculatorConfig"
  [expressions]="initialExpressions" />

API

libs_ui-components-inputs-calculator

Inputs

| Property | Type | Default | Description | | ------------------------ | ----------------------------------- | ------------------------- | ----------------------------------------- | | [classContainerButton] | string | '' | Class CSS cho container chứa các nút bấm. | | [classContainerInput] | string | '' | Class CSS cho vùng hiển thị biểu thức. | | [classInclude] | string | '' | Class CSS cho wrapper ngoài cùng. | | [configField] | IInputCalculatorConfigField | - | Bắt buộc. Cấu hình chọn field. | | [expressions] | Array<IInputCalculatorExpression> | [] | Danh sách biểu thức mặc định. | | [ignoreButtonSave] | boolean | false | Ẩn/hiện nút Save mặc định. | | [labelButtonSave] | string | 'i18n_save_calculation' | Nhãn nút Save. | | [placeholder] | string | 'i18n_enter_params' | Placeholder khi trống. | | [validRequired] | IInputCalculatorValid | - | Cấu hình validation rỗng. | | [zIndex] | number | 10 | Z-index cho popover list. |

Outputs

| Property | Type | Description | | ------------------------ | ---------------------------------------------------- | ------------------------------ | | (outChangeExpressions) | EventEmitter<Array<IInputCalculatorExpression>> | Phát ra khi nhấn Save. | | (outFunctionControl) | EventEmitter<IInputCalculatorFunctionControlEvent> | Cung cấp interface điều khiển. |

Methods (via outFunctionControl)

| Method | Parameters | Description | | ---------------- | ---------- | ---------------------------------------------------- | | checkIsValid() | - | Kiểm tra xem biểu thức có hợp lệ (không rỗng) không. | | getData() | - | Trả về danh sách biểu thức hiện tại. |

Types & Interfaces

export interface IInputCalculatorExpression {
  type: 'value' | 'field' | 'operation';
  data: string | number;
}

export interface IInputCalculatorConfigField {
  label?: string;
  placeholderInputList?: string;
  listConfig: IListConfigItem;
  getFieldSelected: (field: string) => IInputCalculatorField | undefined;
}

Demo

Truy cập: http://localhost:4500/inputs/calculator

License

MIT