@libs-ui/components-radio-group 0.2.355-9 → 0.2.356-1

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 +140 -2
  2. package/package.json +6 -6
package/README.md CHANGED
@@ -1,3 +1,141 @@
1
- # radio-group
1
+ # @libs-ui/components-radio-group
2
2
 
3
- This library was generated with [Nx](https://nx.dev).
3
+ > Component hiển thị nhóm các lựa chọn Radio buttons, hỗ trợ layout ngang/dọc, validation và custom template.
4
+
5
+ ## Giới thiệu
6
+
7
+ `LibsUiComponentsRadioGroupComponent` là một standalone Angular component cho phép người dùng chọn một mục duy nhất từ một danh sách các tuỳ chọn. Component này được thiết kế để thay thế cho thẻ `<input type="radio">` mặc định, với nhiều tính năng nâng cao như validation, cấu hình label chung, hỗ trợ template tuỳ chỉnh, và layout linh hoạt.
8
+
9
+ ### Tính năng
10
+
11
+ - ✅ **Flexible Layout**: Hỗ trợ hiển thị theo chiều dọc (mặc định) hoặc chiều ngang (`horizontal`).
12
+ - ✅ **Rich Content**: Hỗ trợ hiển thị Label, Description, Sub-text, và Custom Template cho từng item.
13
+ - ✅ **Validation Support**: Tích hợp validation `required` và hiển thị thông báo lỗi.
14
+ - ✅ **Global Config**: Cấu hình chung cho toàn bộ group (disable, label, class).
15
+ - ✅ **Reactive**: Tích hợp chặt chẽ với Angular Signals và Forms.
16
+ - ✅ **Control API**: Cung cấp API để kiểm soát validation và reset state từ bên ngoài.
17
+
18
+ ## Khi nào sử dụng
19
+
20
+ - Khi người dùng cần chọn chính xác một tùy chọn trong danh sách.
21
+ - Thay thế cho dropdown khi số lượng tùy chọn ít (dưới 5) để người dùng có thể nhìn thấy tất cả các lựa chọn ngay lập tức.
22
+ - Cần hiển thị chi tiết phụ (sub-text) mô tả cho từng tùy chọn để giúp người dùng ra quyết định.
23
+
24
+ ## Cài đặt
25
+
26
+ ```bash
27
+ # npm
28
+ npm install @libs-ui/components-radio-group
29
+
30
+ # yarn
31
+ yarn add @libs-ui/components-radio-group
32
+ ```
33
+
34
+ ## Import
35
+
36
+ ```typescript
37
+ import { LibsUiComponentsRadioGroupComponent } from '@libs-ui/components-radio-group';
38
+
39
+ @Component({
40
+ standalone: true,
41
+ imports: [LibsUiComponentsRadioGroupComponent],
42
+ // ...
43
+ })
44
+ export class YourComponent {}
45
+ ```
46
+
47
+ ## Ví dụ
48
+
49
+ ### Basic Usage
50
+
51
+ ```html
52
+ <libs_ui-components-radio-group
53
+ [groups]="groups()"
54
+ (outChange)="onChange($event)" />
55
+ ```
56
+
57
+ ```typescript
58
+ readonly groups = signal<IRadioGroupItem[]>([
59
+ { item: { key: 'opt1', label: 'Option 1', active: true } },
60
+ { item: { key: 'opt2', label: 'Option 2', active: false } }
61
+ ]);
62
+ ```
63
+
64
+ ### With Validation & Label
65
+
66
+ ```html
67
+ <libs_ui-components-radio-group
68
+ [groups]="groups()"
69
+ [labelConfig]="{ labelLeft: 'Choose Plan', required: true }"
70
+ [validRequired]="{ message: 'Plan is required' }"
71
+ (outFunctionsControl)="control = $event" />
72
+ ```
73
+
74
+ ## API
75
+
76
+ ### libs_ui-components-radio-group
77
+
78
+ #### Inputs
79
+
80
+ | Property | Type | Default | Description |
81
+ | ----------------------------- | ------------------------ | ------------ | ------------------------------------------------------------- |
82
+ | `[groups]` | `Array<IRadioGroupItem>` | `[]` | Danh sách các nhóm radio buttons (Model Input). |
83
+ | `[keyActive]` | `unknown` | `undefined` | Giá trị key của item đang active (để set initial state). |
84
+ | `[fieldKey]` | `string` | `'key'` | Tên property dùng làm key định danh trong item. |
85
+ | `[keysDisable]` | `Array<string>` | `undefined` | Danh sách các keys bị disable. |
86
+ | `[horizontal]` | `boolean` | `false` | Hiển thị theo chiều ngang. |
87
+ | `[disable]` | `boolean` | `false` | Vô hiệu hóa toàn bộ group. |
88
+ | `[labelConfig]` | `ILabel` | `undefined` | Cấu hình label cho toàn bộ group. |
89
+ | `[validRequired]` | `{ message?: string }` | `undefined` | Cấu hình validation bắt buộc chọn. |
90
+ | `[typeRadio]` | `'normal' \| 'medium'` | `'normal'` | Kích thước của radio (mặc định cho cả group). |
91
+ | `[alwaysShowSubText]` | `boolean` | `false` | Luôn hiển thị sub-text của item. |
92
+ | `[ignoreClassMarginLastItem]` | `boolean` | `false` | Ẩn class margin cho item cuối cùng. |
93
+ | `[horizontalClassInclude]` | `string` | `''` | Class margin cho item trong chế độ horizontal. |
94
+ | `[classInclude]` | `string` | `''` | Custom class cho từng radio trong group. |
95
+ | `[classLabelInclude]` | `string` | `''` | Custom class cho label của từng radio. |
96
+ | `[classItemInclude]` | `string` | `'py-[4px]'` | Class cho từng item wrapper. |
97
+ | `[clickExactly]` | `boolean` | `true` | Yêu cầu click chính xác vào radio (true) hay cả dòng (false). |
98
+
99
+ #### Outputs
100
+
101
+ | Property | Type | Description |
102
+ | ----------------------- | --------------------------------- | ---------------------------------------------------------------------- |
103
+ | `(outChange)` | `IRadioEvent` | Emit khi người dùng thay đổi lựa chọn. |
104
+ | `(outClickButton)` | `IButton` | Emit khi click vào button trong label config (nếu có). |
105
+ | `(outFunctionsControl)` | `IRadioGroupFunctionControlEvent` | Emit object chứa các hàm điều khiển (checkIsValid, reset, resetError). |
106
+
107
+ #### Interfaces
108
+
109
+ **IRadioGroupItem**
110
+
111
+ | Property | Type | Description |
112
+ | --------------------- | ------------- | -------------------------------------------------------------- |
113
+ | `item` | `IRadioItem` | Object chứa thông tin chính của radio (key, label, active...). |
114
+ | `subText` | `string` | Text phụ hiển thị dưới radio. |
115
+ | `classIncludeSubText` | `string` | Class cho text phụ. |
116
+ | `subTemplate` | `TemplateRef` | Template custom hiển thị dưới radio. |
117
+ | `disableByKeys` | `boolean` | Disable item dựa trên keysDisable input. |
118
+
119
+ **IRadioGroupFunctionControlEvent**
120
+
121
+ | Method | Description |
122
+ | ---------------- | ---------------------------------------------------------------------------------------- |
123
+ | `checkIsValid()` | Kiểm tra validation `required` và hiển thị lỗi nếu chưa chọn. Trả về `Promise<boolean>`. |
124
+ | `resetError()` | Xóa trạng thái lỗi. |
125
+ | `reset()` | Reset toàn bộ selection về trạng thái ban đầu và xóa lỗi. |
126
+
127
+ ## Công nghệ
128
+
129
+ | Technology | Version | Purpose |
130
+ | --------------- | ------- | ---------------- |
131
+ | Angular | 18+ | Framework |
132
+ | Angular Signals | - | State management |
133
+ | OnPush | - | Change Detection |
134
+
135
+ ## Demo
136
+
137
+ ```bash
138
+ npx nx serve core-ui
139
+ ```
140
+
141
+ Truy cập path: `/components/radio/group`
package/package.json CHANGED
@@ -1,15 +1,15 @@
1
1
  {
2
2
  "name": "@libs-ui/components-radio-group",
3
- "version": "0.2.355-9",
3
+ "version": "0.2.356-1",
4
4
  "peerDependencies": {
5
5
  "@angular/common": ">=18.0.0",
6
6
  "@angular/core": ">=18.0.0",
7
- "@libs-ui/components-buttons-button": "0.2.355-9",
8
- "@libs-ui/components-label": "0.2.355-9",
9
- "@libs-ui/components-radio-single": "0.2.355-9",
10
- "@libs-ui/utils": "0.2.355-9",
7
+ "@libs-ui/components-buttons-button": "0.2.356-1",
8
+ "@libs-ui/components-label": "0.2.356-1",
9
+ "@libs-ui/components-radio-single": "0.2.356-1",
10
+ "@libs-ui/utils": "0.2.356-1",
11
11
  "@ngx-translate/core": "^15.0.0",
12
- "@libs-ui/interfaces-types": "0.2.355-9"
12
+ "@libs-ui/interfaces-types": "0.2.356-1"
13
13
  },
14
14
  "sideEffects": false,
15
15
  "module": "fesm2022/libs-ui-components-radio-group.mjs",