Search Input Component

@libs-ui/components-inputs-search là một thành phần nhập liệu chuyên dụng cho tính năng tìm kiếm. Nó được xây dựng dựa trên LibsUiComponentsInputsInputComponent và bổ sung các tính năng như tự động kích hoạt tìm kiếm sau một khoảng thời gian chờ (debounce), nút xóa nội dung tìm kiếm nhanh, và hỗ trợ các biểu tượng tùy chỉnh.

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

• 🔍 Auto-complete Search: Tự động phát ra sự kiện tìm kiếm sau khi người dùng ngừng nhập (mặc định 1 giây).
• ⚡ Debounce & Throttle: Tích hợp sẵn cơ chế debounce cho việc nhập liệu và throttle cho phím Enter.
• 🧹 Clearable Support: Hỗ trợ nút xóa (hasClearSearch) xuất hiện khi có nội dung trong ô tìm kiếm.
• 🎨 Flexible Styling: Dễ dàng tùy chỉnh border, background, chiều cao và các class CSS bổ sung.
• ⌨️ Keyboard Support: Hỗ trợ phím Enter để kích hoạt tìm kiếm ngay lập tức.
• 🛡️ Signal Based: Hoạt động mượt mà với Angular Signals.

Cài đặt

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

npm install @libs-ui/components-inputs-search

Cách sử dụng

Import Module

import { LibsUiComponentsInputsSearchComponent } from '@libs-ui/components-inputs-search';

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

Ví dụ cơ bản

<libs_ui-components-inputs-search
  (outSearch)="onSearch($event)"
  [searchConfig]="{
    placeholder: 'Tìm kiếm khách hàng...',
    hasClearSearch: true
  }"></libs_ui-components-inputs-search>

Tùy chỉnh Debounce và Icon

<libs_ui-components-inputs-search
  [debounceTime]="500"
  [searchConfig]="{
    iconLeftClass: 'libs-ui-icon-filter',
    placeholder: 'Lọc nhanh...'
  }"
  (outSearch)="handleFastFilter($event)"></libs_ui-components-inputs-search>

API Reference

Inputs

| Thuộc tính | Kiểu dữ liệu | Mặc định | Mô tả | | :--------------------------- | :------------------- | :------- | :-------------------------------------------------------- | | searchConfig | IInputSearchConfig | {} | Cấu hình cho ô tìm kiếm (placeholder, value, icons, ...). | | blurTimeOut | number | 600 | Thời gian chờ trước khi emit sự kiện blur. | | debounceTime | number | 1000 | Thời gian chờ (ms) trước khi phát ra outSearch. | | disable | boolean | false | Vô hiệu hóa ô tìm kiếm. | | focusTimeOut | number | 600 | Thời gian chờ trước khi emit sự kiện focus. | | ignoreAutoComplete | boolean | false | Nếu true, sẽ không tự động emit outSearch. | | ignoreStopPropagationEvent | boolean | false | Ngăn chặn sự kiện lan truyền ra ngoài. | | readonly | boolean | false | Chế độ chỉ đọc. |

Outputs

| Sự kiện | Kiểu dữ liệu | Mô tả | | :-------------------- | :--------------------------- | :--------------------------------------------------------------------------- | | outFocusAndBlur | IFocusAndBlurEvent | Sự kiện focus và blur. | | outFunctionsControl | IInputFunctionControlEvent | Cung cấp các phương thức điều khiển (focus, blur, ...). | | outIconLeft | string | Sự kiện khi click vào icon bên trái. | | outIconRight | string | Sự kiện khi click vào icon bên phải. | | outSearch | string | Phát ra nội dung tìm kiếm sau khoảng thời gian debounce hoặc khi nhấn Enter. | | outValueChange | string | Phát ra nội dung mới ngay lập tức mỗi khi gõ phím. |

Types & Interfaces

IInputSearchConfig

Giao diện cấu hình toàn diện cho component Search.

export interface IInputSearchConfig {
  classInclude?: string;
  classContainerInput?: string;
  placeholder?: string;
  value?: string;
  noBorder?: boolean;
  backgroundNone?: boolean;
  iconLeftClass?: string;
  iconRightClass?: string;
  defaultHeight?: number;
  classCoverInputSearch?: string;
  hasClearSearch?: boolean;
  popoverContentIconRight?: string;
}

IInputFunctionControlEvent

Được kế thừa từ component Input cơ bản để điều khiển hành vi.

export interface IInputFunctionControlEvent {
  focus: (emitEvent?: boolean) => Promise<void>;
  blur: (emitEvent?: boolean) => Promise<void>;
  resetValue: () => Promise<void>;
  insertContent: (data: string | number) => Promise<void>;
  // ... and other methods from @libs-ui/components-inputs-input
}

export interface IFocusAndBlurEvent {
  focus: boolean;
  event: FocusEvent;
}

Tech Stack

• Core: Angular 18+, RxJS (Subject, debounceTime, throttleTime)
• Base: @libs-ui/components-inputs-input

License

MIT