@libs-ui/components-buttons-button 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 +6 -6
  2. package/README.md +0 -178
package/package.json CHANGED
@@ -1,16 +1,16 @@
1
1
  {
2
2
  "name": "@libs-ui/components-buttons-button",
3
- "version": "0.2.355-0",
3
+ "version": "0.2.355-10",
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-0",
8
- "@libs-ui/components-spinner": "0.2.355-0",
9
- "@libs-ui/services-config-project": "0.2.355-0",
10
- "@libs-ui/utils": "0.2.355-0",
7
+ "@libs-ui/components-popover": "0.2.355-10",
8
+ "@libs-ui/components-spinner": "0.2.355-10",
9
+ "@libs-ui/services-config-project": "0.2.355-10",
10
+ "@libs-ui/utils": "0.2.355-10",
11
11
  "@ngx-translate/core": "^15.0.0",
12
12
  "rxjs": "~7.8.0",
13
- "@libs-ui/interfaces-types": "0.2.355-0"
13
+ "@libs-ui/interfaces-types": "0.2.355-10"
14
14
  },
15
15
  "sideEffects": false,
16
16
  "module": "fesm2022/libs-ui-components-buttons-button.mjs",
package/README.md DELETED
@@ -1,178 +0,0 @@
1
- # Button
2
-
3
- ## Giới thiệu
4
-
5
- `@libs-ui/components-buttons-button` là một component Button linh hoạt dùng cho ứng dụng Angular. Component này hỗ trợ:
6
-
7
- - Nhiều kiểu button (primary, secondary, third, outline, outline-green, link, custom)
8
- - Nhiều kích thước (large, medium, small, smaller)
9
- - Trạng thái loading (`pending`) và disabled
10
- - Hiển thị popover thông tin khi hover hoặc focus
11
- - Xuất ra các sự kiện click và popover control
12
-
13
- ## Tính năng
14
-
15
- - Tùy chọn kiểu hiển thị: `button-primary`, `button-secondary`, `button-third`, `button-outline`, `button-outline-green`, `button-link`, `button-custom`
16
- - Tùy chọn kích thước: `large` | `medium` | `small` | `smaller`
17
- - Trạng thái loading dễ dàng với `isPending`
18
- - Vô hiệu hóa button với `disable`
19
- - Hỗ trợ popover nội dung tùy chỉnh
20
-
21
- ## Cài đặt
22
-
23
- ```bash
24
- npm install @libs-ui/components-buttons-button
25
- ```
26
-
27
- hoặc
28
-
29
- ```bash
30
- yarn add @libs-ui/components-buttons-button
31
- ```
32
-
33
- ## Sử dụng
34
-
35
- ### Inline Template
36
-
37
- ```typescript
38
- import { Component } from '@angular/core';
39
- import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
40
-
41
- @Component({
42
- selector: 'app-example',
43
- standalone: true,
44
- imports: [LibsUiComponentsButtonsButtonComponent],
45
- template: `
46
- <libs_ui-components-buttons-button
47
- [type]="'button-primary'"
48
- [label]="'Click me'"
49
- (outClick)="onClick()"></libs_ui-components-buttons-button>
50
- `,
51
- })
52
- export class ExampleComponent {
53
- onClick() {
54
- console.log('Clicked');
55
- }
56
- }
57
- ```
58
-
59
- ### File HTML riêng
60
-
61
- ```typescript
62
- import { Component } from '@angular/core';
63
- import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
64
-
65
- @Component({
66
- selector: 'app-example',
67
- standalone: true,
68
- imports: [LibsUiComponentsButtonsButtonComponent],
69
- templateUrl: './example.component.html',
70
- })
71
- export class ExampleComponent {}
72
- ```
73
-
74
- ```html
75
- <libs_ui-components-buttons-button
76
- [type]="'button-secondary'"
77
- [label]="'Submit'"></libs_ui-components-buttons-button>
78
- ```
79
-
80
- ## Công nghệ sử dụng
81
-
82
- - **Angular 18** với standalone components và Signals
83
- - **Tailwind CSS** 3.x (phong cách demo)
84
-
85
- ## API Reference
86
-
87
- ### Inputs
88
-
89
- | Tên | Kiểu | Mặc định | Mô tả |
90
- | --------------------------------- | ---------------------------------------- | ---------------- | ---------------------------------------------------------------------- |
91
- | type | `TYPE_BUTTON` | `button-primary` | Kiểu style của nút (ví dụ: button-primary, button-secondary, ...). |
92
- | sizeButton | `TYPE_SIZE_BUTTON` | `medium` | Kích thước của nút (large, medium, small, smaller). |
93
- | label | `string` | `' '` | Nội dung text hiển thị trên nút. |
94
- | disable | `boolean` | `false` | Nếu true: vô hiệu hóa nút, không cho tương tác. |
95
- | isPending | `boolean` | `false` | Nếu true: hiển thị trạng thái loading và vô hiệu hóa nút. |
96
- | popover | `IPopover` | `{}` | Cấu hình chi tiết cho popover (nội dung, vị trí, chế độ hiển thị). |
97
- | buttonCustom | `IColorButton` | undefined | Cấu hình màu custom khi type là button-custom hoặc button-link-custom. |
98
- | imageLeft | `{ src: string; classInclude?: string }` | undefined | Thêm image/icon bên trái nút. |
99
- | classInclude | `string` | `''` | Class CSS thêm cho container nút. |
100
- | classIconLeft | `string` | `''` | Class CSS thêm cho icon bên trái. |
101
- | classIconRight | `string` | `''` | Class CSS thêm cho icon bên phải. |
102
- | classLabel | `string` | `''` | Class CSS thêm cho nhãn (label). |
103
- | iconOnlyType | `boolean` | `false` | Chỉ hiển thị icon, không hiển thị nhãn. |
104
- | ignoreStopPropagationEvent | `boolean` | `true` | Cho phép ngăn chặn hoặc không propagation sự kiện click. |
105
- | zIndex | `number` | `10` | Giá trị z-index của popover. |
106
- | widthLabelPopover | `number` | undefined | Chiều rộng của label popover (px). |
107
- | styleIconLeft | `Record<string, any>` | undefined | Style inline cho icon trái. |
108
- | styleButton | `Record<string, any>` | undefined | Style inline cho button. |
109
- | ignoreFocusWhenInputTab | `boolean` | undefined | Bỏ qua focus khi nhấn Tab. |
110
- | ignoreSetClickWhenShowPopover | `boolean` | undefined | Bỏ qua set click khi show popover. |
111
- | ignorePointerEvent | `boolean` | undefined | Bỏ qua pointer events. |
112
- | isActive | `boolean` | undefined | Trạng thái active của button. |
113
- | isHandlerEnterDocumentClickButton | `boolean` | undefined | Cho phép xử lý event Enter trên document. |
114
-
115
- ### Outputs
116
-
117
- | Tên | Kiểu | Mô tả |
118
- | ------------------- | ------------------------------------------------- | ---------------------------------------------------- |
119
- | outClick | `(event: Event) => void` | Phát ra khi người dùng click vào nút. |
120
- | outPopoverEvent | `(event: TYPE_POPOVER_EVENT) => void` | Phát ra các sự kiện của popover (show, hide, click). |
121
- | outFunctionsControl | `(control: IPopoverFunctionControlEvent) => void` | Cung cấp API để điều khiển popover. |
122
-
123
- ### Interfaces
124
-
125
- #### `TYPE_BUTTON`
126
-
127
- ```typescript
128
- export type TYPE_BUTTON =
129
- | 'button-primary'
130
- | 'button-primary-revert'
131
- | 'button-secondary'
132
- | 'button-secondary-red'
133
- | 'button-outline-secondary'
134
- | 'button-third'
135
- | 'button-outline'
136
- | 'button-danger-high'
137
- | 'button-outline-hover-danger'
138
- | 'button-third-hover-danger'
139
- | 'button-danger-low'
140
- | 'button-green'
141
- | 'button-violet'
142
- | 'button-secondary-green'
143
- | 'button-outline-green'
144
- | 'button-custom'
145
- | 'button-link-primary'
146
- | 'button-link-third'
147
- | 'button-link-danger-high'
148
- | 'button-link-danger-low'
149
- | 'button-link-green'
150
- | 'button-link-violet'
151
- | 'button-link-custom'
152
- | string;
153
- ```
154
-
155
- Mô tả: Các giá trị style của nút được hỗ trợ.
156
-
157
- #### `TYPE_SIZE_BUTTON`
158
-
159
- ```typescript
160
- export type TYPE_SIZE_BUTTON = 'large' | 'medium' | 'small' | 'smaller';
161
- ```
162
-
163
- Mô tả: Các giá trị kích thước của nút được hỗ trợ.
164
-
165
- #### `IPopover`
166
-
167
- ```typescript
168
- export interface IPopover {
169
- type?: TYPE_POPOVER_TYPE;
170
- mode?: TYPE_POPOVER_MODE;
171
- dataView?: string;
172
- config?: IPopoverOverlay;
173
- classInclude?: string;
174
- ignoreShowPopover?: boolean;
175
- }
176
- ```
177
-
178
- Mô tả: Cấu hình chi tiết cho popover (nội dung, vị trí, chế độ hiển thị).