@libs-ui/components-buttons-status 0.2.355-8 → 0.2.356-0

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.
Files changed (2) hide show
  1. package/README.md +85 -65
  2. package/package.json +4 -4
package/README.md CHANGED
@@ -1,17 +1,23 @@
1
- # Button Status
1
+ # Buttons Status Component
2
+
3
+ > Version: `0.2.355-14`
4
+ >
5
+ > Component hiển thị status dạng pill, hỗ trợ icon trái/phải, translate label và tuỳ biến màu theo type hoặc `otherConfig`.
2
6
 
3
7
  ## Giới thiệu
4
8
 
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.
9
+ `LibsUiComponentsButtonsStatusComponent` là standalone Angular component để hiển thị trạng thái ngắn gọn (pill/badge) trong UI. Component nhận một object cấu hình `config` để quyết định label, type màu, icon và popover cho icon.
6
10
 
7
11
  ## Tính năng
8
12
 
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
13
+ - ✅ Hiển thị status dạng pill gọn nhẹ
14
+ - ✅ Hỗ trợ nhiều type màu: blue/green/red/orange/yellow/cyan/purple/brown
15
+ - ✅ Tuỳ biến màu với type `other` + `otherConfig`
16
+ - ✅ Hỗ trợ icon trái/phải qua `classIconLeft` / `classIconRight`
17
+ - ✅ Hỗ trợ popover cho icon (thông qua `IPopover`)
18
+ - ✅ Translate label qua `@ngx-translate/core`
19
+ - ✅ OnPush Change Detection
20
+ - ✅ Angular Signals
15
21
 
16
22
  ## Cài đặt
17
23
 
@@ -19,77 +25,105 @@
19
25
  npm install @libs-ui/components-buttons-status
20
26
  ```
21
27
 
22
- hoặc
28
+ ## Import
23
29
 
24
- ```bash
25
- yarn add @libs-ui/components-buttons-status
30
+ ```typescript
31
+ import { Component } from '@angular/core';
32
+ import { LibsUiComponentsButtonsStatusComponent, IButtonStatus, TYPE_BUTTON_STATUS } from '@libs-ui/components-buttons-status';
33
+
34
+ @Component({
35
+ standalone: true,
36
+ imports: [LibsUiComponentsButtonsStatusComponent],
37
+ template: '',
38
+ })
39
+ export class ExampleComponent {}
26
40
  ```
27
41
 
28
- ## Sử dụng
42
+ ## Cách sử dụng
29
43
 
30
- ### Inline Template
44
+ ### 1. Ví dụ inline template
45
+
46
+ ```html
47
+ <libs_ui-components-buttons-status
48
+ [config]="statusConfig"
49
+ />
50
+ ```
31
51
 
32
52
  ```typescript
33
53
  import { Component } from '@angular/core';
34
- import { LibsUiComponentsButtonsStatusComponent, IButtonStatus, TYPE_BUTTON_STATUS } from '@libs-ui/components-buttons-status';
54
+ import { LibsUiComponentsButtonsStatusComponent, IButtonStatus } from '@libs-ui/components-buttons-status';
35
55
 
36
56
  @Component({
37
- selector: 'app-example',
38
57
  standalone: true,
39
58
  imports: [LibsUiComponentsButtonsStatusComponent],
40
- template: `
41
- <libs_ui-components-buttons-status [config]="statusConfig"></libs_ui-components-buttons-status>
42
- `,
59
+ template: `<libs_ui-components-buttons-status [config]="statusConfig" />`,
43
60
  })
44
- export class ExampleComponent {
45
- statusConfig: IButtonStatus = {
61
+ export class InlineExampleComponent {
62
+ readonly statusConfig: IButtonStatus = {
46
63
  label: 'Đang hoạt động',
47
- type: 'green',
64
+ type: 'blue',
48
65
  };
49
66
  }
50
67
  ```
51
68
 
52
- ### File HTML riêng
69
+ ### 2. Ví dụ với file HTML riêng
70
+
71
+ `example.component.html`
72
+
73
+ ```html
74
+ <libs_ui-components-buttons-status [config]="config" />
75
+ ```
76
+
77
+ `example.component.ts`
53
78
 
54
79
  ```typescript
55
80
  import { Component } from '@angular/core';
56
81
  import { LibsUiComponentsButtonsStatusComponent, IButtonStatus } from '@libs-ui/components-buttons-status';
57
82
 
58
83
  @Component({
59
- selector: 'app-example',
60
84
  standalone: true,
61
85
  imports: [LibsUiComponentsButtonsStatusComponent],
62
86
  templateUrl: './example.component.html',
63
87
  })
64
- export class ExampleComponent {
65
- statusConfig: IButtonStatus = { label: 'Đang chờ', type: 'yellow' };
88
+ export class HtmlFileExampleComponent {
89
+ readonly config: IButtonStatus = {
90
+ label: 'Custom',
91
+ type: 'other',
92
+ otherConfig: {
93
+ color: '#0ea5e9',
94
+ background: '#e0f2fe',
95
+ },
96
+ classIconLeft: 'libs-ui-icon-info-circle',
97
+ classIconRight: 'libs-ui-icon-chevron-right',
98
+ };
66
99
  }
67
100
  ```
68
101
 
69
- ```html
70
- <libs_ui-components-buttons-status [config]="statusConfig"></libs_ui-components-buttons-status>
71
- ```
102
+ ## Công nghệ
72
103
 
73
- ## Công nghệ sử dụng
104
+ | Technology | Version | Purpose |
105
+ |------------|---------|---------|
106
+ | Angular | 18+ | Framework |
107
+ | Angular Signals | - | State management |
108
+ | TailwindCSS | 3.x | Styling (demo) |
109
+ | OnPush | - | Change Detection |
110
+ | ngx-translate | 15+ | Translate label |
74
111
 
75
- - **Angular 18** standalone component, Signals
76
- - **Tailwind CSS** 3.x
112
+ ## API
77
113
 
78
- ## API Reference
114
+ ### libs_ui-components-buttons-status
79
115
 
80
- ### Inputs
116
+ #### Inputs
81
117
 
82
- | Tên | Kiểu | Mặc định | Mô tả |
83
- | ------ | --------------- | -------- | ------------------------------------------------------------- |
84
- | config | `IButtonStatus` | required | Thông tin cấu hình cho trạng thái (nhãn, màu, icon, popover). |
118
+ | Property | Type | Default | Description |
119
+ |----------|------|---------|-------------|
120
+ | `[config]` | `IButtonStatus` | `required` | Cấu hình hiển thị status: label/type/icon/popover/classes... |
85
121
 
86
- ### Outputs
122
+ #### Outputs
87
123
 
88
- Không có
124
+ Component này hiện **không có outputs public**.
89
125
 
90
- ### Interfaces
91
-
92
- #### `IButtonStatus`
126
+ ## Types & Interfaces
93
127
 
94
128
  ```typescript
95
129
  export interface IButtonStatus {
@@ -106,34 +140,20 @@ export interface IButtonStatus {
106
140
  classIconRight?: string;
107
141
  popoverIconRight?: IPopover;
108
142
  }
143
+
144
+ export type TYPE_BUTTON_STATUS = 'blue' | 'green' | 'red' | 'orange' | 'yellow' | 'cyan' | 'purple' | 'brown' | 'other';
109
145
  ```
110
146
 
111
- Mô tả:
147
+ ### Mô tả Types
112
148
 
113
- - `label`: Nhãn hiển thị của trạng thái.
114
- - `type`: Kiểu màu/trạng thái (`TYPE_BUTTON_STATUS`).
115
- - `otherConfig`: Cấu hình màu chữ và nền khi `type` là `other`.
116
- - `classInclude`: CSS class thêm cho container của status.
117
- - `classLabelInclude`: CSS class thêm cho nhãn.
118
- - `classIconLeft`: CSS class thêm cho icon bên trái.
119
- - `popoverIconLeft`: Cấu hình popover cho icon bên trái.
120
- - `classIconRight`: CSS class thêm cho icon bên phải.
121
- - `popoverIconRight`: Cấu hình popover cho icon bên phải.
149
+ - **IButtonStatus**: Interface cấu hình status: label, type, tuỳ biến màu (otherConfig) và icon/popover.
150
+ - **TYPE_BUTTON_STATUS**: Danh sách type status có sẵn. Dùng other + otherConfig khi cần màu tuỳ biến.
122
151
 
123
- #### `TYPE_BUTTON_STATUS`
152
+ ## Demo
124
153
 
125
- ```typescript
126
- export type TYPE_BUTTON_STATUS = 'blue' | 'green' | 'red' | 'orange' | 'yellow' | 'cyan' | 'purple' | 'brown' | 'other';
154
+ ```bash
155
+ npx nx serve core-ui
127
156
  ```
128
157
 
129
- Mô tả:
130
-
131
- - `blue`: Màu xanh dương (thông tin chung).
132
- - `green`: Màu xanh lá cây (thành công).
133
- - `red`: Màu đỏ (lỗi hoặc cảnh báo).
134
- - `orange`: Màu cam (cảnh báo).
135
- - `yellow`: Màu vàng (đang chờ, thông tin).
136
- - `cyan`: Màu xanh da trời (thông tin phụ trợ).
137
- - `purple`: Màu tím (nhấn mạnh, nổi bật).
138
- - `brown`: Màu nâu (trung tính).
139
- - `other`: Chủ đề tuỳ chỉnh; cấu hình qua `otherConfig`.
158
+ Truy cập: `http://localhost:4500/buttons/status`
159
+
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@libs-ui/components-buttons-status",
3
- "version": "0.2.355-8",
3
+ "version": "0.2.356-0",
4
4
  "peerDependencies": {
5
5
  "@angular/core": ">=18.0.0",
6
- "@libs-ui/components-popover": "0.2.355-8",
7
- "@libs-ui/services-config-project": "0.2.355-8",
8
- "@libs-ui/utils": "0.2.355-8",
6
+ "@libs-ui/components-popover": "0.2.356-0",
7
+ "@libs-ui/services-config-project": "0.2.356-0",
8
+ "@libs-ui/utils": "0.2.356-0",
9
9
  "@ngx-translate/core": "^15.0.0"
10
10
  },
11
11
  "sideEffects": false,