@libs-ui/components-pages-template-full-screen 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.
Files changed (2) hide show
  1. package/README.md +140 -2
  2. package/package.json +10 -10
package/README.md CHANGED
@@ -1,3 +1,141 @@
1
- # pages-template-full-screen
1
+ # @libs-ui/components-pages-template-full-screen
2
2
 
3
- This library was generated with [Nx](https://nx.dev).
3
+ > Khung layout chuẩn cho các trang hiển thị toàn màn hình (Full Screen), tích hợp header với các action linh hoạt.
4
+
5
+ ## Giới thiệu
6
+
7
+ `LibsUiComponentsPagesTemplateFullScreenComponent` là một standalone Angular component cung cấp cấu trúc layout cho các module cần không gian hiển thị toàn màn hình như: Tạo mới đối tượng phức tạp, Workflow editor, hoặc các trang báo cáo chuyên sâu.
8
+
9
+ ### Tính năng
10
+
11
+ - ✅ **Header linh hoạt**: Hỗ trợ 3 phân vùng (Trái, Giữa, Phải).
12
+ - ✅ **Đa dạng Action**: Tích hợp sẵn Button, Switch, Trạng thái (Status), Label và Dropdown menu trên header.
13
+ - ✅ **Tùy biến cao**: Hỗ trợ Content Projection cho nội dung chính và TemplateRef cho các vùng trên header.
14
+ - ✅ **Giao tiếp Micro**: Tự động gửi message "open/close" và cập nhật trạng thái hoạt động tới ứng dụng cha.
15
+ - ✅ **Angular Signals**: Tương thích hoàn toàn với Angular 18 Signals.
16
+
17
+ ## Khi nào sử dụng
18
+
19
+ - Khi cần không gian hiển thị tối đa cho người dùng (ví dụ: màn hình cấu hình workflow, chỉnh sửa ảnh/video).
20
+ - Khi trang có cấu trúc header phức tạp với nhiều nút chức năng điều hướng và thao tác nhanh.
21
+ - Khi cần một màn hình "Modal-like" nhưng chiếm trọn viewport.
22
+
23
+ ## Cài đặt
24
+
25
+ ```bash
26
+ # npm
27
+ npm install @libs-ui/components-pages-template-full-screen
28
+
29
+ # yarn
30
+ yarn add @libs-ui/components-pages-template-full-screen
31
+ ```
32
+
33
+ ## Import
34
+
35
+ ```typescript
36
+ import { LibsUiComponentsPagesTemplateFullScreenComponent } from '@libs-ui/components-pages-template-full-screen';
37
+
38
+ @Component({
39
+ standalone: true,
40
+ imports: [LibsUiComponentsPagesTemplateFullScreenComponent],
41
+ // ...
42
+ })
43
+ export class YourComponent {}
44
+ ```
45
+
46
+ ## Ví dụ
47
+
48
+ ### Basic
49
+
50
+ ```html
51
+ <libs_ui-components-pages_template_full_screen
52
+ [title]="'Cấu hình chiến dịch mới'"
53
+ [labelLeft]="'Quay lại'"
54
+ (outClose)="onClose()">
55
+ <div class="content">
56
+ <!-- Nội dung trang của bạn -->
57
+ </div>
58
+ </libs_ui-components-pages_template_full_screen>
59
+ ```
60
+
61
+ ### With Header Actions
62
+
63
+ ```html
64
+ <libs_ui-components-pages_template_full_screen
65
+ [title]="'Chỉnh sửa nội dung'"
66
+ [buttonRight]="[
67
+ { key: 'switch', active: true, classInclude: 'mr-2' },
68
+ { key: 'button', label: 'Lưu nháp', type: 'button-secondary' },
69
+ { key: 'button', label: 'Xuất bản', type: 'button-primary' }
70
+ ]"
71
+ (outClickButton)="onAction($event)">
72
+ <p>Nội dung soạn thảo...</p>
73
+ </libs_ui-components-pages_template_full_screen>
74
+ ```
75
+
76
+ ## API
77
+
78
+ ### libs_ui-components-pages_template_full_screen
79
+
80
+ #### Inputs
81
+
82
+ | Property | Type | Default | Description |
83
+ | ---------------------------- | ---------------------------------- | --------------------- | ------------------------------------------------------- |
84
+ | `[title]` | `string` | `undefined` | Tiêu đề hiển thị ở giữa header. |
85
+ | `[labelLeft]` | `string` | `'i18n_back_to_list'` | Nhãn cho nút quay lại bên trái. |
86
+ | `[buttonCenter]` | `IPagesTemplateFullScreenButton[]` | `undefined` | Danh sách các nút hiển thị ở giữa header (cạnh title). |
87
+ | `[buttonRight]` | `IPagesTemplateFullScreenButton[]` | `undefined` | Danh sách các nút hiển thị bên phải header. |
88
+ | `[hasEdit]` | `boolean` | `false` | Hiển thị icon edit cạnh tiêu đề. |
89
+ | `[menuDropDownConfigs]` | `IDropdown` | `undefined` | Cấu hình cho menu "Thanh thao tác khác" (ba chấm dọc). |
90
+ | `[zIndex]` | `number` | `1000` | Thứ tự hiển thị của lớp overlay. |
91
+ | `[ignoreClosePageFullEvent]` | `boolean` | `false` | Nếu true, sẽ không gửi message communicate tới app cha. |
92
+ | `[ignoreBackgroundColor]` | `boolean` | `false` | Nếu true, nền sẽ trong suốt (mặc định #f2f5f7). |
93
+ | `[disable]` | `boolean` | `false` | Vô hiệu hóa toàn bộ action trên header. |
94
+ | `[leftTemplate]` | `TemplateRef<any>` | `undefined` | Custom template cho vùng bên trái header. |
95
+ | `[centerTemplate]` | `TemplateRef<any>` | `undefined` | Custom template cho vùng giữa header. |
96
+ | `[templateRight]` | `TemplateRef<any>` | `undefined` | Custom template cho vùng bên phải header. |
97
+ | `[classHeaderInclude]` | `string` | `undefined` | Custom class cho header. |
98
+ | `[classBodyInclude]` | `string` | `undefined` | Custom class cho thân trang. |
99
+ | `[divideClassHeader]` | `object` | `undefined` | Cấu hình class cho các vùng phân chia trên header. |
100
+
101
+ #### Outputs
102
+
103
+ | Property | Type | Description |
104
+ | --------------------------- | -------------------------------- | ----------------------------------------------------------------------------- |
105
+ | `(outClose)` | `void` | Phát ra khi click nút quay lại/đóng. |
106
+ | `(outEdit)` | `void` | Phát ra khi click icon edit cạnh tiêu đề. |
107
+ | `(outSelectedMenuDropdown)` | `IEmitSelectKey` | Phát ra khi chọn item từ menu dropdown phụ. |
108
+ | `(outClickButton)` | `IPagesTemplateFullScreenButton` | Phát ra khi click vào bất kỳ nút nào trong `buttonCenter` hoặc `buttonRight`. |
109
+
110
+ ## Types & Interfaces
111
+
112
+ ```typescript
113
+ export type IPagesTemplateFullScreenButtonKey = 'button' | 'button-status' | 'switch' | 'label' | 'line-space' | 'button-dropdown';
114
+
115
+ export interface IPagesTemplateFullScreenButton extends IButton {
116
+ key: IPagesTemplateFullScreenButtonKey;
117
+ classInclude?: string;
118
+ disable?: boolean;
119
+ action?: (event?: ISwitchEvent) => Promise<void>;
120
+ configButtonStatus?: IButtonStatus;
121
+ active?: boolean;
122
+ labelConfig?: ILabel;
123
+ }
124
+ ```
125
+
126
+ ## Công nghệ
127
+
128
+ | Technology | Version | Purpose |
129
+ | --------------- | ------- | ---------------- |
130
+ | Angular | 18+ | Framework |
131
+ | Angular Signals | - | State management |
132
+ | TailwindCSS | 3.x | Styling |
133
+ | OnPush | - | Change Detection |
134
+
135
+ ## Demo
136
+
137
+ ```bash
138
+ npx nx serve core-ui
139
+ ```
140
+
141
+ Truy cập: `http://localhost:4200/page-template/full-screen`
package/package.json CHANGED
@@ -1,18 +1,18 @@
1
1
  {
2
2
  "name": "@libs-ui/components-pages-template-full-screen",
3
- "version": "0.2.355-9",
3
+ "version": "0.2.356-0",
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-buttons-status": "0.2.355-9",
9
- "@libs-ui/components-dropdown": "0.2.355-9",
10
- "@libs-ui/components-label": "0.2.355-9",
11
- "@libs-ui/components-popover": "0.2.355-9",
12
- "@libs-ui/components-switch": "0.2.355-9",
13
- "@libs-ui/interfaces-types": "0.2.355-9",
14
- "@libs-ui/pipes-escape-html": "0.2.355-9",
15
- "@libs-ui/utils": "0.2.355-9",
7
+ "@libs-ui/components-buttons-button": "0.2.356-0",
8
+ "@libs-ui/components-buttons-status": "0.2.356-0",
9
+ "@libs-ui/components-dropdown": "0.2.356-0",
10
+ "@libs-ui/components-label": "0.2.356-0",
11
+ "@libs-ui/components-popover": "0.2.356-0",
12
+ "@libs-ui/components-switch": "0.2.356-0",
13
+ "@libs-ui/interfaces-types": "0.2.356-0",
14
+ "@libs-ui/pipes-escape-html": "0.2.356-0",
15
+ "@libs-ui/utils": "0.2.356-0",
16
16
  "dayjs": "1.11.5",
17
17
  "rxjs": "~7.8.0",
18
18
  "@ngx-translate/core": "^15.0.0"