@libs-ui/components-buttons-button 0.2.355-13 → 0.2.355-14

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 +315 -0
  2. package/package.json +6 -6
package/README.md ADDED
@@ -0,0 +1,315 @@
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.
4
+
5
+ ## Giới thiệu
6
+
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
10
+
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
20
+
21
+ ## Khi nào sử dụng
22
+
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
28
+
29
+ ## Cài đặt
30
+
31
+ ```bash
32
+ # npm
33
+ npm install @libs-ui/components-buttons-button
34
+
35
+ # yarn
36
+ yarn add @libs-ui/components-buttons-button
37
+ ```
38
+
39
+ ## Import
40
+
41
+ ```typescript
42
+ import { LibsUiComponentsButtonsButtonComponent, TYPE_BUTTON, TYPE_SIZE_BUTTON } from '@libs-ui/components-buttons-button';
43
+
44
+ @Component({
45
+ standalone: true,
46
+ imports: [LibsUiComponentsButtonsButtonComponent],
47
+ // ...
48
+ })
49
+ export class YourComponent {}
50
+ ```
51
+
52
+ ## Ví dụ
53
+
54
+ ### Basic
55
+
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)" />
70
+ ```
71
+
72
+ ### Different Types
73
+
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 -->
86
+ <libs_ui-components-buttons-button
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" />
94
+ ```
95
+
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
213
+
214
+ ```typescript
215
+ /**
216
+ * Các kiểu button có sẵn
217
+ */
218
+ export type TYPE_BUTTON =
219
+ | 'button-primary'
220
+ | 'button-primary-revert'
221
+ | 'button-secondary'
222
+ | 'button-secondary-red'
223
+ | 'button-outline-secondary'
224
+ | 'button-third'
225
+ | 'button-outline'
226
+ | 'button-danger-high'
227
+ | 'button-outline-hover-danger'
228
+ | 'button-third-hover-danger'
229
+ | 'button-danger-low'
230
+ | 'button-green'
231
+ | 'button-violet'
232
+ | 'button-secondary-green'
233
+ | 'button-outline-green'
234
+ | 'button-custom'
235
+ | 'button-link-primary'
236
+ | 'button-link-third'
237
+ | 'button-link-danger-high'
238
+ | 'button-link-danger-low'
239
+ | 'button-link-green'
240
+ | 'button-link-violet'
241
+ | 'button-link-custom'
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
+ }
281
+ ```
282
+
283
+ ## Công nghệ
284
+
285
+ | Technology | Version | Purpose |
286
+ | --------------- | ------- | ---------------- |
287
+ | Angular | 18+ | Framework |
288
+ | Angular Signals | - | State management |
289
+ | TailwindCSS | 3.x | Styling |
290
+ | OnPush | - | Change Detection |
291
+
292
+ ## Demo
293
+
294
+ ```bash
295
+ npx nx serve core-ui
296
+ ```
297
+
298
+ Truy cập: `http://localhost:4500/buttons/button`
299
+
300
+ ## Unit Tests
301
+
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
311
+ ```
312
+
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.355-13",
3
+ "version": "0.2.355-14",
4
4
  "peerDependencies": {
5
5
  "@angular/common": ">=18.0.0",
6
6
  "@angular/core": ">=18.0.0",
7
- "@libs-ui/components-popover": "0.2.355-13",
8
- "@libs-ui/components-spinner": "0.2.355-13",
9
- "@libs-ui/services-config-project": "0.2.355-13",
10
- "@libs-ui/utils": "0.2.355-13",
7
+ "@libs-ui/components-popover": "0.2.355-14",
8
+ "@libs-ui/components-spinner": "0.2.355-14",
9
+ "@libs-ui/services-config-project": "0.2.355-14",
10
+ "@libs-ui/utils": "0.2.355-14",
11
11
  "@ngx-translate/core": "^15.0.0",
12
12
  "rxjs": "~7.8.0",
13
- "@libs-ui/interfaces-types": "0.2.355-13"
13
+ "@libs-ui/interfaces-types": "0.2.355-14"
14
14
  },
15
15
  "sideEffects": false,
16
16
  "module": "fesm2022/libs-ui-components-buttons-button.mjs",