@libs-ui/components-preview-file 0.2.355-14 → 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 +147 -2
  2. package/package.json +5 -5
package/README.md CHANGED
@@ -1,3 +1,148 @@
1
- # preview-file
1
+ # @libs-ui/components-preview-file
2
2
 
3
- This library was generated with [Nx](https://nx.dev).
3
+ > Component xem trước tệp tin hỗ trợ nhiều định dạng từ hình ảnh đến tài liệu văn phòng, PDF thông qua các bộ Viewer phổ biến.
4
+
5
+ ## Giới thiệu
6
+
7
+ `LibsUiComponentsPreviewFileComponent` là một component cung cấp giao diện modal để xem nhanh nội dung của tệp tin. Nó hỗ trợ điều hướng giữa một danh sách tệp, các nút hành động tùy chỉnh (như download, share) và tự động nhận diện định dạng để sử dụng viewer phù hợp (Google Viewer cho PDF/Images, Microsoft Viewer cho Office documents).
8
+
9
+ ### Tính năng
10
+
11
+ - ✅ **Hỗ trợ đa định dạng**: Image (JPEG, PNG, SVG), PDF, Office (DOCX, XLSX, PPTX).
12
+ - ✅ **Viewer tích hợp**: Sử dụng Google và Microsoft Online Viewers cho các tài liệu phức tạp.
13
+ - ✅ **Điều hướng**: Hỗ trợ xem danh sách nhiều tệp với nút Prev/Next.
14
+ - ✅ **Tùy biến hành động**: Cho phép thêm các nút điều khiển tùy chỉnh trên header.
15
+ - ✅ **Lazy Loading**: Chỉ load viewer khi tệp được chọn.
16
+ - ✅ **OnPush Change Detection**
17
+ - ✅ **Angular Signals**
18
+
19
+ ## Khi nào sử dụng
20
+
21
+ - Khi cần xem nhanh nội dung của một hoặc nhiều tệp đính kèm.
22
+ - Hỗ trợ duyệt album ảnh hoặc danh sách tài liệu PDF, Office.
23
+ - Tránh việc phải tải tệp về máy chỉ để xem nội dung cơ bản.
24
+
25
+ ## Cài đặt
26
+
27
+ ```bash
28
+ # npm
29
+ npm install @libs-ui/components-preview-file
30
+
31
+ # yarn
32
+ yarn add @libs-ui/components-preview-file
33
+ ```
34
+
35
+ ## Import
36
+
37
+ ```typescript
38
+ import { LibsUiComponentsPreviewFileComponent } from '@libs-ui/components-preview-file';
39
+
40
+ @Component({
41
+ standalone: true,
42
+ imports: [LibsUiComponentsPreviewFileComponent],
43
+ // ...
44
+ })
45
+ export class YourComponent {}
46
+ ```
47
+
48
+ ## Ví dụ
49
+
50
+ ### Cơ bản
51
+
52
+ ```html
53
+ <libs_ui-components-preview_file
54
+ [data]="fileList"
55
+ [(index)]="currentIndex"
56
+ (outClose)="onClose()" />
57
+ ```
58
+
59
+ ### Với nút bấm tùy chỉnh
60
+
61
+ ```html
62
+ <libs_ui-components-preview_file
63
+ [data]="fileList"
64
+ [(index)]="currentIndex"
65
+ [buttons]="customButtons"
66
+ (outClose)="onClose()" />
67
+ ```
68
+
69
+ ## API
70
+
71
+ ### libs_ui-components-preview_file
72
+
73
+ #### Inputs
74
+
75
+ | Property | Type | Default | Description |
76
+ | ----------- | ----------- | ------------ | ------------------------------------------------------------- |
77
+ | `[data]` | `IFile[]` | **Bắt buộc** | Danh sách các đối tượng tệp tin cần xem trước. |
78
+ | `[(index)]` | `number` | **Bắt buộc** | Vị trí tệp hiện tại trong danh sách (hỗ trợ Two-way binding). |
79
+ | `[buttons]` | `IButton[]` | `[]` | Danh sách các nút hành động bổ sung hiển thị trên header. |
80
+ | `[zIndex]` | `number` | `undefined` | Thiết lập z-index cho modal preview. |
81
+
82
+ #### Outputs
83
+
84
+ | Property | Type | Description |
85
+ | ------------ | ------ | --------------------------------------------------------------- |
86
+ | `(outClose)` | `void` | Phát ra khi người dùng nhấn nút đóng hoặc click ra ngoài modal. |
87
+
88
+ ## Types & Interfaces
89
+
90
+ ```typescript
91
+ export interface IFile {
92
+ name?: string;
93
+ url?: string;
94
+ origin_url?: string;
95
+ mimetype?: string;
96
+ extension?: string;
97
+ }
98
+
99
+ export interface IButton {
100
+ key: string;
101
+ label?: string;
102
+ type?: string;
103
+ classIconLeft?: string;
104
+ iconOnlyType?: boolean;
105
+ action?: (index: number) => Promise<void>;
106
+ }
107
+ ```
108
+
109
+ ## Styling
110
+
111
+ ### CSS Classes
112
+
113
+ | Class | Description |
114
+ | ------------------------- | -------------------------------------------------- |
115
+ | `.preview-file-container` | Container chính của modal preview. |
116
+ | `.preview-header` | Thanh tiêu đề chứa tên file và các nút điều hướng. |
117
+ | `.preview-body` | Vùng hiển thị nội dung file (iframe/img). |
118
+
119
+ ## Công nghệ
120
+
121
+ | Technology | Version | Purpose |
122
+ | ----------------------- | ------- | ----------------------- |
123
+ | Angular | 18+ | Framework |
124
+ | Google Viewer | - | PDF & Image Viewing |
125
+ | Microsoft Office Online | - | Office Document Viewing |
126
+ | Angular Signals | - | State management |
127
+
128
+ ## Demo
129
+
130
+ ```bash
131
+ npx nx serve core-ui
132
+ ```
133
+
134
+ Truy cập: `http://localhost:4200/preview-file`
135
+
136
+ ## Unit Tests
137
+
138
+ ```bash
139
+ # Chạy tests
140
+ npx nx test components-preview-file
141
+
142
+ # Coverage
143
+ npx nx test components-preview-file --coverage
144
+ ```
145
+
146
+ ## License
147
+
148
+ MIT
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@libs-ui/components-preview-file",
3
- "version": "0.2.355-14",
3
+ "version": "0.2.355-15",
4
4
  "peerDependencies": {
5
5
  "@angular/common": ">=18.0.0",
6
6
  "@angular/core": ">=18.0.0",
7
- "@libs-ui/components-modal": "0.2.355-14",
8
- "@libs-ui/components-skeleton": "0.2.355-14",
9
- "@libs-ui/interfaces-types": "0.2.355-14",
10
- "@libs-ui/pipes-security-trust": "0.2.355-14"
7
+ "@libs-ui/components-modal": "0.2.355-15",
8
+ "@libs-ui/components-skeleton": "0.2.355-15",
9
+ "@libs-ui/interfaces-types": "0.2.355-15",
10
+ "@libs-ui/pipes-security-trust": "0.2.355-15"
11
11
  },
12
12
  "sideEffects": false,
13
13
  "module": "fesm2022/libs-ui-components-preview-file.mjs",