@libs-ui/components-popover 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 +138 -2
  2. package/package.json +5 -5
package/README.md CHANGED
@@ -1,3 +1,139 @@
1
- # popover
1
+ # @libs-ui/components-popover
2
2
 
3
- This library was generated with [Nx](https://nx.dev).
3
+ > Component hiển thị nội dung nổi (popover/tooltip) gắn liền với một phần tử gốc, hỗ trợ nhiều hướng và chế độ kích hoạt.
4
+
5
+ ## Giới thiệu
6
+
7
+ Bộ công cụ Popover cung cấp giải pháp hiển thị thông tin ngữ cảnh linh hoạt. Bạn có thể sử dụng nó dưới dạng `Directive` để tiết kiệm DOM hoặc `Component Selector` khi cần bọc nhiều phần tử phức tạp.
8
+
9
+ ### Tính năng
10
+
11
+ - ✅ **Linh hoạt cách dùng**: Hỗ trợ cả Directive và Component Selector.
12
+ - ✅ **Định vị thông minh**: Tự động tính toán hướng để không bị tràn khung nhìn (viewport).
13
+ - ✅ **Template Support**: Hỗ trợ hiển thị nội dung từ `string` đơn giản đến `ng-template` phức tạp.
14
+ - ✅ **Event Handling**: Quản lý tốt các sự kiện hover, click và click-outside.
15
+ - ✅ **Customizable**: Dễ dàng tùy chỉnh chiều rộng, class CSS và hướng hiển thị.
16
+ - ✅ **OnPush Change Detection**
17
+ - ✅ **Angular Signals**
18
+
19
+ ## Khi nào sử dụng
20
+
21
+ - Hiển thị thông tin bổ sung (Tooltips) khi di chuột qua phần tử.
22
+ - Hiển thị menu hoặc nội dung chi tiết khi nhấn vào nút.
23
+ - Thông báo trạng thái hoặc hướng dẫn người dùng tại chỗ.
24
+
25
+ ## Cài đặt
26
+
27
+ ```bash
28
+ # npm
29
+ npm install @libs-ui/components-popover
30
+
31
+ # yarn
32
+ yarn add @libs-ui/components-popover
33
+ ```
34
+
35
+ ## Import
36
+
37
+ ```typescript
38
+ import { LibsUiComponentsPopoverModule } from '@libs-ui/components-popover';
39
+
40
+ @Component({
41
+ standalone: true,
42
+ imports: [LibsUiComponentsPopoverModule],
43
+ // ...
44
+ })
45
+ export class YourComponent {}
46
+ ```
47
+
48
+ ## Ví dụ
49
+
50
+ ### Directive (Sử dụng phổ biến)
51
+
52
+ ```html
53
+ <div
54
+ LibsUiComponentsPopoverDirective
55
+ [config]="{ content: 'Nội dung thông báo' }">
56
+ Hover me
57
+ </div>
58
+ ```
59
+
60
+ ### Component Selector
61
+
62
+ ```html
63
+ <libs_ui-components-popover [config]="{ content: 'Nội dung thông báo', direction: 'top' }">
64
+ <button>Action</button>
65
+ </libs_ui-components-popover>
66
+ ```
67
+
68
+ ## API
69
+
70
+ ### LibsUiComponentsPopoverDirective / LibsUiComponentsPopoverComponent
71
+
72
+ #### Inputs
73
+
74
+ | Property | Type | Default | Description |
75
+ | ------------------------------------ | ------------------------------ | ------------ | -------------------------------------------------------- |
76
+ | `[config]` | `IPopoverConfig` | **Bắt buộc** | Cấu hình nội dung, hướng và kích thước của popover. |
77
+ | `[mode]` | `'hover' \| 'click' \| 'none'` | `'hover'` | Chế độ kích hoạt hiển thị. |
78
+ | `[ignoreCursorPointerModeLikeClick]` | `boolean` | `false` | Bỏ qua việc đổi cursor thành pointer trong chế độ click. |
79
+ | `[ignoreStopPropagationEvent]` | `boolean` | `false` | Cho phép sự kiện click lan truyền ra lớp cha. |
80
+ | `[initEventInElementRefCustom]` | `ElementRef` | `undefined` | Gắn sự kiện vào một element khác thay vì host element. |
81
+
82
+ #### Outputs
83
+
84
+ | Property | Type | Description |
85
+ | --------------- | --------- | --------------------------------------- |
86
+ | `(outExpanded)` | `boolean` | Phát ra trạng thái đóng/mở của popover. |
87
+
88
+ ## Types & Interfaces
89
+
90
+ ```typescript
91
+ export interface IPopoverConfig {
92
+ content?: string;
93
+ template?: TemplateRef<any>;
94
+ direction?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
95
+ width?: number;
96
+ classCustom?: string;
97
+ context?: any;
98
+ }
99
+ ```
100
+
101
+ ## Styling
102
+
103
+ ### CSS Classes
104
+
105
+ | Class | Description |
106
+ | ---------------------------- | ----------------------------------- |
107
+ | `.libs-ui-popover-container` | Lớp bao ngoài của nội dung popover. |
108
+ | `.libs-ui-popover-arrow` | Mũi tên chỉ hướng của popover. |
109
+
110
+ ## Công nghệ
111
+
112
+ | Technology | Version | Purpose |
113
+ | --------------- | ------- | ------------------ |
114
+ | Angular | 18+ | Framework |
115
+ | CDK Overlay | 18+ | Positioning engine |
116
+ | Angular Signals | - | State management |
117
+ | TailwindCSS | 3.x | Styling |
118
+
119
+ ## Demo
120
+
121
+ ```bash
122
+ npx nx serve core-ui
123
+ ```
124
+
125
+ Truy cập: `http://localhost:4200/popover`
126
+
127
+ ## Unit Tests
128
+
129
+ ```bash
130
+ # Chạy tests
131
+ npx nx test components-popover
132
+
133
+ # Coverage
134
+ npx nx test components-popover --coverage
135
+ ```
136
+
137
+ ## License
138
+
139
+ MIT
package/package.json CHANGED
@@ -1,15 +1,15 @@
1
1
  {
2
2
  "name": "@libs-ui/components-popover",
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/utils": "0.2.355-14",
8
- "@libs-ui/interfaces-types": "0.2.355-14",
9
- "@libs-ui/components-scroll-overlay": "0.2.355-14",
7
+ "@libs-ui/utils": "0.2.355-15",
8
+ "@libs-ui/interfaces-types": "0.2.355-15",
9
+ "@libs-ui/components-scroll-overlay": "0.2.355-15",
10
10
  "@ngx-translate/core": "^15.0.0",
11
11
  "rxjs": "~7.8.0",
12
- "@libs-ui/services-dynamic-component": "0.2.355-14"
12
+ "@libs-ui/services-dynamic-component": "0.2.355-15"
13
13
  },
14
14
  "sideEffects": false,
15
15
  "module": "fesm2022/libs-ui-components-popover.mjs",