@libs-ui/components-buttons-status 0.2.355-0 → 0.2.355-10

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/package.json +4 -4
  2. package/README.md +0 -139
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@libs-ui/components-buttons-status",
3
- "version": "0.2.355-0",
3
+ "version": "0.2.355-10",
4
4
  "peerDependencies": {
5
5
  "@angular/core": ">=18.0.0",
6
- "@libs-ui/components-popover": "0.2.355-0",
7
- "@libs-ui/services-config-project": "0.2.355-0",
8
- "@libs-ui/utils": "0.2.355-0",
6
+ "@libs-ui/components-popover": "0.2.355-10",
7
+ "@libs-ui/services-config-project": "0.2.355-10",
8
+ "@libs-ui/utils": "0.2.355-10",
9
9
  "@ngx-translate/core": "^15.0.0"
10
10
  },
11
11
  "sideEffects": false,
package/README.md DELETED
@@ -1,139 +0,0 @@
1
- # Button Status
2
-
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 [config]="statusConfig"></libs_ui-components-buttons-status>
42
- `,
43
- })
44
- export class ExampleComponent {
45
- statusConfig: IButtonStatus = {
46
- label: 'Đang hoạt động',
47
- type: 'green',
48
- };
49
- }
50
- ```
51
-
52
- ### File HTML riêng
53
-
54
- ```typescript
55
- import { Component } from '@angular/core';
56
- import { LibsUiComponentsButtonsStatusComponent, IButtonStatus } from '@libs-ui/components-buttons-status';
57
-
58
- @Component({
59
- selector: 'app-example',
60
- standalone: true,
61
- imports: [LibsUiComponentsButtonsStatusComponent],
62
- templateUrl: './example.component.html',
63
- })
64
- export class ExampleComponent {
65
- statusConfig: IButtonStatus = { label: 'Đang chờ', type: 'yellow' };
66
- }
67
- ```
68
-
69
- ```html
70
- <libs_ui-components-buttons-status [config]="statusConfig"></libs_ui-components-buttons-status>
71
- ```
72
-
73
- ## Công nghệ sử dụng
74
-
75
- - **Angular 18** standalone component, Signals
76
- - **Tailwind CSS** 3.x
77
-
78
- ## API Reference
79
-
80
- ### Inputs
81
-
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). |
85
-
86
- ### Outputs
87
-
88
- Không có
89
-
90
- ### Interfaces
91
-
92
- #### `IButtonStatus`
93
-
94
- ```typescript
95
- export interface IButtonStatus {
96
- label?: string;
97
- type: TYPE_BUTTON_STATUS;
98
- otherConfig?: {
99
- color: string;
100
- background?: string;
101
- };
102
- classInclude?: string;
103
- classLabelInclude?: string;
104
- classIconLeft?: string;
105
- popoverIconLeft?: IPopover;
106
- classIconRight?: string;
107
- popoverIconRight?: IPopover;
108
- }
109
- ```
110
-
111
- Mô tả:
112
-
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.
122
-
123
- #### `TYPE_BUTTON_STATUS`
124
-
125
- ```typescript
126
- export type TYPE_BUTTON_STATUS = 'blue' | 'green' | 'red' | 'orange' | 'yellow' | 'cyan' | 'purple' | 'brown' | 'other';
127
- ```
128
-
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`.