@libs-ui/components-buttons-sort

Sort

Giới thiệu

@libs-ui/components-buttons-sort là một component Sort Button cho Angular, hiển thị hai biểu tượng sắp xếp tăng dần và giảm dần, hỗ trợ binding trạng thái và emit event khi thay đổi.

Tính năng

• Hiển thị icon asc và desc với kích thước tuỳ chỉnh
• Two-way binding cho chế độ sort (mode)
• Tuỳ chọn fieldSort để gắn tên trường sắp xếp
• Hỗ trợ disable toàn bộ sort hoặc riêng asc / desc
• onlyEmit để chỉ emit sự kiện mà không tự thay đổi chế độ
• Emit ISort bao gồm mode, modeNumber, fieldSort và hàm reset()

Cài đặt

npm install @libs-ui/components-buttons-sort

hoặc

yarn add @libs-ui/components-buttons-sort

Sử dụng

Inline Template

import { Component } from '@angular/core';
import { LibsUiComponentsButtonsSortComponent } from '@libs-ui/components-buttons-sort';
import { TYPE_SORT_TYPE } from '@libs-ui/components-buttons-sort';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [LibsUiComponentsButtonsSortComponent],
  template: `
    <libs_ui-components-buttons-sort
      [size]="20"
      [(mode)]="demoMode"
      [fieldSort]="'name'"
      (outChange)="onSort($event)">
    </libs_ui-components-buttons-sort>
  `
})
export class ExampleComponent {
  demoMode: TYPE_SORT_TYPE = '';
  onSort(event: any) {
    console.log('Sorted:', event);
  }
}

File HTML riêng

import { Component } from '@angular/core';
import { LibsUiComponentsButtonsSortComponent } from '@libs-ui/components-buttons-sort';
import { TYPE_SORT_TYPE } from '@libs-ui/components-buttons-sort';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [LibsUiComponentsButtonsSortComponent],
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  demoMode: TYPE_SORT_TYPE = '';
  onSort(event: any) { }
}

<libs_ui-components-buttons-sort
  [size]="20"
  [(mode)]="demoMode"
  [fieldSort]="'name'"
  (outChange)="onSort($event)">
</libs_ui-components-buttons-sort>

Công nghệ sử dụng

• Angular 18 với standalone components và Signals
• Tailwind CSS 3.x (phong cách demo)

API Reference

Inputs

Tên	Kiểu	Mặc định	Mô tả
size	number	10	Độ lớn của icon sắp xếp (px).
mode	TYPE_SORT_TYPE	''	Thứ tự hiện tại ('asc', 'desc' hoặc không sắp xếp).
fieldSort	string	''	Trường dữ liệu dùng để sắp xếp.
disable	boolean	false	Nếu true: tắt chức năng sắp xếp.
disableAsc	boolean	false	Nếu true: vô hiệu hóa chế độ sắp xếp tăng dần.
disableDesc	boolean	false	Nếu true: vô hiệu hóa chế độ sắp xếp giảm dần.
onlyEmit	boolean	false	Nếu true: chỉ phát sự kiện, không tự thay đổi chế độ.

Outputs

Tên	Kiểu	Mô tả
outChange	(event: ISort) => void	Trả về đối tượng ISort khi trạng thái sắp xếp thay đổi.

Interfaces

ISort

export interface ISort {
  mode: TYPE_SORT_TYPE;
  modeNumber: 1 | 2;
  fieldSort: string;
  reset: () => void;
}

Mô tả:

• mode: 'asc', 'desc' hoặc '' (không sắp xếp).
• modeNumber: số tương ứng (1 = 'asc', 2 = 'desc').
• fieldSort: tên trường dữ liệu dùng để sắp xếp.
• reset(): hàm đặt lại về trạng thái không sắp xếp.

TYPE_SORT_TYPE

export type TYPE_SORT_TYPE = 'asc' | 'desc' | '';

Mô tả:

• 'asc': sắp xếp tăng dần.
• 'desc': sắp xếp giảm dần.
• '': không sắp xếp.