@libs-ui/components-buttons-status 0.2.355-14 → 0.2.355-15

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 +159 -0
  2. package/package.json +4 -4
package/README.md ADDED
@@ -0,0 +1,159 @@
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`.
6
+
7
+ ## Giới thiệu
8
+
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.
10
+
11
+ ## Tính năng
12
+
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
21
+
22
+ ## Cài đặt
23
+
24
+ ```bash
25
+ npm install @libs-ui/components-buttons-status
26
+ ```
27
+
28
+ ## Import
29
+
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 {}
40
+ ```
41
+
42
+ ## Cách sử dụng
43
+
44
+ ### 1. Ví dụ inline template
45
+
46
+ ```html
47
+ <libs_ui-components-buttons-status
48
+ [config]="statusConfig"
49
+ />
50
+ ```
51
+
52
+ ```typescript
53
+ import { Component } from '@angular/core';
54
+ import { LibsUiComponentsButtonsStatusComponent, IButtonStatus } from '@libs-ui/components-buttons-status';
55
+
56
+ @Component({
57
+ standalone: true,
58
+ imports: [LibsUiComponentsButtonsStatusComponent],
59
+ template: `<libs_ui-components-buttons-status [config]="statusConfig" />`,
60
+ })
61
+ export class InlineExampleComponent {
62
+ readonly statusConfig: IButtonStatus = {
63
+ label: 'Đang hoạt động',
64
+ type: 'blue',
65
+ };
66
+ }
67
+ ```
68
+
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`
78
+
79
+ ```typescript
80
+ import { Component } from '@angular/core';
81
+ import { LibsUiComponentsButtonsStatusComponent, IButtonStatus } from '@libs-ui/components-buttons-status';
82
+
83
+ @Component({
84
+ standalone: true,
85
+ imports: [LibsUiComponentsButtonsStatusComponent],
86
+ templateUrl: './example.component.html',
87
+ })
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
+ };
99
+ }
100
+ ```
101
+
102
+ ## Công nghệ
103
+
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 |
111
+
112
+ ## API
113
+
114
+ ### libs_ui-components-buttons-status
115
+
116
+ #### Inputs
117
+
118
+ | Property | Type | Default | Description |
119
+ |----------|------|---------|-------------|
120
+ | `[config]` | `IButtonStatus` | `required` | Cấu hình hiển thị status: label/type/icon/popover/classes... |
121
+
122
+ #### Outputs
123
+
124
+ Component này hiện **không có outputs public**.
125
+
126
+ ## Types & Interfaces
127
+
128
+ ```typescript
129
+ export interface IButtonStatus {
130
+ label?: string;
131
+ type: TYPE_BUTTON_STATUS;
132
+ otherConfig?: {
133
+ color: string;
134
+ background?: string;
135
+ };
136
+ classInclude?: string;
137
+ classLabelInclude?: string;
138
+ classIconLeft?: string;
139
+ popoverIconLeft?: IPopover;
140
+ classIconRight?: string;
141
+ popoverIconRight?: IPopover;
142
+ }
143
+
144
+ export type TYPE_BUTTON_STATUS = 'blue' | 'green' | 'red' | 'orange' | 'yellow' | 'cyan' | 'purple' | 'brown' | 'other';
145
+ ```
146
+
147
+ ### Mô tả Types
148
+
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.
151
+
152
+ ## Demo
153
+
154
+ ```bash
155
+ npx nx serve core-ui
156
+ ```
157
+
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-14",
3
+ "version": "0.2.355-15",
4
4
  "peerDependencies": {
5
5
  "@angular/core": ">=18.0.0",
6
- "@libs-ui/components-popover": "0.2.355-14",
7
- "@libs-ui/services-config-project": "0.2.355-14",
8
- "@libs-ui/utils": "0.2.355-14",
6
+ "@libs-ui/components-popover": "0.2.355-15",
7
+ "@libs-ui/services-config-project": "0.2.355-15",
8
+ "@libs-ui/utils": "0.2.355-15",
9
9
  "@ngx-translate/core": "^15.0.0"
10
10
  },
11
11
  "sideEffects": false,