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.