@libs-ui/components-buttons-button 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.
- package/README.md +246 -109
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -1,130 +1,220 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @libs-ui/components-buttons-button
|
|
2
|
+
|
|
3
|
+
> Component Button đa năng với nhiều kiểu dáng, kích thước và tích hợp popover.
|
|
2
4
|
|
|
3
5
|
## Giới thiệu
|
|
4
6
|
|
|
5
|
-
|
|
7
|
+
`LibsUiComponentsButtonsButtonComponent` là một standalone Angular component được thiết kế để hiển thị các nút bấm với nhiều kiểu dáng (primary, secondary, outline, danger...), kích thước (large, medium, small, smaller) và hỗ trợ tích hợp popover, spinner loading, icon trái/phải.
|
|
8
|
+
|
|
9
|
+
### Tính năng
|
|
6
10
|
|
|
7
|
-
-
|
|
8
|
-
-
|
|
9
|
-
-
|
|
10
|
-
-
|
|
11
|
-
-
|
|
11
|
+
- ✅ Hỗ trợ nhiều kiểu button (primary, secondary, outline, danger, link...)
|
|
12
|
+
- ✅ 4 kích thước: large, medium, small, smaller
|
|
13
|
+
- ✅ Tích hợp popover (hover/click)
|
|
14
|
+
- ✅ Loading state với spinner
|
|
15
|
+
- ✅ Icon trái/phải hoặc icon-only mode
|
|
16
|
+
- ✅ Custom colors với buttonCustom
|
|
17
|
+
- ✅ Disable state
|
|
18
|
+
- ✅ Angular Signals cho tính phản hồi cao
|
|
19
|
+
- ✅ OnPush Change Detection tối ưu hiệu năng
|
|
12
20
|
|
|
13
|
-
##
|
|
21
|
+
## Khi nào sử dụng
|
|
14
22
|
|
|
15
|
-
-
|
|
16
|
-
-
|
|
17
|
-
-
|
|
18
|
-
-
|
|
19
|
-
-
|
|
23
|
+
- Khi cần một nút bấm để kích hoạt hành động (submit form, mở dialog, navigate...)
|
|
24
|
+
- Khi cần hiển thị trạng thái loading trong khi xử lý async operation
|
|
25
|
+
- Khi cần button với popover tooltip hoặc menu dropdown
|
|
26
|
+
- Khi cần button với icon hoặc chỉ hiển thị icon
|
|
27
|
+
- Phù hợp cho các action buttons, form buttons, navigation buttons
|
|
20
28
|
|
|
21
29
|
## Cài đặt
|
|
22
30
|
|
|
23
31
|
```bash
|
|
32
|
+
# npm
|
|
24
33
|
npm install @libs-ui/components-buttons-button
|
|
25
|
-
```
|
|
26
34
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
```bash
|
|
35
|
+
# yarn
|
|
30
36
|
yarn add @libs-ui/components-buttons-button
|
|
31
37
|
```
|
|
32
38
|
|
|
33
|
-
##
|
|
34
|
-
|
|
35
|
-
### Inline Template
|
|
39
|
+
## Import
|
|
36
40
|
|
|
37
41
|
```typescript
|
|
38
|
-
import {
|
|
39
|
-
import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
|
|
42
|
+
import { LibsUiComponentsButtonsButtonComponent, TYPE_BUTTON, TYPE_SIZE_BUTTON } from '@libs-ui/components-buttons-button';
|
|
40
43
|
|
|
41
44
|
@Component({
|
|
42
|
-
selector: 'app-example',
|
|
43
45
|
standalone: true,
|
|
44
46
|
imports: [LibsUiComponentsButtonsButtonComponent],
|
|
45
|
-
|
|
46
|
-
<libs_ui-components-buttons-button
|
|
47
|
-
[type]="'button-primary'"
|
|
48
|
-
[label]="'Click me'"
|
|
49
|
-
(outClick)="onClick()"></libs_ui-components-buttons-button>
|
|
50
|
-
`,
|
|
47
|
+
// ...
|
|
51
48
|
})
|
|
52
|
-
export class
|
|
53
|
-
onClick() {
|
|
54
|
-
console.log('Clicked');
|
|
55
|
-
}
|
|
56
|
-
}
|
|
49
|
+
export class YourComponent {}
|
|
57
50
|
```
|
|
58
51
|
|
|
59
|
-
|
|
52
|
+
## Ví dụ
|
|
60
53
|
|
|
61
|
-
|
|
62
|
-
import { Component } from '@angular/core';
|
|
63
|
-
import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
|
|
54
|
+
### Basic
|
|
64
55
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
56
|
+
```html
|
|
57
|
+
<libs_ui-components-buttons-button
|
|
58
|
+
label="Click me"
|
|
59
|
+
(outClick)="handleClick($event)" />
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
### With Icon
|
|
63
|
+
|
|
64
|
+
```html
|
|
65
|
+
<libs_ui-components-buttons-button
|
|
66
|
+
type="button-primary"
|
|
67
|
+
label="Add Item"
|
|
68
|
+
[classIconLeft]="'libs-ui-icon-add'"
|
|
69
|
+
(outClick)="handleClick($event)" />
|
|
72
70
|
```
|
|
73
71
|
|
|
72
|
+
### Different Types
|
|
73
|
+
|
|
74
74
|
```html
|
|
75
|
+
<!-- Primary -->
|
|
76
|
+
<libs_ui-components-buttons-button
|
|
77
|
+
type="button-primary"
|
|
78
|
+
label="Primary" />
|
|
79
|
+
|
|
80
|
+
<!-- Secondary -->
|
|
81
|
+
<libs_ui-components-buttons-button
|
|
82
|
+
type="button-secondary"
|
|
83
|
+
label="Secondary" />
|
|
84
|
+
|
|
85
|
+
<!-- Danger -->
|
|
75
86
|
<libs_ui-components-buttons-button
|
|
76
|
-
|
|
77
|
-
|
|
87
|
+
type="button-danger-high"
|
|
88
|
+
label="Delete" />
|
|
89
|
+
|
|
90
|
+
<!-- Link style -->
|
|
91
|
+
<libs_ui-components-buttons-button
|
|
92
|
+
type="button-link-primary"
|
|
93
|
+
label="Learn more" />
|
|
78
94
|
```
|
|
79
95
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
96
|
+
### Different Sizes
|
|
97
|
+
|
|
98
|
+
```html
|
|
99
|
+
<libs_ui-components-buttons-button
|
|
100
|
+
[sizeButton]="'large'"
|
|
101
|
+
label="Large Button" />
|
|
102
|
+
|
|
103
|
+
<libs_ui-components-buttons-button
|
|
104
|
+
[sizeButton]="'medium'"
|
|
105
|
+
label="Medium Button" />
|
|
106
|
+
|
|
107
|
+
<libs_ui-components-buttons-button
|
|
108
|
+
[sizeButton]="'small'"
|
|
109
|
+
label="Small Button" />
|
|
110
|
+
|
|
111
|
+
<libs_ui-components-buttons-button
|
|
112
|
+
[sizeButton]="'smaller'"
|
|
113
|
+
label="Smaller Button" />
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
### Loading State
|
|
117
|
+
|
|
118
|
+
```html
|
|
119
|
+
<libs_ui-components-buttons-button
|
|
120
|
+
label="Save"
|
|
121
|
+
[isPending]="isLoading"
|
|
122
|
+
(outClick)="handleSave($event)" />
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
### Icon Only
|
|
126
|
+
|
|
127
|
+
```html
|
|
128
|
+
<libs_ui-components-buttons-button
|
|
129
|
+
[classIconLeft]="'libs-ui-icon-settings'"
|
|
130
|
+
[iconOnlyType]="true"
|
|
131
|
+
(outClick)="openSettings($event)" />
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
### With Popover
|
|
135
|
+
|
|
136
|
+
```html
|
|
137
|
+
<libs_ui-components-buttons-button
|
|
138
|
+
label="Hover me"
|
|
139
|
+
[popover]="{
|
|
140
|
+
type: 'text',
|
|
141
|
+
mode: 'hover',
|
|
142
|
+
config: {
|
|
143
|
+
content: 'This is a tooltip',
|
|
144
|
+
width: 200
|
|
145
|
+
}
|
|
146
|
+
}" />
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
### Custom Color
|
|
150
|
+
|
|
151
|
+
```html
|
|
152
|
+
<libs_ui-components-buttons-button
|
|
153
|
+
type="button-custom"
|
|
154
|
+
label="Custom"
|
|
155
|
+
[buttonCustom]="{
|
|
156
|
+
rootColor: '#ff6b6b',
|
|
157
|
+
configStepColor: {
|
|
158
|
+
background: 500,
|
|
159
|
+
color: -500,
|
|
160
|
+
background_hover: 600
|
|
161
|
+
}
|
|
162
|
+
}" />
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
## API
|
|
166
|
+
|
|
167
|
+
### libs_ui-components-buttons-button
|
|
168
|
+
|
|
169
|
+
#### Inputs
|
|
170
|
+
|
|
171
|
+
| Property | Type | Default | Description |
|
|
172
|
+
| ------------------------------------- | -------------------------------------- | -------------------------------------------------------------------------------- | -------------------------------------------------------- |
|
|
173
|
+
| `[buttonCustom]` | `IColorButton` | `undefined` | Cấu hình màu custom (bắt buộc khi type là button-custom) |
|
|
174
|
+
| `[classIconLeft]` | `string` | `''` | Class của icon bên trái |
|
|
175
|
+
| `[classIconRight]` | `string` | `''` | Class của icon bên phải |
|
|
176
|
+
| `[classInclude]` | `string` | `''` | Class CSS bổ sung cho button |
|
|
177
|
+
| `[classLabel]` | `string` | `''` | Class CSS cho label |
|
|
178
|
+
| `[disable]` | `boolean` | `false` | Disable button |
|
|
179
|
+
| `[flagMouse]` | `IFlagMouse` | `{isMouseEnter: false, isMouseEnterContent: false, isContainerHasScroll: false}` | Trạng thái con trỏ chuột cho popover |
|
|
180
|
+
| `[iconOnlyType]` | `boolean` | `false` | Chỉ hiển thị icon, ẩn label |
|
|
181
|
+
| `[ignoreFocusWhenInputTab]` | `boolean` | `undefined` | Bỏ qua focus khi bấm TAB |
|
|
182
|
+
| `[ignorePointerEvent]` | `boolean` | `undefined` | Bỏ qua pointer events |
|
|
183
|
+
| `[ignoreSetClickWhenShowPopover]` | `boolean` | `undefined` | Không set click state khi show popover |
|
|
184
|
+
| `[ignoreStopPropagationEvent]` | `boolean` | `true` | Cho phép event propagation |
|
|
185
|
+
| `[imageLeft]` | `{src: string, classInclude?: string}` | `undefined` | Hình ảnh bên trái button |
|
|
186
|
+
| `[isActive]` | `boolean` | `undefined` | Trạng thái active của button |
|
|
187
|
+
| `[isHandlerEnterDocumentClickButton]` | `boolean` | `undefined` | Xử lý Enter key để click button |
|
|
188
|
+
| `[isPending]` | `boolean` | `undefined` | Hiển thị spinner loading |
|
|
189
|
+
| `[label]` | `string` | `' '` | Label của button |
|
|
190
|
+
| `[popover]` | `IPopover` | `{}` | Cấu hình popover |
|
|
191
|
+
| `[sizeButton]` | `TYPE_SIZE_BUTTON` | `'medium'` | Kích thước button: large, medium, small, smaller |
|
|
192
|
+
| `[styleButton]` | `Record<string, any>` | `undefined` | Inline styles cho button |
|
|
193
|
+
| `[styleIconLeft]` | `Record<string, any>` | `undefined` | Inline styles cho icon trái |
|
|
194
|
+
| `[type]` | `TYPE_BUTTON` | `'button-primary'` | Kiểu button (màu sắc, style) |
|
|
195
|
+
| `[widthLabelPopover]` | `number` | `undefined` | Chiều rộng popover của label |
|
|
196
|
+
| `[zIndex]` | `number` | `10` | Z-index của popover |
|
|
197
|
+
|
|
198
|
+
#### Outputs
|
|
199
|
+
|
|
200
|
+
| Property | Type | Description |
|
|
201
|
+
| ----------------------- | ------------------------------ | ------------------------------------ |
|
|
202
|
+
| `(outClick)` | `Event` | Emit khi button được click |
|
|
203
|
+
| `(outFunctionsControl)` | `IPopoverFunctionControlEvent` | Emit functions để điều khiển popover |
|
|
204
|
+
| `(outPopoverEvent)` | `TYPE_POPOVER_EVENT` | Emit events từ popover |
|
|
205
|
+
|
|
206
|
+
#### Public Methods
|
|
207
|
+
|
|
208
|
+
| Method | Description |
|
|
209
|
+
| ------------------ | --------------------------------------- |
|
|
210
|
+
| `FunctionsControl` | Getter để lấy popover control functions |
|
|
211
|
+
|
|
212
|
+
## Types & Interfaces
|
|
126
213
|
|
|
127
214
|
```typescript
|
|
215
|
+
/**
|
|
216
|
+
* Các kiểu button có sẵn
|
|
217
|
+
*/
|
|
128
218
|
export type TYPE_BUTTON =
|
|
129
219
|
| 'button-primary'
|
|
130
220
|
| 'button-primary-revert'
|
|
@@ -150,29 +240,76 @@ export type TYPE_BUTTON =
|
|
|
150
240
|
| 'button-link-violet'
|
|
151
241
|
| 'button-link-custom'
|
|
152
242
|
| string;
|
|
243
|
+
|
|
244
|
+
/**
|
|
245
|
+
* Kích thước button
|
|
246
|
+
*/
|
|
247
|
+
export type TYPE_SIZE_BUTTON = 'large' | 'medium' | 'small' | 'smaller';
|
|
248
|
+
|
|
249
|
+
/**
|
|
250
|
+
* Interface cho button config
|
|
251
|
+
*/
|
|
252
|
+
export interface IButton {
|
|
253
|
+
key?: string;
|
|
254
|
+
type?: TYPE_BUTTON;
|
|
255
|
+
sizeButton?: TYPE_SIZE_BUTTON;
|
|
256
|
+
iconOnlyType?: boolean;
|
|
257
|
+
label?: string;
|
|
258
|
+
disable?: boolean;
|
|
259
|
+
classInclude?: string;
|
|
260
|
+
classIconLeft?: string;
|
|
261
|
+
classIconRight?: string;
|
|
262
|
+
classLabel?: string;
|
|
263
|
+
popover?: IPopover;
|
|
264
|
+
ignoreStopPropagationEvent?: boolean;
|
|
265
|
+
zIndex?: number;
|
|
266
|
+
isPending?: boolean;
|
|
267
|
+
action?: (data?: any) => Promise<void>;
|
|
268
|
+
styleIconLeft?: Record<string, any>;
|
|
269
|
+
styleButton?: Record<string, any>;
|
|
270
|
+
buttonCustom?: IColorButton;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
/**
|
|
274
|
+
* Trạng thái chuột cho popover
|
|
275
|
+
*/
|
|
276
|
+
export interface IFlagMouse {
|
|
277
|
+
isMouseEnter: boolean;
|
|
278
|
+
isMouseEnterContent: boolean;
|
|
279
|
+
isContainerHasScroll?: boolean;
|
|
280
|
+
}
|
|
153
281
|
```
|
|
154
282
|
|
|
155
|
-
|
|
283
|
+
## Công nghệ
|
|
156
284
|
|
|
157
|
-
|
|
285
|
+
| Technology | Version | Purpose |
|
|
286
|
+
| --------------- | ------- | ---------------- |
|
|
287
|
+
| Angular | 18+ | Framework |
|
|
288
|
+
| Angular Signals | - | State management |
|
|
289
|
+
| TailwindCSS | 3.x | Styling |
|
|
290
|
+
| OnPush | - | Change Detection |
|
|
158
291
|
|
|
159
|
-
|
|
160
|
-
|
|
292
|
+
## Demo
|
|
293
|
+
|
|
294
|
+
```bash
|
|
295
|
+
npx nx serve core-ui
|
|
161
296
|
```
|
|
162
297
|
|
|
163
|
-
|
|
298
|
+
Truy cập: `http://localhost:4500/buttons/button`
|
|
164
299
|
|
|
165
|
-
|
|
300
|
+
## Unit Tests
|
|
166
301
|
|
|
167
|
-
```
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
302
|
+
```bash
|
|
303
|
+
# Chạy tests
|
|
304
|
+
npx nx test components-buttons-button
|
|
305
|
+
|
|
306
|
+
# Coverage
|
|
307
|
+
npx nx test components-buttons-button --coverage
|
|
308
|
+
|
|
309
|
+
# Watch mode
|
|
310
|
+
npx nx test components-buttons-button --watch
|
|
176
311
|
```
|
|
177
312
|
|
|
178
|
-
|
|
313
|
+
## License
|
|
314
|
+
|
|
315
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-buttons-button",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.356-0",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/common": ">=18.0.0",
|
|
6
6
|
"@angular/core": ">=18.0.0",
|
|
7
|
-
"@libs-ui/components-popover": "0.2.
|
|
8
|
-
"@libs-ui/components-spinner": "0.2.
|
|
9
|
-
"@libs-ui/services-config-project": "0.2.
|
|
10
|
-
"@libs-ui/utils": "0.2.
|
|
7
|
+
"@libs-ui/components-popover": "0.2.356-0",
|
|
8
|
+
"@libs-ui/components-spinner": "0.2.356-0",
|
|
9
|
+
"@libs-ui/services-config-project": "0.2.356-0",
|
|
10
|
+
"@libs-ui/utils": "0.2.356-0",
|
|
11
11
|
"@ngx-translate/core": "^15.0.0",
|
|
12
12
|
"rxjs": "~7.8.0",
|
|
13
|
-
"@libs-ui/interfaces-types": "0.2.
|
|
13
|
+
"@libs-ui/interfaces-types": "0.2.356-0"
|
|
14
14
|
},
|
|
15
15
|
"sideEffects": false,
|
|
16
16
|
"module": "fesm2022/libs-ui-components-buttons-button.mjs",
|