@libs-ui/components-card 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 +174 -83
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,126 +1,172 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @libs-ui/components-card
|
|
2
|
+
|
|
3
|
+
> Component card với header có thể collapse/expand, hỗ trợ custom template và nhiều tùy chỉnh styling.
|
|
2
4
|
|
|
3
5
|
## Giới thiệu
|
|
4
6
|
|
|
5
|
-
`
|
|
7
|
+
`LibsUiComponentsCardComponent` là một standalone Angular component để hiển thị nội dung trong một container có header và body, với khả năng collapse/expand nội dung.
|
|
6
8
|
|
|
7
|
-
|
|
9
|
+
**Version**: 0.2.355-14
|
|
8
10
|
|
|
9
|
-
|
|
10
|
-
- Ẩn/hiện nội dung (collapse/expand) với nút điều khiển
|
|
11
|
-
- Cung cấp sự kiện `outChangeStateShowContent` khi thay đổi trạng thái hiển thị
|
|
12
|
-
- Cung cấp sự kiện `outFunctionsControl` để điều khiển từ bên ngoài qua `IFunctionControlCard`
|
|
13
|
-
- Tùy chỉnh cấu hình giao diện qua `IConfigCard` (padding, border, background, icon)
|
|
14
|
-
- Tùy thêm CSS cho header và body qua các input
|
|
15
|
-
- Hỗ trợ nội dung linh hoạt bên trong qua `<ng-content>`
|
|
11
|
+
### Tính năng
|
|
16
12
|
|
|
17
|
-
|
|
13
|
+
- ✅ Header có thể collapse/expand
|
|
14
|
+
- ✅ Custom template cho header
|
|
15
|
+
- ✅ Two-way binding cho trạng thái ẩn/hiện
|
|
16
|
+
- ✅ Điều khiển từ component cha thông qua FunctionsControl
|
|
17
|
+
- ✅ Nhiều tùy chỉnh styling (border, background, icon position...)
|
|
18
|
+
- ✅ OnPush Change Detection
|
|
19
|
+
- ✅ Angular Signals
|
|
18
20
|
|
|
19
|
-
|
|
21
|
+
## Khi nào sử dụng
|
|
20
22
|
|
|
21
|
-
-
|
|
22
|
-
-
|
|
23
|
+
- Hiển thị nội dung trong một container có header và body
|
|
24
|
+
- Cần collapse/expand nội dung để tiết kiệm không gian
|
|
25
|
+
- Tạo các section có thể đóng/mở trong form hoặc dashboard
|
|
26
|
+
- Nhóm các thông tin liên quan với nhau
|
|
23
27
|
|
|
24
|
-
|
|
28
|
+
## ⚠️ Important Notes
|
|
25
29
|
|
|
26
|
-
|
|
30
|
+
- **clickExactly**: Khi true, chỉ click vào icon collapse mới toggle. Khi false, click vào toàn bộ header sẽ toggle.
|
|
31
|
+
- **templateHeader**: Khi sử dụng custom template header, label input sẽ bị ignore.
|
|
32
|
+
- **FunctionsControl**: Emit qua outFunctionsControl trong ngOnInit, cần lưu reference để điều khiển từ component cha.
|
|
33
|
+
|
|
34
|
+
## Cài đặt
|
|
27
35
|
|
|
28
36
|
```bash
|
|
37
|
+
# npm
|
|
29
38
|
npm install @libs-ui/components-card
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
hoặc
|
|
33
39
|
|
|
34
|
-
|
|
40
|
+
# yarn
|
|
35
41
|
yarn add @libs-ui/components-card
|
|
36
42
|
```
|
|
37
43
|
|
|
38
|
-
##
|
|
39
|
-
|
|
40
|
-
### Cách 1: Inline template
|
|
44
|
+
## Import
|
|
41
45
|
|
|
42
46
|
```typescript
|
|
43
|
-
import {
|
|
44
|
-
import { LibsUiComponentsCardComponent } from '@libs-ui/components-card';
|
|
47
|
+
import { LibsUiComponentsCardComponent, IConfigCard, IFunctionControlCard } from '@libs-ui/components-card';
|
|
45
48
|
|
|
46
49
|
@Component({
|
|
47
|
-
selector: 'app-example',
|
|
48
50
|
standalone: true,
|
|
49
51
|
imports: [LibsUiComponentsCardComponent],
|
|
50
|
-
|
|
51
|
-
<libs_ui-components-card
|
|
52
|
-
[label]="{ labelLeft: 'Tiêu đề Card', popover: {} }"
|
|
53
|
-
[hasCollapseBtn]="true"
|
|
54
|
-
[configCard]="{ width: '300px' }">
|
|
55
|
-
Nội dung ví dụ bên trong Card.
|
|
56
|
-
</libs_ui-components-card>
|
|
57
|
-
`,
|
|
52
|
+
// ...
|
|
58
53
|
})
|
|
59
|
-
export class
|
|
54
|
+
export class YourComponent {}
|
|
60
55
|
```
|
|
61
56
|
|
|
62
|
-
|
|
57
|
+
## Ví dụ
|
|
58
|
+
|
|
59
|
+
### Basic Usage
|
|
60
|
+
|
|
61
|
+
```html
|
|
62
|
+
<libs_ui-components-card [label]="{ labelLeft: 'Card Title' }">
|
|
63
|
+
<p>Card content goes here</p>
|
|
64
|
+
</libs_ui-components-card>
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
### Collapsible Card
|
|
63
68
|
|
|
64
69
|
```html
|
|
65
|
-
<!-- example.component.html -->
|
|
66
70
|
<libs_ui-components-card
|
|
67
|
-
[label]="{ labelLeft: '
|
|
68
|
-
[ignoreTitle]="false"
|
|
71
|
+
[label]="{ labelLeft: 'Collapsible Card', required: true }"
|
|
69
72
|
[hasCollapseBtn]="true"
|
|
70
|
-
[
|
|
71
|
-
|
|
72
|
-
|
|
73
|
+
[(isHidden)]="isCardHidden"
|
|
74
|
+
(outChangeStateShowContent)="onStateChange($event)">
|
|
75
|
+
<div class="p-4">
|
|
76
|
+
<p>This content can be collapsed/expanded</p>
|
|
77
|
+
</div>
|
|
73
78
|
</libs_ui-components-card>
|
|
74
79
|
```
|
|
75
80
|
|
|
76
81
|
```typescript
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
import { LibsUiComponentsCardComponent } from '@libs-ui/components-card';
|
|
82
|
+
export class ExampleComponent {
|
|
83
|
+
isCardHidden = signal<boolean>(false);
|
|
80
84
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
templateUrl: './example.component.html',
|
|
86
|
-
})
|
|
87
|
-
export class ExampleComponent {}
|
|
85
|
+
onStateChange(isHidden: boolean) {
|
|
86
|
+
console.log('Card is now:', isHidden ? 'hidden' : 'visible');
|
|
87
|
+
}
|
|
88
|
+
}
|
|
88
89
|
```
|
|
89
90
|
|
|
90
|
-
|
|
91
|
+
### Custom Configuration
|
|
91
92
|
|
|
92
|
-
|
|
93
|
-
-
|
|
93
|
+
```html
|
|
94
|
+
<libs_ui-components-card
|
|
95
|
+
[label]="{ labelLeft: 'Custom Styled Card' }"
|
|
96
|
+
[hasCollapseBtn]="true"
|
|
97
|
+
[configCard]="{
|
|
98
|
+
ignoreBorderHeader: false,
|
|
99
|
+
ignoreBackgroundHeader: false,
|
|
100
|
+
iconConRight: true,
|
|
101
|
+
classIncludeLabel: 'text-lg font-bold text-blue-600'
|
|
102
|
+
}"
|
|
103
|
+
[classIncludeBody]="'bg-gray-50 p-6'">
|
|
104
|
+
<div>
|
|
105
|
+
<h3>Custom Configuration</h3>
|
|
106
|
+
<p>Icon on the right, custom label styling, custom body background</p>
|
|
107
|
+
</div>
|
|
108
|
+
</libs_ui-components-card>
|
|
109
|
+
```
|
|
94
110
|
|
|
95
|
-
|
|
111
|
+
### External Control
|
|
96
112
|
|
|
97
|
-
|
|
113
|
+
```html
|
|
114
|
+
<button (click)="cardControls?.changeHidden()">Toggle Card Content</button>
|
|
98
115
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
| `classIncludeHeaderWhenHiddenContent` | `string` | `-` | CSS class khi header ở trạng thái ẩn nội dung |
|
|
116
|
+
<libs_ui-components-card
|
|
117
|
+
[label]="{ labelLeft: 'Externally Controlled Card' }"
|
|
118
|
+
[hasCollapseBtn]="true"
|
|
119
|
+
(outFunctionsControl)="cardControls = $event"
|
|
120
|
+
(outChangeStateShowContent)="isCardHidden = $event">
|
|
121
|
+
<div class="p-4">
|
|
122
|
+
<p>This card can be controlled from external buttons</p>
|
|
123
|
+
</div>
|
|
124
|
+
</libs_ui-components-card>
|
|
125
|
+
```
|
|
110
126
|
|
|
111
|
-
|
|
127
|
+
```typescript
|
|
128
|
+
export class ExampleComponent {
|
|
129
|
+
cardControls: IFunctionControlCard | null = null;
|
|
130
|
+
isCardHidden = false;
|
|
131
|
+
}
|
|
132
|
+
```
|
|
112
133
|
|
|
113
|
-
|
|
114
|
-
| --------------------------- | ---------------------- | ----------------------------------------------------- |
|
|
115
|
-
| `outChangeStateShowContent` | `boolean` | Sự kiện emit khi trạng thái ẩn/hiện nội dung thay đổi |
|
|
116
|
-
| `outFunctionsControl` | `IFunctionControlCard` | Sự kiện cung cấp function control từ bên ngoài |
|
|
134
|
+
## API
|
|
117
135
|
|
|
118
|
-
###
|
|
136
|
+
### libs_ui-components-card
|
|
119
137
|
|
|
120
|
-
####
|
|
138
|
+
#### Inputs
|
|
139
|
+
|
|
140
|
+
| Property | Type | Default | Description |
|
|
141
|
+
| --------------------------------------- | ----------------- | ----------- | ------------------------------------------------------------ |
|
|
142
|
+
| `[classIncludeBody]` | `string` | `-` | Class CSS thêm vào body |
|
|
143
|
+
| `[classIncludeHeader]` | `string` | `-` | Class CSS thêm vào header |
|
|
144
|
+
| `[classIncludeHeaderWhenHiddenContent]` | `string` | `-` | Class CSS thêm vào header khi content bị ẩn |
|
|
145
|
+
| `[clickExactly]` | `boolean` | `false` | True: chỉ click icon mới toggle. False: click toàn bộ header |
|
|
146
|
+
| `[configCard]` | `IConfigCard` | `undefined` | Cấu hình styling và behavior của card |
|
|
147
|
+
| `[hasCollapseBtn]` | `boolean` | `false` | Hiển thị nút collapse/expand |
|
|
148
|
+
| `[ignoreTitle]` | `boolean` | `false` | Ẩn header, chỉ hiển thị body |
|
|
149
|
+
| `[isHidden]` | `boolean (model)` | `false` | Trạng thái ẩn/hiện content (two-way binding) |
|
|
150
|
+
| `[label]` | `ILabel` | `undefined` | Label hiển thị trong header |
|
|
151
|
+
| `[templateHeader]` | `TemplateRef` | `undefined` | Custom template cho header (override label) |
|
|
152
|
+
|
|
153
|
+
#### Outputs
|
|
154
|
+
|
|
155
|
+
| Property | Type | Description |
|
|
156
|
+
| ----------------------------- | ---------------------- | -------------------------------------------------- |
|
|
157
|
+
| `(outChangeStateShowContent)` | `boolean` | Emit khi trạng thái ẩn/hiện thay đổi |
|
|
158
|
+
| `(outFunctionsControl)` | `IFunctionControlCard` | Emit functions để điều khiển card từ component cha |
|
|
159
|
+
|
|
160
|
+
#### IFunctionControlCard Methods
|
|
161
|
+
|
|
162
|
+
| Method | Description |
|
|
163
|
+
| ---------------- | --------------------------------- |
|
|
164
|
+
| `changeHidden()` | Toggle trạng thái ẩn/hiện content |
|
|
165
|
+
|
|
166
|
+
## Types & Interfaces
|
|
121
167
|
|
|
122
168
|
```typescript
|
|
123
|
-
|
|
169
|
+
interface IConfigCard {
|
|
124
170
|
ignorePaddingLeft?: boolean;
|
|
125
171
|
ignoreBorderHeader?: boolean;
|
|
126
172
|
ignoreBackgroundHeader?: boolean;
|
|
@@ -133,16 +179,61 @@ export interface IConfigCard {
|
|
|
133
179
|
ignoreBorderRadiusHeader?: boolean;
|
|
134
180
|
ignoreBorderBody?: boolean;
|
|
135
181
|
}
|
|
182
|
+
|
|
183
|
+
interface IFunctionControlCard {
|
|
184
|
+
changeHidden: () => Promise<void>;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
interface ILabel {
|
|
188
|
+
labelLeft?: string;
|
|
189
|
+
required?: boolean;
|
|
190
|
+
popover?: string;
|
|
191
|
+
}
|
|
136
192
|
```
|
|
137
193
|
|
|
138
|
-
|
|
194
|
+
### IConfigCard
|
|
139
195
|
|
|
140
|
-
|
|
196
|
+
Cấu hình styling và behavior của card component.
|
|
141
197
|
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
198
|
+
### IFunctionControlCard
|
|
199
|
+
|
|
200
|
+
Interface chứa methods để điều khiển card từ component cha.
|
|
201
|
+
|
|
202
|
+
### ILabel
|
|
203
|
+
|
|
204
|
+
Cấu hình label hiển thị trong header.
|
|
205
|
+
|
|
206
|
+
## Công nghệ
|
|
207
|
+
|
|
208
|
+
| Technology | Version | Purpose |
|
|
209
|
+
| --------------- | ------- | ---------------- |
|
|
210
|
+
| Angular | 18+ | Framework |
|
|
211
|
+
| Angular Signals | - | State management |
|
|
212
|
+
| OnPush | - | Change Detection |
|
|
213
|
+
|
|
214
|
+
## Demo
|
|
215
|
+
|
|
216
|
+
**Local**: [http://localhost:4500/card](http://localhost:4500/card)
|
|
217
|
+
|
|
218
|
+
```bash
|
|
219
|
+
npx nx serve core-ui
|
|
146
220
|
```
|
|
147
221
|
|
|
148
|
-
|
|
222
|
+
Truy cập: `http://localhost:4500/card`
|
|
223
|
+
|
|
224
|
+
## Unit Tests
|
|
225
|
+
|
|
226
|
+
```bash
|
|
227
|
+
# Chạy tests
|
|
228
|
+
npx nx test components-card
|
|
229
|
+
|
|
230
|
+
# Coverage
|
|
231
|
+
npx nx test components-card --coverage
|
|
232
|
+
|
|
233
|
+
# Watch mode
|
|
234
|
+
npx nx test components-card --watch
|
|
235
|
+
```
|
|
236
|
+
|
|
237
|
+
## License
|
|
238
|
+
|
|
239
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-card",
|
|
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-label": "0.2.
|
|
8
|
-
"@libs-ui/interfaces-types": "0.2.
|
|
7
|
+
"@libs-ui/components-label": "0.2.356-0",
|
|
8
|
+
"@libs-ui/interfaces-types": "0.2.356-0",
|
|
9
9
|
"@ngx-translate/core": "^15.0.0"
|
|
10
10
|
},
|
|
11
11
|
"sideEffects": false,
|