@libs-ui/services-dialog 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.
- package/README.md +103 -2
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,3 +1,104 @@
|
|
|
1
|
-
#
|
|
1
|
+
# DialogService
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> Version: `0.2.355-10`
|
|
4
|
+
>
|
|
5
|
+
> Service giúp tạo và quản lý Modal Dialog động trong ứng dụng Angular một cách chuyên nghiệp.
|
|
6
|
+
|
|
7
|
+
## Giới thiệu
|
|
8
|
+
|
|
9
|
+
`LibsUiDialogService` cung cấp phương thức `addDialog` để hiển thị Modal một cách linh hoạt mà không cần khai báo thẻ Modal trong template. Service này quản lý việc tạo component động, chèn vào body (hoặc parent document) và xử lý vòng đời của Dialog.
|
|
10
|
+
|
|
11
|
+
## Lưu ý quan trọng (Important Notes)
|
|
12
|
+
|
|
13
|
+
> ⚠️ **Caveats & Logic Conflicts**:
|
|
14
|
+
>
|
|
15
|
+
> - **`buttonsFooter` Override**: Khi có `buttonsFooter`, các `configAgreeEvent`/`configCancelEvent` **KHÔNG hoạt động** (button chỉ gọi `action()`, không emit event). Chỉ `configCloseEvent` hoạt động khi click nút Close (X) ở header.
|
|
16
|
+
> - **Khuyến nghị**: Dùng `buttonsFooter` → xử lý logic trong `button.action()`. KHÔNG dùng `configAgreeEvent`/`configCancelEvent`.
|
|
17
|
+
> - **Width mặc định**: `500px` nếu không cấu hình.
|
|
18
|
+
> - **Auto-close**: Dialog tự đóng sau action. Để ngăn: set `ignoreRemoveDialog: true` hoặc gọi `removeDialog(id)` thủ công.
|
|
19
|
+
|
|
20
|
+
## Cài đặt
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
npm install @libs-ui/services-dialog
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## Import
|
|
27
|
+
|
|
28
|
+
```typescript
|
|
29
|
+
import { LibsUiDialogService } from '@libs-ui/services-dialog';
|
|
30
|
+
|
|
31
|
+
@Component({
|
|
32
|
+
standalone: true,
|
|
33
|
+
imports: [], // Không cần import vào đây vì là Service
|
|
34
|
+
// ...
|
|
35
|
+
})
|
|
36
|
+
export class YourComponent {
|
|
37
|
+
private dialogService = inject(LibsUiDialogService);
|
|
38
|
+
}
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Cách sử dụng
|
|
42
|
+
|
|
43
|
+
### 1. Dialog cơ bản
|
|
44
|
+
|
|
45
|
+
```typescript
|
|
46
|
+
this.dialogService.addDialog({
|
|
47
|
+
title: 'Thông báo',
|
|
48
|
+
bodyConfig: {
|
|
49
|
+
lines: [{ text: 'Nội dung thông báo đơn giản.' }],
|
|
50
|
+
},
|
|
51
|
+
});
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
### 2. Dialog xác nhận với xử lý Async
|
|
55
|
+
|
|
56
|
+
```typescript
|
|
57
|
+
const dialogId = this.dialogService.addDialog({
|
|
58
|
+
title: 'Xác nhận xóa',
|
|
59
|
+
bodyConfig: {
|
|
60
|
+
lines: [{ text: 'Bạn có chắc chắn muốn xóa mục này?' }],
|
|
61
|
+
},
|
|
62
|
+
configAgreeEvent: {
|
|
63
|
+
ignoreRemoveDialog: true, // Không đóng ngay để đợi xử lý
|
|
64
|
+
callback: async (control) => {
|
|
65
|
+
control?.setStateDisable(true); // Disable nút tránh click nhiều lần
|
|
66
|
+
await this.apiService.deleteItem();
|
|
67
|
+
this.dialogService.removeDialog(dialogId); // Đóng thủ công sau khi xong
|
|
68
|
+
},
|
|
69
|
+
},
|
|
70
|
+
});
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
## API Reference
|
|
74
|
+
|
|
75
|
+
### Methods
|
|
76
|
+
|
|
77
|
+
| Method | Description | Parameters | Returns |
|
|
78
|
+
| ----------------------------------------- | ------------------------------------------------------ | -------------------------------------------------- | -------------------- |
|
|
79
|
+
| `addDialog(config, isAddParentDocument?)` | Tạo và hiển thị một Dialog mới. | `config: IDialog`, `isAddParentDocument?: boolean` | `string` (Dialog ID) |
|
|
80
|
+
| `removeDialog(id)` | Đóng và xóa Dialog theo ID. | `id: string` | `void` |
|
|
81
|
+
| `clearDialogsRef()` | Xóa tất cả các Dialog đang mở. | `-` | `void` |
|
|
82
|
+
| `switchDisableActionsOnDialog(id)` | Bật/tắt trạng thái disable của các action trên Dialog. | `id: string` | `void` |
|
|
83
|
+
|
|
84
|
+
### IDialog Configuration
|
|
85
|
+
|
|
86
|
+
| Property | Type | Default | Description |
|
|
87
|
+
| ------------------- | ---------------------------- | ---------- | ------------------------------------------ |
|
|
88
|
+
| `title` | `string` | `-` | Tiêu đề của Dialog. |
|
|
89
|
+
| `bodyConfig` | `IModalBodyConfig` | `-` | Cấu hình nội dung (lines, icon, class...). |
|
|
90
|
+
| `buttonsFooter` | `IButton[]` | `-` | Danh sách button tùy chỉnh ở footer. |
|
|
91
|
+
| `width` | `string` | `'500px'` | Độ rộng của Dialog. |
|
|
92
|
+
| `height` | `string` | `'auto'` | Chiều cao của Dialog. |
|
|
93
|
+
| `mode` | `'center' \| 'offset-right'` | `'center'` | Vị trí hiển thị Dialog. |
|
|
94
|
+
| `disable` | `boolean` | `false` | Khóa toàn bộ tương tác trên Dialog. |
|
|
95
|
+
| `configAgreeEvent` | `IDialogConfigEvent` | `-` | Xử lý khi nhấn nút Đồng ý. |
|
|
96
|
+
| `configCancelEvent` | `IDialogConfigEvent` | `-` | Xử lý khi nhấn nút Hủy. |
|
|
97
|
+
| `configCloseEvent` | `IDialogConfigEvent` | `-` | Xử lý khi đóng Dialog (X). |
|
|
98
|
+
| `zIndex` | `number` | `-` | Thứ tự hiển thị lớp. |
|
|
99
|
+
| `titleUseInnerText` | `boolean` | `false` | Dùng innerText cho title (Security). |
|
|
100
|
+
|
|
101
|
+
## Demo Links
|
|
102
|
+
|
|
103
|
+
- **Local Development**: [http://localhost:4500/services/dialog](http://localhost:4500/services/dialog)
|
|
104
|
+
- **Production**: _Tạm thời không khả dụng_
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/services-dialog",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.356-1",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/core": ">=18.0.0",
|
|
6
|
-
"@libs-ui/components-modal": "0.2.
|
|
7
|
-
"@libs-ui/services-dynamic-component": "0.2.
|
|
8
|
-
"@libs-ui/utils": "0.2.
|
|
9
|
-
"@libs-ui/components-buttons-button": "0.2.
|
|
6
|
+
"@libs-ui/components-modal": "0.2.356-1",
|
|
7
|
+
"@libs-ui/services-dynamic-component": "0.2.356-1",
|
|
8
|
+
"@libs-ui/utils": "0.2.356-1",
|
|
9
|
+
"@libs-ui/components-buttons-button": "0.2.356-1"
|
|
10
10
|
},
|
|
11
11
|
"sideEffects": false,
|
|
12
12
|
"module": "fesm2022/libs-ui-services-dialog.mjs",
|