@libs-ui/components-buttons-status 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 +136 -2
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,3 +1,137 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Button Status
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
## Giới thiệu
|
|
4
|
+
|
|
5
|
+
`@libs-ui/components-buttons-status` là một component hiển thị trạng thái dưới dạng button, hỗ trợ nhiều kiểu màu khác nhau và tuỳ chỉnh thông tin popover.
|
|
6
|
+
|
|
7
|
+
## Tính năng
|
|
8
|
+
|
|
9
|
+
- Hiển thị nhãn và icon status (nếu cấu hình)
|
|
10
|
+
- Hỗ trợ nhiều kiểu màu trạng thái qua input `type` (`blue`, `green`, `red`, `orange`, `yellow`, `cyan`, `purple`, `brown`, `other`)
|
|
11
|
+
- Cho phép cấu hình màu và background riêng cho type `other`
|
|
12
|
+
- Hỗ trợ popover cho icon bên trái hoặc phải qua `popoverIconLeft`/`popoverIconRight`
|
|
13
|
+
- Tuỳ chỉnh CSS classes: `classInclude`, `classLabelInclude`, `classIconLeft`, `classIconRight`
|
|
14
|
+
- Kích thước tự động phù hợp với nội dung
|
|
15
|
+
|
|
16
|
+
## Cài đặt
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install @libs-ui/components-buttons-status
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
hoặc
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
yarn add @libs-ui/components-buttons-status
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## Sử dụng
|
|
29
|
+
|
|
30
|
+
### Inline Template
|
|
31
|
+
|
|
32
|
+
```typescript
|
|
33
|
+
import { Component } from '@angular/core';
|
|
34
|
+
import { LibsUiComponentsButtonsStatusComponent, IButtonStatus, TYPE_BUTTON_STATUS } from '@libs-ui/components-buttons-status';
|
|
35
|
+
|
|
36
|
+
@Component({
|
|
37
|
+
selector: 'app-example',
|
|
38
|
+
standalone: true,
|
|
39
|
+
imports: [LibsUiComponentsButtonsStatusComponent],
|
|
40
|
+
template: `
|
|
41
|
+
<libs_ui-components-buttons-status
|
|
42
|
+
[config]="statusConfig">
|
|
43
|
+
</libs_ui-components-buttons-status>
|
|
44
|
+
`
|
|
45
|
+
})
|
|
46
|
+
export class ExampleComponent {
|
|
47
|
+
statusConfig: IButtonStatus = {
|
|
48
|
+
label: 'Đang hoạt động',
|
|
49
|
+
type: 'green'
|
|
50
|
+
};
|
|
51
|
+
}
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
### File HTML riêng
|
|
55
|
+
|
|
56
|
+
```typescript
|
|
57
|
+
import { Component } from '@angular/core';
|
|
58
|
+
import { LibsUiComponentsButtonsStatusComponent, IButtonStatus } from '@libs-ui/components-buttons-status';
|
|
59
|
+
|
|
60
|
+
@Component({
|
|
61
|
+
selector: 'app-example',
|
|
62
|
+
standalone: true,
|
|
63
|
+
imports: [LibsUiComponentsButtonsStatusComponent],
|
|
64
|
+
templateUrl: './example.component.html'
|
|
65
|
+
})
|
|
66
|
+
export class ExampleComponent {
|
|
67
|
+
statusConfig: IButtonStatus = { label: 'Đang chờ', type: 'yellow' };
|
|
68
|
+
}
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
```html
|
|
72
|
+
<libs_ui-components-buttons-status
|
|
73
|
+
[config]="statusConfig">
|
|
74
|
+
</libs_ui-components-buttons-status>
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
## Công nghệ sử dụng
|
|
78
|
+
|
|
79
|
+
- **Angular 18** standalone component, Signals
|
|
80
|
+
- **Tailwind CSS** 3.x
|
|
81
|
+
|
|
82
|
+
## API Reference
|
|
83
|
+
|
|
84
|
+
### Inputs
|
|
85
|
+
|
|
86
|
+
| Tên | Kiểu | Mặc định | Mô tả |
|
|
87
|
+
|---------|-----------------|----------|--------------------------------------------------------------|
|
|
88
|
+
| config | `IButtonStatus` | required | Thông tin cấu hình cho trạng thái (nhãn, màu, icon, popover). |
|
|
89
|
+
|
|
90
|
+
### Outputs
|
|
91
|
+
|
|
92
|
+
Không có
|
|
93
|
+
|
|
94
|
+
### Interfaces
|
|
95
|
+
|
|
96
|
+
#### `IButtonStatus`
|
|
97
|
+
```typescript
|
|
98
|
+
export interface IButtonStatus {
|
|
99
|
+
label?: string;
|
|
100
|
+
type: TYPE_BUTTON_STATUS;
|
|
101
|
+
otherConfig?: {
|
|
102
|
+
color: string;
|
|
103
|
+
background?: string;
|
|
104
|
+
};
|
|
105
|
+
classInclude?: string;
|
|
106
|
+
classLabelInclude?: string;
|
|
107
|
+
classIconLeft?: string;
|
|
108
|
+
popoverIconLeft?: IPopover;
|
|
109
|
+
classIconRight?: string;
|
|
110
|
+
popoverIconRight?: IPopover;
|
|
111
|
+
}
|
|
112
|
+
```
|
|
113
|
+
Mô tả:
|
|
114
|
+
- `label`: Nhãn hiển thị của trạng thái.
|
|
115
|
+
- `type`: Kiểu màu/trạng thái (`TYPE_BUTTON_STATUS`).
|
|
116
|
+
- `otherConfig`: Cấu hình màu chữ và nền khi `type` là `other`.
|
|
117
|
+
- `classInclude`: CSS class thêm cho container của status.
|
|
118
|
+
- `classLabelInclude`: CSS class thêm cho nhãn.
|
|
119
|
+
- `classIconLeft`: CSS class thêm cho icon bên trái.
|
|
120
|
+
- `popoverIconLeft`: Cấu hình popover cho icon bên trái.
|
|
121
|
+
- `classIconRight`: CSS class thêm cho icon bên phải.
|
|
122
|
+
- `popoverIconRight`: Cấu hình popover cho icon bên phải.
|
|
123
|
+
|
|
124
|
+
#### `TYPE_BUTTON_STATUS`
|
|
125
|
+
```typescript
|
|
126
|
+
export type TYPE_BUTTON_STATUS = 'blue' | 'green' | 'red' | 'orange' | 'yellow' | 'cyan' | 'purple' | 'brown' | 'other';
|
|
127
|
+
```
|
|
128
|
+
Mô tả:
|
|
129
|
+
- `blue`: Màu xanh dương (thông tin chung).
|
|
130
|
+
- `green`: Màu xanh lá cây (thành công).
|
|
131
|
+
- `red`: Màu đỏ (lỗi hoặc cảnh báo).
|
|
132
|
+
- `orange`: Màu cam (cảnh báo).
|
|
133
|
+
- `yellow`: Màu vàng (đang chờ, thông tin).
|
|
134
|
+
- `cyan`: Màu xanh da trời (thông tin phụ trợ).
|
|
135
|
+
- `purple`: Màu tím (nhấn mạnh, nổi bật).
|
|
136
|
+
- `brown`: Màu nâu (trung tính).
|
|
137
|
+
- `other`: Chủ đề tuỳ chỉnh; cấu hình qua `otherConfig`.
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-buttons-status",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.281",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/core": "^18.2.0",
|
|
6
|
-
"@libs-ui/components-popover": "
|
|
7
|
-
"@libs-ui/services-config-project": "
|
|
8
|
-
"@libs-ui/utils": "
|
|
6
|
+
"@libs-ui/components-popover": "0.2.281",
|
|
7
|
+
"@libs-ui/services-config-project": "0.2.281",
|
|
8
|
+
"@libs-ui/utils": "0.2.281",
|
|
9
9
|
"@ngx-translate/core": "^15.0.0"
|
|
10
10
|
},
|
|
11
11
|
"sideEffects": false,
|