@libs-ui/components-device-support 0.2.355-13 → 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.
- package/README.md +137 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,3 +1,138 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Device Support Handle Click
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> Directive hỗ trợ xử lý sự kiện click đa thiết bị (desktop/mobile/touch), tự động chọn event phù hợp (click, touchstart, pointerdown) dựa trên loại thiết bị.
|
|
4
|
+
|
|
5
|
+
## Version
|
|
6
|
+
|
|
7
|
+
`0.2.355-14`
|
|
8
|
+
|
|
9
|
+
## Khi nào sử dụng
|
|
10
|
+
|
|
11
|
+
- Khi cần xử lý click event hoạt động đúng trên cả desktop và mobile/touch devices
|
|
12
|
+
- Khi cần tự động phát hiện loại thiết bị và chọn event phù hợp (click vs touchstart vs pointerdown)
|
|
13
|
+
- Khi cần stopPropagation tự động cho click events
|
|
14
|
+
- Khi cần gắn click handler vào một element cụ thể (window, document, hoặc element tùy chỉnh)
|
|
15
|
+
|
|
16
|
+
## Lưu ý quan trọng
|
|
17
|
+
|
|
18
|
+
- Directive tự động chọn event type: `click` cho desktop, `touchstart` cho mobile, `pointerdown` cho touch devices
|
|
19
|
+
- Mặc định `stopPropagation` được bật - sử dụng `[ignoreStopPropagation]="true"` để tắt
|
|
20
|
+
- Có thể gắn vào element khác thông qua `[elementHandleClick]`
|
|
21
|
+
- Sử dụng `getEventNameHandleClick` từ `@libs-ui/utils` để xác định event name
|
|
22
|
+
- Directive sử dụng `takeUntilDestroyed(destroyRef)` để tự động cleanup, tránh memory leak
|
|
23
|
+
|
|
24
|
+
## Cài đặt & Import
|
|
25
|
+
|
|
26
|
+
```typescript
|
|
27
|
+
import { LibsUiComponentsDeviceSupportHandleClickDirective } from '@libs-ui/components-device-support';
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Ví dụ sử dụng
|
|
31
|
+
|
|
32
|
+
### Basic Usage
|
|
33
|
+
|
|
34
|
+
```html
|
|
35
|
+
<button
|
|
36
|
+
libsUiComponentsDeviceSupportHandleClickDirective
|
|
37
|
+
(outClick)="onButtonClick($event)"
|
|
38
|
+
class="px-4 py-2 bg-blue-500 text-white rounded">
|
|
39
|
+
Click me
|
|
40
|
+
</button>
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
```typescript
|
|
44
|
+
import { Component } from '@angular/core';
|
|
45
|
+
import { LibsUiComponentsDeviceSupportHandleClickDirective } from '@libs-ui/components-device-support';
|
|
46
|
+
|
|
47
|
+
@Component({
|
|
48
|
+
selector: 'app-example',
|
|
49
|
+
standalone: true,
|
|
50
|
+
imports: [LibsUiComponentsDeviceSupportHandleClickDirective],
|
|
51
|
+
template: `
|
|
52
|
+
<button
|
|
53
|
+
libsUiComponentsDeviceSupportHandleClickDirective
|
|
54
|
+
(outClick)="onButtonClick($event)">
|
|
55
|
+
Click me
|
|
56
|
+
</button>
|
|
57
|
+
`
|
|
58
|
+
})
|
|
59
|
+
export class ExampleComponent {
|
|
60
|
+
onButtonClick(event: Event) {
|
|
61
|
+
console.log('Clicked!', event.type);
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
### Custom Element Target
|
|
67
|
+
|
|
68
|
+
```html
|
|
69
|
+
<div #targetElement class="p-4 border rounded">
|
|
70
|
+
Target - Click vào đây
|
|
71
|
+
</div>
|
|
72
|
+
|
|
73
|
+
<div
|
|
74
|
+
libsUiComponentsDeviceSupportHandleClickDirective
|
|
75
|
+
[elementHandleClick]="targetElement"
|
|
76
|
+
(outClick)="onTargetClick($event)">
|
|
77
|
+
</div>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
### Disable stopPropagation
|
|
81
|
+
|
|
82
|
+
```html
|
|
83
|
+
<div (click)="onParentClick()">
|
|
84
|
+
<button
|
|
85
|
+
libsUiComponentsDeviceSupportHandleClickDirective
|
|
86
|
+
[ignoreStopPropagation]="true"
|
|
87
|
+
(outClick)="onChildClick($event)">
|
|
88
|
+
Click - event sẽ bubble lên parent
|
|
89
|
+
</button>
|
|
90
|
+
</div>
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
## API Reference
|
|
94
|
+
|
|
95
|
+
### Selector
|
|
96
|
+
|
|
97
|
+
`[libsUiComponentsDeviceSupportHandleClickDirective]`
|
|
98
|
+
|
|
99
|
+
### Inputs
|
|
100
|
+
|
|
101
|
+
| Property | Type | Default | Description |
|
|
102
|
+
|---|---|---|---|
|
|
103
|
+
| `[elementHandleClick]` | `HTMLElement \| Window \| Document` | host element | Element để lắng nghe event click |
|
|
104
|
+
| `[ignoreStopPropagation]` | `boolean` | `false` | Khi true, không gọi stopPropagation() |
|
|
105
|
+
|
|
106
|
+
### Outputs
|
|
107
|
+
|
|
108
|
+
| Property | Type | Description |
|
|
109
|
+
|---|---|---|
|
|
110
|
+
| `(outClick)` | `Event` | Emit event click khi user click/touch vào element |
|
|
111
|
+
|
|
112
|
+
## Logic ẩn
|
|
113
|
+
|
|
114
|
+
### Auto Event Detection
|
|
115
|
+
|
|
116
|
+
Directive sử dụng `getEventNameHandleClick` từ `@libs-ui/utils` để tự động xác định event type:
|
|
117
|
+
|
|
118
|
+
- **Touch device** (có `onpointerdown` và `maxTouchPoints > 0`): `pointerdown`
|
|
119
|
+
- **Desktop**: `click`
|
|
120
|
+
- **Mobile (non-touch)**: `touchstart`
|
|
121
|
+
|
|
122
|
+
### Default stopPropagation
|
|
123
|
+
|
|
124
|
+
Mặc định, directive gọi `e.stopPropagation()` trên mỗi event. Set `[ignoreStopPropagation]="true"` để tắt.
|
|
125
|
+
|
|
126
|
+
### RxJS & DestroyRef
|
|
127
|
+
|
|
128
|
+
Directive sử dụng `fromEvent()` kết hợp `takeUntilDestroyed(destroyRef)` để tự động unsubscribe khi directive bị destroy.
|
|
129
|
+
|
|
130
|
+
## Demo
|
|
131
|
+
|
|
132
|
+
- Local: http://localhost:4500/device-support
|
|
133
|
+
|
|
134
|
+
## Test
|
|
135
|
+
|
|
136
|
+
```bash
|
|
137
|
+
npx nx test components-device-support
|
|
138
|
+
```
|