@libs-ui/components-radio-single 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.
Files changed (2) hide show
  1. package/README.md +117 -2
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -1,3 +1,118 @@
1
- # radio-single
1
+ # @libs-ui/components-radio-single
2
2
 
3
- This library was generated with [Nx](https://nx.dev).
3
+ > Component hiển thị một radio button đơn lẻ, cho phép người dùng chọn hoặc bỏ chọn (tùy thuộc vào logic xử lý bên ngoài).
4
+
5
+ ## Giới thiệu
6
+
7
+ `LibsUiComponentsRadioSingleComponent` là một standalone Angular component dùng để hiển thị một radio button. Nó hoạt động như một "dumb component" (uncontrolled), nghĩa là trạng thái active thường được kiểm soát bởi parent hoặc một logic group bên ngoài. Component hỗ trợ nhiều tùy chỉnh về giao diện như label, icon, avatar, và tooltip.
8
+
9
+ ### Tính năng
10
+
11
+ - ✅ **Uncontrolled State**: Trạng thái `active` được điều khiển qua input two-way binding (`model<boolean>`).
12
+ - ✅ **Rich Content**: Hỗ trợ Label, Avatar, Custom Icon, và Popover Tooltip.
13
+ - ✅ **Interaction Control**: `clickExactly` cho phép kiểm soát vùng click (chỉ icon/label hoặc toàn bộ container).
14
+ - ✅ **Custom Styling**: Cung cấp nhiều input class để tùy biến giao diện dễ dàng.
15
+
16
+ ## Khi nào sử dụng
17
+
18
+ - Khi cần một radio button hoạt động độc lập (không cần group logic phức tạp).
19
+ - Custom radio button layout (kết hợp với avatar, icon, popover).
20
+ - Dùng để xây dựng các component phức tạp hơn như Radio Group style custom.
21
+
22
+ ## Cài đặt
23
+
24
+ ```bash
25
+ # npm
26
+ npm install @libs-ui/components-radio-single
27
+
28
+ # yarn
29
+ yarn add @libs-ui/components-radio-single
30
+ ```
31
+
32
+ ## Import
33
+
34
+ ```typescript
35
+ import { LibsUiComponentsRadioSingleComponent } from '@libs-ui/components-radio-single';
36
+
37
+ @Component({
38
+ standalone: true,
39
+ imports: [LibsUiComponentsRadioSingleComponent],
40
+ // ...
41
+ })
42
+ export class YourComponent {}
43
+ ```
44
+
45
+ ## Ví dụ
46
+
47
+ ### Basic Usage
48
+
49
+ ```html
50
+ <libs_ui-components-radio-single
51
+ [active]="isActive"
52
+ (outChange)="isActive = $event.active"
53
+ label="Option 1" />
54
+ ```
55
+
56
+ ### With Avatar
57
+
58
+ ```html
59
+ <libs_ui-components-radio-single
60
+ [active]="isActive"
61
+ [avatarConfig]="{ linkAvatar: '...', size: 32 }"
62
+ label="User Option" />
63
+ ```
64
+
65
+ ## API
66
+
67
+ ### libs_ui-components-radio-single
68
+
69
+ #### Inputs
70
+
71
+ | Property | Type | Default | Description |
72
+ | -------------------------- | ------------------------- | -------------------- | ------------------------------------------------------------------------------ |
73
+ | `[active]` | `model<boolean>` | `false` | Trạng thái active (checked) của radio. |
74
+ | `[key]` | `unknown` | `undefined` | Key định danh cho radio button. |
75
+ | `[label]` | `string` | `''` | Label hiển thị bên cạnh radio. |
76
+ | `[disable]` | `boolean` | `false` | Vô hiệu hóa tương tác. |
77
+ | `[clickExactly]` | `boolean` | `true` | `true`: chỉ click icon/label mới active. `false`: click container cũng active. |
78
+ | `[typeRadio]` | `'normal' \| 'medium'` | `'normal'` | Kích thước/kiểu dáng radio. |
79
+ | `[avatarConfig]` | `IAvatarConfig` | `undefined` | Cấu hình hiển thị avatar. |
80
+ | `[popover]` | `IPopover` | `undefined` | Cấu hình popover tooltip. |
81
+ | `[classInclude]` | `string` | `''` | Custom class cho container. |
82
+ | `[classLabelInclude]` | `string` | `'libs-ui-font-h4r'` | Custom class cho label. |
83
+ | `[classIncludeIcon]` | `string` | `''` | Custom class cho icon radio. |
84
+ | `[labelInterpolateParams]` | `Record<string, unknown>` | `{}` | Params cho translate pipe của label. |
85
+ | `[ignoreRadio]` | `boolean` | `false` | Ẩn icon radio (chỉ hiển thị label/avatar). |
86
+
87
+ #### Outputs
88
+
89
+ | Property | Type | Description |
90
+ | ----------------- | ------------- | ------------------------------------------------- |
91
+ | `(outChange)` | `IRadioEvent` | Emit khi trạng thái thay đổi (`{ active, key }`). |
92
+ | `(outClickLabel)` | `void` | Emit khi click vào label. |
93
+
94
+ #### Interfaces
95
+
96
+ **IRadioEvent**
97
+
98
+ | Property | Type | Description |
99
+ | -------- | --------- | ------------------------------ |
100
+ | `active` | `boolean` | Trạng thái mới sau khi change. |
101
+ | `key` | `any` | Key của radio button. |
102
+ | `item` | `any` | (Optional) Item data đi kèm. |
103
+
104
+ ## Công nghệ
105
+
106
+ | Technology | Version | Purpose |
107
+ | --------------- | ------- | ---------------- |
108
+ | Angular | 18+ | Framework |
109
+ | Angular Signals | - | State management |
110
+ | OnPush | - | Change Detection |
111
+
112
+ ## Demo
113
+
114
+ ```bash
115
+ npx nx serve core-ui
116
+ ```
117
+
118
+ Truy cập path: `/components/radio/single`
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@libs-ui/components-radio-single",
3
- "version": "0.2.355-13",
3
+ "version": "0.2.355-15",
4
4
  "peerDependencies": {
5
5
  "@angular/core": ">=18.0.0",
6
- "@libs-ui/components-avatar": "0.2.355-13",
7
- "@libs-ui/components-popover": "0.2.355-13",
6
+ "@libs-ui/components-avatar": "0.2.355-15",
7
+ "@libs-ui/components-popover": "0.2.355-15",
8
8
  "@ngx-translate/core": "^15.0.0",
9
9
  "rxjs": "~7.8.0"
10
10
  },