Skip to content

Commit 1c3686a

Browse files
prabhuignotoprabhuignoto
authored
Merge pull request #82 from prabhuignoto/2025_upgrade
2 parents 87606a9 + 95e689d commit 1c3686a

35 files changed

+4914
-891
lines changed

‎README.md

Lines changed: 131 additions & 391 deletions
Large diffs are not rendered by default.

‎TOUCH_FEATURES.md

Lines changed: 327 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,327 @@
1+
# Touch Optimizations Guide
2+
3+
This document provides a comprehensive guide to the touch optimization features in Vue Float Menu.
4+
5+
## Overview
6+
7+
Vue Float Menu includes advanced touch optimizations designed specifically for mobile and touch-enabled devices. These features enhance the user experience on smartphones, tablets, and touch-enabled desktop devices.
8+
9+
## Features
10+
11+
### 1. Touch Device Detection
12+
13+
The menu automatically detects touch-capable devices and applies appropriate optimizations:
14+
15+
```javascript
16+
const { isTouchDevice } = useTouchOptimizations();
17+
```
18+
19+
### 2. Gesture Recognition
20+
21+
#### Tap Detection
22+
23+
- **Single Tap**: Normal menu activation
24+
- **Long Press**: Alternative menu activation with haptic feedback
25+
- **Touch Target Size**: Minimum 44px touch targets for accessibility
26+
27+
#### Swipe Gestures
28+
29+
- **Swipe Up/Down**: Close the menu when active
30+
- **Swipe Detection**: Configurable distance and velocity thresholds
31+
32+
### 3. Haptic Feedback
33+
34+
Enhanced tactile feedback for touch interactions:
35+
36+
```javascript
37+
// Light feedback for simple interactions
38+
triggerHapticFeedback('light');
39+
40+
// Medium feedback for long press
41+
triggerHapticFeedback('medium');
42+
43+
// Heavy feedback for important actions
44+
triggerHapticFeedback('heavy');
45+
```
46+
47+
#### Feedback Types:
48+
49+
- **Light**: Menu item selection, simple taps
50+
- **Medium**: Long press activation, submenu opening
51+
- **Heavy**: Error states, important confirmations
52+
53+
### 4. Enhanced Accessibility
54+
55+
Touch-specific accessibility improvements:
56+
57+
- **Touch Target Sizing**: Ensures minimum 44px touch targets
58+
- **Focus Management**: Enhanced keyboard and touch navigation
59+
- **Screen Reader Support**: Proper ARIA attributes for touch interactions
60+
- **High Contrast**: Improved visual feedback for touch states
61+
62+
### 5. Performance Optimizations
63+
64+
Touch-specific performance enhancements:
65+
66+
- **Throttled Touch Events**: Prevents excessive event firing
67+
- **Gesture Debouncing**: Smooth gesture recognition
68+
- **Memory Management**: Efficient touch event cleanup
69+
70+
## Usage
71+
72+
### Basic Integration
73+
74+
The touch optimizations are automatically enabled when touch devices are detected:
75+
76+
```vue
77+
<template>
78+
<float-menu :menu-data="menuItems" :dimension="50" position="bottom right">
79+
<template #icon>
80+
<MenuIcon />
81+
</template>
82+
</float-menu>
83+
</template>
84+
```
85+
86+
### Advanced Configuration
87+
88+
For custom touch behavior, access the touch composable directly:
89+
90+
```javascript
91+
import { useTouchOptimizations } from './composables/useTouchOptimizations';
92+
93+
export default {
94+
setup() {
95+
const {
96+
isTouchDevice,
97+
handleTouchStart,
98+
handleTouchMove,
99+
handleTouchEnd,
100+
triggerHapticFeedback,
101+
getSwipeDirection,
102+
} = useTouchOptimizations();
103+
104+
return {
105+
isTouchDevice,
106+
// ... other exports
107+
};
108+
},
109+
};
110+
```
111+
112+
### Custom Touch Handlers
113+
114+
Implement custom touch event handling:
115+
116+
```javascript
117+
const handleCustomTouch = (event) => {
118+
handleTouchStart(event, (touchEvent) => {
119+
switch (touchEvent.type) {
120+
case 'tap':
121+
// Handle tap
122+
break;
123+
case 'longpress':
124+
// Handle long press
125+
triggerHapticFeedback('medium');
126+
break;
127+
case 'swipe':
128+
// Handle swipe
129+
const direction = getSwipeDirection();
130+
if (direction) {
131+
console.log('Swipe direction:', direction.direction);
132+
}
133+
break;
134+
}
135+
});
136+
};
137+
```
138+
139+
## Configuration Options
140+
141+
### Touch Event Thresholds
142+
143+
```typescript
144+
interface TouchEventConfig {
145+
longPressThreshold: number; // Default: 500ms
146+
swipeThreshold: number; // Default: 50px
147+
velocityThreshold: number; // Default: 0.5px/ms
148+
touchTargetSize: number; // Default: 44px
149+
}
150+
```
151+
152+
### Haptic Feedback Settings
153+
154+
```typescript
155+
interface HapticConfig {
156+
enabled: boolean; // Default: true
157+
lightIntensity: number; // Default: 0.1
158+
mediumIntensity: number; // Default: 0.5
159+
heavyIntensity: number; // Default: 1.0
160+
}
161+
```
162+
163+
## Browser Support
164+
165+
| Feature | Chrome | Firefox | Safari | Edge |
166+
| ----------------- | ------ | ------- | ------ | ---- |
167+
| Touch Events | ✅ | ✅ | ✅ | ✅ |
168+
| Haptic Feedback | ✅ | ❌ | ✅ | ✅ |
169+
| Pointer Events | ✅ | ✅ | ✅ | ✅ |
170+
| Touch Target Size | ✅ | ✅ | ✅ | ✅ |
171+
172+
## Best Practices
173+
174+
### 1. Touch Target Sizing
175+
176+
- Ensure all interactive elements are at least 44px in both dimensions
177+
- Provide adequate spacing between touch targets
178+
179+
### 2. Gesture Feedback
180+
181+
- Always provide immediate visual feedback for touch interactions
182+
- Use haptic feedback sparingly and meaningfully
183+
184+
### 3. Accessibility
185+
186+
- Test with assistive technologies on touch devices
187+
- Ensure all functionality is available without gestures
188+
189+
### 4. Performance
190+
191+
- Throttle touch event handlers to maintain smooth interactions
192+
- Clean up event listeners properly to prevent memory leaks
193+
194+
## Examples
195+
196+
### Example 1: Basic Touch Menu
197+
198+
```vue
199+
<template>
200+
<float-menu :menu-data="menuItems" :dimension="60" position="bottom right" flip-on-edges>
201+
<template #icon>
202+
<TouchIcon />
203+
</template>
204+
</float-menu>
205+
</template>
206+
207+
<script>
208+
export default {
209+
data() {
210+
return {
211+
menuItems: [
212+
{ name: 'Touch Action 1', action: 'tap' },
213+
{ name: 'Long Press Action', action: 'longpress' },
214+
{ name: 'Swipe Action', action: 'swipe' },
215+
],
216+
};
217+
},
218+
};
219+
</script>
220+
```
221+
222+
### Example 2: Custom Touch Handling
223+
224+
```vue
225+
<template>
226+
<div
227+
@touchstart="handleTouchStart"
228+
@touchend="handleTouchEnd"
229+
@touchmove="handleTouchMove"
230+
class="custom-touch-area"
231+
>
232+
Custom Touch Area
233+
</div>
234+
</template>
235+
236+
<script>
237+
import { useTouchOptimizations } from '@/composables/useTouchOptimizations';
238+
239+
export default {
240+
setup() {
241+
const {
242+
handleTouchStart: startHandler,
243+
handleTouchEnd: endHandler,
244+
handleTouchMove: moveHandler,
245+
triggerHapticFeedback,
246+
} = useTouchOptimizations();
247+
248+
const handleTouchStart = (event) => {
249+
startHandler(event, (touchEvent) => {
250+
if (touchEvent.type === 'longpress') {
251+
triggerHapticFeedback('medium');
252+
// Custom long press logic
253+
}
254+
});
255+
};
256+
257+
const handleTouchEnd = (event) => {
258+
endHandler(event, (touchEvent) => {
259+
if (touchEvent.type === 'tap') {
260+
triggerHapticFeedback('light');
261+
// Custom tap logic
262+
}
263+
});
264+
};
265+
266+
const handleTouchMove = (event) => {
267+
moveHandler(event);
268+
};
269+
270+
return {
271+
handleTouchStart,
272+
handleTouchEnd,
273+
handleTouchMove,
274+
};
275+
},
276+
};
277+
</script>
278+
```
279+
280+
## Troubleshooting
281+
282+
### Common Issues
283+
284+
1. **Haptic Feedback Not Working**
285+
286+
- Check if the device supports haptic feedback
287+
- Ensure the user has enabled vibration in browser settings
288+
- Some browsers require HTTPS for haptic feedback
289+
290+
2. **Touch Events Not Detected**
291+
292+
- Verify touch event listeners are properly attached
293+
- Check if `touchstart` event is being prevented elsewhere
294+
- Ensure proper event delegation
295+
296+
3. **Performance Issues**
297+
- Check if touch event handlers are throttled
298+
- Verify proper cleanup of event listeners
299+
- Monitor memory usage during touch interactions
300+
301+
### Debugging
302+
303+
Enable debug mode to see touch event details:
304+
305+
```javascript
306+
const { enableDebugMode } = useTouchOptimizations();
307+
enableDebugMode(true);
308+
```
309+
310+
This will log touch events and gesture recognition to the console.
311+
312+
## Contributing
313+
314+
To contribute to touch optimizations:
315+
316+
1. Test on multiple touch devices
317+
2. Follow accessibility guidelines
318+
3. Ensure cross-browser compatibility
319+
4. Add appropriate tests for new features
320+
5. Update documentation for any API changes
321+
322+
## Resources
323+
324+
- [MDN Touch Events](https://developer.mozilla.org/en-US/docs/Web/API/Touch_events)
325+
- [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/WCAG21/Understanding/)
326+
- [Haptic Feedback API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/vibrate)
327+
- [Pointer Events Specification](https://www.w3.org/TR/pointerevents/)

‎eslint.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export default [
4646
languageOptions: {
4747
parser: tseslint.parser,
4848
parserOptions: {
49-
project: './tsconfig.json',
49+
project: './tsconfig.eslint.json',
5050
},
5151
},
5252
rules: {

‎package.json

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,10 @@
2121
"scripts": {
2222
"dev": "vite",
2323
"build": "vite build",
24-
"build:lib": "vue-tsc --build tsconfig.build.json && vite build",
25-
"rollup": "rm -rf ./dist && rollup -c",
24+
"build:lib": "pnpm build:rollup",
25+
"rollup": "rm -rf ./dist && rollup -c rollup.config.js",
26+
"build:rollup": "rm -rf ./dist && rollup -c rollup.config.js",
27+
"build:types": "vue-tsc --build tsconfig.build.json --emitDeclarationOnly",
2628
"type-check": "vue-tsc --noEmit",
2729
"type-check:watch": "vue-tsc --noEmit --watch",
2830
"lint": "eslint .",
@@ -57,9 +59,6 @@
5759
"prettier --write"
5860
]
5961
},
60-
"dependencies": {
61-
"focus-visible": "^5.2.1"
62-
},
6362
"devDependencies": {
6463
"@babel/core": "^7.27.1",
6564
"@babel/preset-typescript": "^7.27.1",
@@ -72,6 +71,7 @@
7271
"@rollup/plugin-sucrase": "^5.0.2",
7372
"@rollup/plugin-terser": "^0.4.4",
7473
"@rollup/plugin-typescript": "^12.1.2",
74+
"@types/node": "^22.15.21",
7575
"@typescript-eslint/eslint-plugin": "^8.32.1",
7676
"@typescript-eslint/parser": "^8.32.1",
7777
"@vitejs/plugin-vue": "^5.2.4",
@@ -115,9 +115,18 @@
115115
"@vue/compiler-sfc": "^3.0.4",
116116
"vue": "^3.0.4"
117117
},
118-
"main": "dist/vue-float-menu.js",
118+
"main": "dist/vue-float-menu.cjs",
119119
"module": "dist/vue-float-menu.js",
120120
"umd": "dist/vue-float-menu.umd.js",
121+
"types": "dist/index.d.ts",
122+
"exports": {
123+
".": {
124+
"import": "./dist/vue-float-menu.js",
125+
"require": "./dist/vue-float-menu.cjs",
126+
"types": "./dist/index.d.ts"
127+
},
128+
"./style.css": "./dist/vue-float-menu.css"
129+
},
121130
"files": [
122131
"dist"
123132
]

0 commit comments

Comments
 (0)