@libs-ui/components-buttons-sort 0.2.279 → 0.2.281
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +134 -2
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,3 +1,135 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Sort
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
## Giới thiệu
|
|
4
|
+
|
|
5
|
+
`@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.
|
|
6
|
+
|
|
7
|
+
## Tính năng
|
|
8
|
+
|
|
9
|
+
- Hiển thị icon `asc` và `desc` với kích thước tuỳ chỉnh
|
|
10
|
+
- Two-way binding cho chế độ sort (`mode`)
|
|
11
|
+
- Tuỳ chọn fieldSort để gắn tên trường sắp xếp
|
|
12
|
+
- Hỗ trợ disable toàn bộ sort hoặc riêng `asc` / `desc`
|
|
13
|
+
- `onlyEmit` để chỉ emit sự kiện mà không tự thay đổi chế độ
|
|
14
|
+
- Emit `ISort` bao gồm `mode`, `modeNumber`, `fieldSort` và hàm `reset()`
|
|
15
|
+
|
|
16
|
+
## Cài đặt
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install @libs-ui/components-buttons-sort
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
hoặc
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
yarn add @libs-ui/components-buttons-sort
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## Sử dụng
|
|
29
|
+
|
|
30
|
+
### Inline Template
|
|
31
|
+
|
|
32
|
+
```typescript
|
|
33
|
+
import { Component } from '@angular/core';
|
|
34
|
+
import { LibsUiComponentsButtonsSortComponent } from '@libs-ui/components-buttons-sort';
|
|
35
|
+
import { TYPE_SORT_TYPE } from '@libs-ui/components-buttons-sort';
|
|
36
|
+
|
|
37
|
+
@Component({
|
|
38
|
+
selector: 'app-example',
|
|
39
|
+
standalone: true,
|
|
40
|
+
imports: [LibsUiComponentsButtonsSortComponent],
|
|
41
|
+
template: `
|
|
42
|
+
<libs_ui-components-buttons-sort
|
|
43
|
+
[size]="20"
|
|
44
|
+
[(mode)]="demoMode"
|
|
45
|
+
[fieldSort]="'name'"
|
|
46
|
+
(outChange)="onSort($event)">
|
|
47
|
+
</libs_ui-components-buttons-sort>
|
|
48
|
+
`
|
|
49
|
+
})
|
|
50
|
+
export class ExampleComponent {
|
|
51
|
+
demoMode: TYPE_SORT_TYPE = '';
|
|
52
|
+
onSort(event: any) {
|
|
53
|
+
console.log('Sorted:', event);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### File HTML riêng
|
|
59
|
+
|
|
60
|
+
```typescript
|
|
61
|
+
import { Component } from '@angular/core';
|
|
62
|
+
import { LibsUiComponentsButtonsSortComponent } from '@libs-ui/components-buttons-sort';
|
|
63
|
+
import { TYPE_SORT_TYPE } from '@libs-ui/components-buttons-sort';
|
|
64
|
+
|
|
65
|
+
@Component({
|
|
66
|
+
selector: 'app-example',
|
|
67
|
+
standalone: true,
|
|
68
|
+
imports: [LibsUiComponentsButtonsSortComponent],
|
|
69
|
+
templateUrl: './example.component.html'
|
|
70
|
+
})
|
|
71
|
+
export class ExampleComponent {
|
|
72
|
+
demoMode: TYPE_SORT_TYPE = '';
|
|
73
|
+
onSort(event: any) { }
|
|
74
|
+
}
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
```html
|
|
78
|
+
<libs_ui-components-buttons-sort
|
|
79
|
+
[size]="20"
|
|
80
|
+
[(mode)]="demoMode"
|
|
81
|
+
[fieldSort]="'name'"
|
|
82
|
+
(outChange)="onSort($event)">
|
|
83
|
+
</libs_ui-components-buttons-sort>
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
## Công nghệ sử dụng
|
|
87
|
+
|
|
88
|
+
- **Angular 18** với standalone components và Signals
|
|
89
|
+
- **Tailwind CSS** 3.x (phong cách demo)
|
|
90
|
+
|
|
91
|
+
## API Reference
|
|
92
|
+
|
|
93
|
+
### Inputs
|
|
94
|
+
|
|
95
|
+
| Tên | Kiểu | Mặc định | Mô tả |
|
|
96
|
+
|-------------|-------------------|----------|---------------------------------------------------------|
|
|
97
|
+
| size | `number` | `10` | Độ lớn của icon sắp xếp (px). |
|
|
98
|
+
| mode | `TYPE_SORT_TYPE` | `''` | Thứ tự hiện tại ('asc', 'desc' hoặc không sắp xếp). |
|
|
99
|
+
| fieldSort | `string` | `''` | Trường dữ liệu dùng để sắp xếp. |
|
|
100
|
+
| disable | `boolean` | `false` | Nếu true: tắt chức năng sắp xếp. |
|
|
101
|
+
| disableAsc | `boolean` | `false` | Nếu true: vô hiệu hóa chế độ sắp xếp tăng dần. |
|
|
102
|
+
| disableDesc | `boolean` | `false` | Nếu true: vô hiệu hóa chế độ sắp xếp giảm dần. |
|
|
103
|
+
| onlyEmit | `boolean` | `false` | Nếu true: chỉ phát sự kiện, không tự thay đổi chế độ. |
|
|
104
|
+
|
|
105
|
+
### Outputs
|
|
106
|
+
|
|
107
|
+
| Tên | Kiểu | Mô tả |
|
|
108
|
+
|------------|--------------------------|---------------------------------------------------|
|
|
109
|
+
| outChange | `(event: ISort) => void` | Trả về đối tượng ISort khi trạng thái sắp xếp thay đổi. |
|
|
110
|
+
|
|
111
|
+
### Interfaces
|
|
112
|
+
|
|
113
|
+
#### `ISort`
|
|
114
|
+
```typescript
|
|
115
|
+
export interface ISort {
|
|
116
|
+
mode: TYPE_SORT_TYPE;
|
|
117
|
+
modeNumber: 1 | 2;
|
|
118
|
+
fieldSort: string;
|
|
119
|
+
reset: () => void;
|
|
120
|
+
}
|
|
121
|
+
```
|
|
122
|
+
Mô tả:
|
|
123
|
+
- `mode`: `'asc'`, `'desc'` hoặc `''` (không sắp xếp).
|
|
124
|
+
- `modeNumber`: số tương ứng (1 = `'asc'`, 2 = `'desc'`).
|
|
125
|
+
- `fieldSort`: tên trường dữ liệu dùng để sắp xếp.
|
|
126
|
+
- `reset()`: hàm đặt lại về trạng thái không sắp xếp.
|
|
127
|
+
|
|
128
|
+
#### `TYPE_SORT_TYPE`
|
|
129
|
+
```typescript
|
|
130
|
+
export type TYPE_SORT_TYPE = 'asc' | 'desc' | '';
|
|
131
|
+
```
|
|
132
|
+
Mô tả:
|
|
133
|
+
- `'asc'`: sắp xếp tăng dần.
|
|
134
|
+
- `'desc'`: sắp xếp giảm dần.
|
|
135
|
+
- `''`: không sắp xếp.
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-buttons-sort",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.281",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/core": "^18.2.0",
|
|
6
|
-
"@libs-ui/components-popover": "
|
|
6
|
+
"@libs-ui/components-popover": "0.2.281"
|
|
7
7
|
},
|
|
8
8
|
"sideEffects": false,
|
|
9
9
|
"module": "fesm2022/libs-ui-components-buttons-sort.mjs",
|