@libs-ui/components-radio-single 0.2.355-9 → 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 +128 -2
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,3 +1,129 @@
|
|
|
1
|
-
# radio-single
|
|
1
|
+
# @libs-ui/components-radio-single
|
|
2
2
|
|
|
3
|
-
|
|
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
|
+
| `[labelInterpolateParams]` | `Record<string, unknown>` | `{}` | Params cho translate pipe của label. |
|
|
77
|
+
| `[disable]` | `boolean` | `false` | Vô hiệu hóa tương tác. |
|
|
78
|
+
| `[disableLabel]` | `boolean` | `false` | Vô hiệu hóa màu của label, vẫn cho phép chọn radio. |
|
|
79
|
+
| `[clickExactly]` | `boolean` | `true` | `true`: chỉ click icon mới active. `false`: click container cũng active. |
|
|
80
|
+
| `[typeRadio]` | `'normal' \| 'medium'` | `'normal'` | Kích thước/kiểu dáng radio. |
|
|
81
|
+
| `[ignoreRadio]` | `boolean` | `false` | Ẩn icon radio (chĩa hiển thị label/avatar). |
|
|
82
|
+
| `[linkImage]` | `string` | `''` | URL hình ảnh hiển thị cạnh label. |
|
|
83
|
+
| `[linkImageError]` | `string` | `''` | URL hình ảnh dự phòng nếu linkImage lỗi. |
|
|
84
|
+
| `[avatarConfig]` | `IAvatarConfig` | `undefined` | Cấu hình hiển thị avatar. |
|
|
85
|
+
| `[classImageInclude]` | `string` | `''` | Custom class cho hình ảnh. |
|
|
86
|
+
| `[imgTypeIcon]` | `boolean` | `false` | Nếu true, hình ảnh sẽ được cố định size 18x18px. |
|
|
87
|
+
| `[bullet]` | `Record<string, string>` | `undefined` | Cấu hình style (CSS) cho bullet point cạnh radio. |
|
|
88
|
+
| `[popover]` | `IPopover` | `undefined` | Cấu hình popover tooltip cho label. |
|
|
89
|
+
| `[ignorePopoverLabel]` | `boolean` | `false` | Không hiển thị popover của label dù có cấu hình. |
|
|
90
|
+
| `[zIndexLabel]` | `number` | `1200` | z-index cho label. |
|
|
91
|
+
| `[classInclude]` | `string` | `''` | Custom class cho container. |
|
|
92
|
+
| `[classLabelInclude]` | `string` | `'libs-ui-font-h4r'` | Custom class cho label. |
|
|
93
|
+
| `[classIncludeIcon]` | `string` | `''` | Custom class cho icon radio. |
|
|
94
|
+
| `[dataComponentOutlet]` | `TYPE_COMPONENT_OUTLET_DATA` | `undefined` | Data truyền vào component outlet. |
|
|
95
|
+
| `[componentOutlet]` | `any` | `undefined` | Component truyền vào để hiển thị qua outlet. |
|
|
96
|
+
|
|
97
|
+
#### Outputs
|
|
98
|
+
|
|
99
|
+
| Property | Type | Description |
|
|
100
|
+
| --------------------------------- | ------------- | -------------------------------------------------------- |
|
|
101
|
+
| `(outChange)` | `IRadioEvent` | Emit khi trạng thái thay đổi (`{ active, key }`). |
|
|
102
|
+
| `(outClickLabel)` | `void` | Emit khi click vào label. |
|
|
103
|
+
| `(outChangStageFlagMousePopover)` | `IFlagMouse` | Emit trạng thái con trỏ chuột khi tương tác với tooltip. |
|
|
104
|
+
|
|
105
|
+
#### Interfaces
|
|
106
|
+
|
|
107
|
+
**IRadioEvent**
|
|
108
|
+
|
|
109
|
+
| Property | Type | Description |
|
|
110
|
+
| -------- | --------- | ------------------------------ |
|
|
111
|
+
| `active` | `boolean` | Trạng thái mới sau khi change. |
|
|
112
|
+
| `key` | `any` | Key của radio button. |
|
|
113
|
+
| `item` | `any` | (Optional) Item data đi kèm. |
|
|
114
|
+
|
|
115
|
+
## Công nghệ
|
|
116
|
+
|
|
117
|
+
| Technology | Version | Purpose |
|
|
118
|
+
| --------------- | ------- | ---------------- |
|
|
119
|
+
| Angular | 18+ | Framework |
|
|
120
|
+
| Angular Signals | - | State management |
|
|
121
|
+
| OnPush | - | Change Detection |
|
|
122
|
+
|
|
123
|
+
## Demo
|
|
124
|
+
|
|
125
|
+
```bash
|
|
126
|
+
npx nx serve core-ui
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
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.
|
|
3
|
+
"version": "0.2.356-0",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/core": ">=18.0.0",
|
|
6
|
-
"@libs-ui/components-avatar": "0.2.
|
|
7
|
-
"@libs-ui/components-popover": "0.2.
|
|
6
|
+
"@libs-ui/components-avatar": "0.2.356-0",
|
|
7
|
+
"@libs-ui/components-popover": "0.2.356-0",
|
|
8
8
|
"@ngx-translate/core": "^15.0.0",
|
|
9
9
|
"rxjs": "~7.8.0"
|
|
10
10
|
},
|