@libs-ui/components-card 0.2.355-13 → 0.2.355-15
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 +239 -0
- package/package.json +3 -3
package/README.md
ADDED
|
@@ -0,0 +1,239 @@
|
|
|
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.
|
|
4
|
+
|
|
5
|
+
## Giới thiệu
|
|
6
|
+
|
|
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.
|
|
8
|
+
|
|
9
|
+
**Version**: 0.2.355-14
|
|
10
|
+
|
|
11
|
+
### Tính năng
|
|
12
|
+
|
|
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
|
|
20
|
+
|
|
21
|
+
## Khi nào sử dụng
|
|
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
|
|
27
|
+
|
|
28
|
+
## ⚠️ Important Notes
|
|
29
|
+
|
|
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
|
|
35
|
+
|
|
36
|
+
```bash
|
|
37
|
+
# npm
|
|
38
|
+
npm install @libs-ui/components-card
|
|
39
|
+
|
|
40
|
+
# yarn
|
|
41
|
+
yarn add @libs-ui/components-card
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
## Import
|
|
45
|
+
|
|
46
|
+
```typescript
|
|
47
|
+
import { LibsUiComponentsCardComponent, IConfigCard, IFunctionControlCard } from '@libs-ui/components-card';
|
|
48
|
+
|
|
49
|
+
@Component({
|
|
50
|
+
standalone: true,
|
|
51
|
+
imports: [LibsUiComponentsCardComponent],
|
|
52
|
+
// ...
|
|
53
|
+
})
|
|
54
|
+
export class YourComponent {}
|
|
55
|
+
```
|
|
56
|
+
|
|
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
|
|
68
|
+
|
|
69
|
+
```html
|
|
70
|
+
<libs_ui-components-card
|
|
71
|
+
[label]="{ labelLeft: 'Collapsible Card', required: true }"
|
|
72
|
+
[hasCollapseBtn]="true"
|
|
73
|
+
[(isHidden)]="isCardHidden"
|
|
74
|
+
(outChangeStateShowContent)="onStateChange($event)">
|
|
75
|
+
<div class="p-4">
|
|
76
|
+
<p>This content can be collapsed/expanded</p>
|
|
77
|
+
</div>
|
|
78
|
+
</libs_ui-components-card>
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
```typescript
|
|
82
|
+
export class ExampleComponent {
|
|
83
|
+
isCardHidden = signal<boolean>(false);
|
|
84
|
+
|
|
85
|
+
onStateChange(isHidden: boolean) {
|
|
86
|
+
console.log('Card is now:', isHidden ? 'hidden' : 'visible');
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
### Custom Configuration
|
|
92
|
+
|
|
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
|
+
```
|
|
110
|
+
|
|
111
|
+
### External Control
|
|
112
|
+
|
|
113
|
+
```html
|
|
114
|
+
<button (click)="cardControls?.changeHidden()">Toggle Card Content</button>
|
|
115
|
+
|
|
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
|
+
```
|
|
126
|
+
|
|
127
|
+
```typescript
|
|
128
|
+
export class ExampleComponent {
|
|
129
|
+
cardControls: IFunctionControlCard | null = null;
|
|
130
|
+
isCardHidden = false;
|
|
131
|
+
}
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
## API
|
|
135
|
+
|
|
136
|
+
### libs_ui-components-card
|
|
137
|
+
|
|
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
|
|
167
|
+
|
|
168
|
+
```typescript
|
|
169
|
+
interface IConfigCard {
|
|
170
|
+
ignorePaddingLeft?: boolean;
|
|
171
|
+
ignoreBorderHeader?: boolean;
|
|
172
|
+
ignoreBackgroundHeader?: boolean;
|
|
173
|
+
iconConRight?: boolean;
|
|
174
|
+
width?: string;
|
|
175
|
+
classIncludeLabel?: string;
|
|
176
|
+
classIconInclude?: string;
|
|
177
|
+
classIconWhenShowContent?: string;
|
|
178
|
+
classIconWhenHiddenContent?: string;
|
|
179
|
+
ignoreBorderRadiusHeader?: boolean;
|
|
180
|
+
ignoreBorderBody?: boolean;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
interface IFunctionControlCard {
|
|
184
|
+
changeHidden: () => Promise<void>;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
interface ILabel {
|
|
188
|
+
labelLeft?: string;
|
|
189
|
+
required?: boolean;
|
|
190
|
+
popover?: string;
|
|
191
|
+
}
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
### IConfigCard
|
|
195
|
+
|
|
196
|
+
Cấu hình styling và behavior của card component.
|
|
197
|
+
|
|
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
|
|
220
|
+
```
|
|
221
|
+
|
|
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.355-
|
|
3
|
+
"version": "0.2.355-15",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/common": ">=18.0.0",
|
|
6
6
|
"@angular/core": ">=18.0.0",
|
|
7
|
-
"@libs-ui/components-label": "0.2.355-
|
|
8
|
-
"@libs-ui/interfaces-types": "0.2.355-
|
|
7
|
+
"@libs-ui/components-label": "0.2.355-15",
|
|
8
|
+
"@libs-ui/interfaces-types": "0.2.355-15",
|
|
9
9
|
"@ngx-translate/core": "^15.0.0"
|
|
10
10
|
},
|
|
11
11
|
"sideEffects": false,
|