### Vue 3 Drag and Drop Events with vue3-touch-events

Source: https://context7.com/robinrodricks/vue3-touch-events/llms.txt

Handles drag operations with continuous tracking for drag start, move, and release events. This example demonstrates basic drag functionality, a 'drag once' event, and dragging elements outside their boundaries. It requires the vue3-touch-events library.

```vue
<template>
  <div class="drag-container">
    <!-- Basic drag tracking -->
    <div
      v-touch:press="onDragStart"
      v-touch:drag="onDrag"
      v-touch:release="onDragEnd"
      :style="{
        transform: `translate(${position.x}px, ${position.y}px)`
      }"
      class="draggable-box basic"
    >
      <p>Drag me around</p>
      <p class="coords">X: {{ position.x }}, Y: {{ position.y }}</p>
    </div>

    <!-- Drag once - fires only when drag starts -->
    <div
      v-touch:drag.once="onDragOnce"
      v-touch-options="{ tapTolerance: 15 }"
      class="drag-box"
    >
      <p>Drag.once event</p>
      <p v-if="dragStarted" class="status">Drag started!</p>
    </div>

    <!-- Drag outside - tracks even when dragged beyond element -->
    <div
      v-touch:press="onPressOutside"
      v-touch:drag="onDragOutside"
      v-touch:release="onReleaseOutside"
      v-touch-options="{
        dragOutside: true,
        dragFrequency: 16    // 60 FPS for smooth tracking
      }"
      :style="{
        left: `${outsidePos.x}px`,
        top: `${outsidePos.y}px`
      }"
      class="draggable-box outside"
    >
      <p>Can drag outside bounds</p>
      <p class="status" v-if="isDragging">Dragging...</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';

const position = reactive({ x: 0, y: 0 });
const outsidePos = reactive({ x: 100, y: 100 });
const dragStarted = ref(false);
const isDragging = ref(false);
let startPos = { x: 0, y: 0 };
let offsetOutside = { x: 0, y: 0 };

// Basic drag handlers
function onDragStart(event: MouseEvent | TouchEvent) {
  const clientX = 'touches' in event ? event.touches[0].clientX : event.clientX;
  const clientY = 'touches' in event ? event.touches[0].clientY : event.clientY;

  startPos = {
    x: clientX - position.x,
    y: clientY - position.y
  };

  console.log('Drag started');
}

function onDrag(event: MouseEvent | TouchEvent) {
  const clientX = 'touches' in event ? event.touches[0].clientX : event.clientX;
  const clientY = 'touches' in event ? event.touches[0].clientY : event.clientY;

  position.x = clientX - startPos.x;
  position.y = clientY - startPos.y;

  console.log('Dragging:', position);
}

function onDragEnd(event: MouseEvent | TouchEvent) {
  console.log('Drag ended at:', position);
}

// Drag once handler
function onDragOnce(event: MouseEvent | TouchEvent) {
  dragStarted.value = true;
  console.log('Drag movement detected');

  setTimeout(() => {
    dragStarted.value = false;
  }, 2000);
}

// Drag outside handlers
function onPressOutside(event: MouseEvent | TouchEvent) {
  isDragging.value = true;

  const clientX = 'touches' in event ? event.touches[0].clientX : event.clientX;
  const clientY = 'touches' in event ? event.touches[0].clientY : event.clientY;

  offsetOutside = {
    x: clientX - outsidePos.x,
    y: clientY - outsidePos.y
  };
}

function onDragOutside(event: MouseEvent | TouchEvent) {
  const clientX = 'touches' in event ? event.touches[0].clientX : event.clientX;
  const clientY = 'touches' in event ? event.touches[0].clientY : event.clientY;

  outsidePos.x = clientX - offsetOutside.x;
  outsidePos.y = clientY - offsetOutside.y;
}

function onReleaseOutside(event: MouseEvent | TouchEvent) {
  isDragging.value = false;
  console.log('Released at:', outsidePos);
}
</script>

<style scoped>
.drag-container {
  position: relative;
  height: 600px;
  background: #f5f5f5;
  border: 2px solid #ddd;
  overflow: hidden;
}

.draggable-box {
  position: absolute;
  width: 150px;
  height: 150px;
  padding: 20px;
  border-radius: 12px;
  cursor: move;
  user-select: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.basic {
  background: #FF5722;
  color: white;
  top: 20px;
  left: 20px;
}

.outside {
  background: #009688;
  color: white;
}

.drag-box {
  width: 200px;
  height: 120px;
  margin: 20px;
  padding: 20px;
  background: #FFC107;
  border-radius: 8px;
  cursor: move;
  user-select: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.coords, .status {
  font-size: 12px;
  margin-top: 8px;
  font-weight: bold;
}
</style>
```

--------------------------------

### Building Vue 3 Touch Events from Source

Source: https://github.com/robinrodricks/vue3-touch-events/blob/master/README.md

Instructions for building the Vue 3 Touch Events project from its source code. It requires `bun` for installation and building.

```bash
bun install
bun run build
```

--------------------------------

### Plugin Installation and Configuration

Source: https://context7.com/robinrodricks/vue3-touch-events/llms.txt

Register the vue3-touch-events plugin globally with your Vue 3 application and configure options such as event tolerances, frequencies, and CSS classes for consistent touch interactions.

```APIDOC
## Plugin Installation and Configuration

### Description
Register the plugin with your Vue 3 application and configure global settings for all touch events. The installation includes options for customizing thresholds, frequencies, and behavior for various touch gestures.

### Method
Plugin Installation

### Endpoint
app.use(Vue3TouchEvents, options)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **disableClick** (boolean) - Optional - Enable/disable desktop mouse events (default: false)
- **touchClass** (string) - Optional - CSS class applied during touch/hover (default: 'active')
- **namespace** (string) - Optional - Directive namespace (default: 'touch')
- **tapTolerance** (number) - Optional - Pixels of movement allowed for tap (default: 10)
- **touchHoldTolerance** (number) - Optional - Milliseconds to trigger hold event (default: 400)
- **longTapTimeInterval** (number) - Optional - Milliseconds to trigger longtap (default: 400)
- **rollOverFrequency** (number) - Optional - Milliseconds between rollover events (default: 100)
- **dragFrequency** (number) - Optional - Milliseconds between drag events (default: 10)
- **dragOutside** (boolean) - Optional - Fire drag events when dragged outside element (default: false)
- **swipeTolerance** (number) - Optional - Pixels required to trigger swipe (default: 100)
- **swipeConeSize** (number) - Optional - Swipe cone width, 0-1 (default: 0.75)
- **zoomFrequency** (number) - Optional - Milliseconds between zoom events (default: 10)
- **zoomDistance** (number) - Optional - Pixels to trigger zoom event (default: 10)
- **zoomInOutDistance** (number) - Optional - Pixels to trigger zoom.in/out (default: 100)

### Request Example
```typescript
import { createApp } from 'vue';
import Vue3TouchEvents from 'vue3-touch-events';
import App from './App.vue';

const app = createApp(App);
app.use(Vue3TouchEvents, {
  disableClick: false,
  touchClass: 'active',
  namespace: 'touch',
  tapTolerance: 10,
  touchHoldTolerance: 400,
  longTapTimeInterval: 400,
  rollOverFrequency: 100,
  dragFrequency: 10,
  dragOutside: false,
  swipeTolerance: 100,
  swipeConeSize: 0.75,
  zoomFrequency: 10,
  zoomDistance: 10,
  zoomInOutDistance: 100
});
app.mount('#app');
```

### Response
#### Success Response (Installation Complete)
No specific response; plugin is registered and available in components.

#### Response Example
Plugin registered successfully.

### Error Handling
Ensure Vue 3.x is used; invalid options may cause configuration ignoring.
```

--------------------------------

### Install and Configure vue3-touch-events Plugin

Source: https://context7.com/robinrodricks/vue3-touch-events/llms.txt

Demonstrates how to install the vue3-touch-events plugin globally in a Vue 3 application and configure its core settings. This includes options for disabling click events, applying touch classes, setting namespaces, and customizing tolerances for tap, hold, drag, swipe, and zoom gestures. The configuration aims to provide a unified and flexible touch interaction experience.

```typescript
import { createApp } from 'vue';
import Vue3TouchEvents, { type Vue3TouchEventsOptions } from 'vue3-touch-events';
import App from './App.vue';

const app = createApp(App);

// Install with global configuration
app.use<Vue3TouchEventsOptions>(Vue3TouchEvents, {
  // Core settings
  disableClick: false,        // Enable/disable desktop mouse events
  touchClass: 'active',       // CSS class applied during touch/hover
  namespace: 'touch',         // Directive namespace (v-touch, v-touch-class, etc)

  // Tap/Click settings
  tapTolerance: 10,           // Pixels of movement allowed for tap (default: 10px)
  touchHoldTolerance: 400,    // Milliseconds to trigger hold event (default: 400ms)
  longTapTimeInterval: 400,   // Milliseconds to trigger longtap (default: 400ms)
  rollOverFrequency: 100,     // Milliseconds between rollover events (default: 100ms)

  // Drag settings
  dragFrequency: 10,          // Milliseconds between drag events (default: 10ms)
  dragOutside: false,         // Fire drag events when dragged outside element

  // Swipe settings
  swipeTolerance: 100,        // Pixels required to trigger swipe (default: 100px)
  swipeConeSize: 0.75,        // Swipe cone width, 0-1 (default: 0.75)

  // Zoom settings (mobile only)
  zoomFrequency: 10,          // Milliseconds between zoom events (default: 10ms)
  zoomDistance: 10,           // Pixels to trigger zoom event (default: 10px)
  zoomInOutDistance: 100      // Pixels to trigger zoom.in/out (default: 100px)
});

app.mount('#app');
```

--------------------------------

### Nuxt 3 Swipe Navigation Example

Source: https://context7.com/robinrodricks/vue3-touch-events/llms.txt

This example shows how to use the v-touch:swipe directive for swipe navigation between slides in a Nuxt 3 component. It demonstrates handling swipe events to update the current slide index.

```vue
<div
  v-touch:swipe.left="() => navigate('next')"
  v-touch:swipe.right="() => navigate('prev')"
  class="swipeable-content"
>...
```

--------------------------------

### v-touch-class Directive Example

Source: https://github.com/robinrodricks/vue3-touch-events/blob/master/README.md

Example of using the v-touch-class directive to dynamically add a CSS class ('active') to an element when it is tapped or hovered over. This replaces the need for :active and :hover pseudo-classes.

```html
<span v-touch:tap="touchHandler" v-touch-class="'active'">Tap Me</span>
```

--------------------------------

### Nuxt 3 Interactive Menu with Tap Events

Source: https://context7.com/robinrodricks/vue3-touch-events/llms.txt

This example demonstrates using the v-touch:tap directive to handle tap events on menu items in a Nuxt 3 component. It shows how to navigate to different pages based on the tapped menu item.

```vue
<NuxtLink
  v-for="item in menuItems"
  :key="item.path"
  :to="item.path"
  v-touch:tap="handleMenuTap(item)"
  v-touch-class="'menu-active'"
  class="menu-item"
>...
```

--------------------------------

### Nuxt 3 Long Press Action Example

Source: https://context7.com/robinrodricks/vue3-touch-events/llms.txt

This example demonstrates using the v-touch:longtap directive to trigger an action on a long press of a button in a Nuxt 3 component. It shows how to customize the long tap time interval using v-touch-options.

```vue
<button
  v-touch:longtap="handleDelete"
  v-touch-class="'deleting'"
  v-touch-options="{ longTapTimeInterval: 800 }"
  class="delete-btn"
>...
```

--------------------------------

### Global Configuration for Vue 3 Touch Events

Source: https://github.com/robinrodricks/vue3-touch-events/blob/master/README.md

Example of configuring the Vue 3 Touch Events plugin globally. This snippet shows how to set options like `disableClick` and potentially others using `Vue.use`.

```js
Vue.use(Vue3TouchEvents, {
	disableClick: false, ...
});
```

--------------------------------

### Vue 3 Rollover Event for Hover Tracking

Source: https://context7.com/robinrodricks/vue3-touch-events/llms.txt

Implement a rollover event to track mouse movements over elements. This example shows basic tracking of cursor coordinates and the time elapsed since the last update. It utilizes `v-touch:rollover` directive with configurable `rollOverFrequency` for performance.

```vue
<template>
  <div class="rollover-demo">
    <!-- Basic rollover tracking -->
    <div
      v-touch:rollover="onRollover"
      v-touch-options="{ rollOverFrequency: 50 }"
      class="rollover-box"
    >
      <p>Move mouse over this element</p>
      <p class="coords">X: {{ mouseX }}, Y: {{ mouseY }}</p>
      <p class="time">Last update: {{ lastUpdate }}ms ago</p>
    </div>

    <!-- High frequency rollover for smooth cursor following -->
    <div
      v-touch:rollover="onRolloverSmooth"
      v-touch-options="{ rollOverFrequency: 16 }"
      class="rollover-box smooth"
    >
      <div
        :style="{
          transform: `translate(${cursorPos.x}px, ${cursorPos.y}px)`
        }"
        class="cursor-follower"
      ></div>
      <p>Smooth cursor tracking (60 FPS)</p>
    </div>

    <!-- Rollover with visual feedback -->
    <div
      v-touch:rollover="onRolloverColor"
      v-touch-options="{ rollOverFrequency: 100 }"
      :style="{ background: hoverColor }"
      class="rollover-box interactive"
    >
      <p>Hover changes color based on position</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';

const mouseX = ref(0);
const mouseY = ref(0);
const lastUpdate = ref(0);
const cursorPos = reactive({ x: 0, y: 0 });
const hoverColor = ref('#607D8B');
let lastTime = 0;

onMounted(() => {
  lastTime = Date.now();
});

function onRollover(event: MouseEvent) {
  mouseX.value = event.clientX;
  mouseY.value = event.clientY;

  const now = Date.now();
  lastUpdate.value = now - lastTime;
  lastTime = now;

  console.log('Rollover at:', mouseX.value, mouseY.value);
}

function onRolloverSmooth(event: MouseEvent) {
  const rect = (event.target as HTMLElement).getBoundingClientRect();
  cursorPos.x = event.clientX - rect.left;
  cursorPos.y = event.clientY - rect.top;
}

function onRolloverColor(event: MouseEvent) {
  const rect = (event.target as HTMLElement).getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;

  // Generate color based on position
  const r = Math.floor((x / rect.width) * 255);
  const g = Math.floor((y / rect.height) * 255);
  const b = 150;

  hoverColor.value = `rgb(${r}, ${g}, ${b})`;
}
</script>

<style scoped>
.rollover-demo {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px;
}

.rollover-box {
  width: 300px;
  height: 250px;
  padding: 20px;
  background: #607D8B;
  color: white;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: crosshair;
}

.smooth {
  background: #9C27B0;
  overflow: hidden;
}

.interactive {
  transition: background 0.3s ease;
}

.coords, .time {
  font-family: monospace;
  font-size: 14px;
  margin-top: 8px;
}

.cursor-follower {
  position: absolute;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(255,255,255,0.8);
}
</style>
```

--------------------------------

### Using v-touch Events in Nuxt Components

Source: https://github.com/robinrodricks/vue3-touch-events/blob/master/README.md

Example of how to apply `v-touch` event directives to a DOM element within a Nuxt component. This demonstrates binding swipe events for navigation.

```vue
<div v-touch:swipe.left="() => swipe('next')" v-touch:swipe.right="() => swipe('prev')">
</div>
```

--------------------------------

### Vue 3 Swipe Gestures with Directional Detection

Source: https://context7.com/robinrodricks/vue3-touch-events/llms.txt

This Vue 3 component demonstrates swipe gesture detection using the 'vue3-touch-events' library. It includes handlers for generic swipes in any direction, specific directional swipes (left, right, top, bottom), and custom swipe sensitivity settings. The component utilizes Vue's template syntax and script setup for reactivity and event handling.

```vue
<template>
  <div class="swipe-demo">
    <!-- Generic swipe - detects all directions -->
    <div
      v-touch:swipe="onSwipe"
      class="swipe-box all-directions"
    >
      <p>Swipe in any direction</p>
      <p v-if="lastSwipe" class="direction">{{ lastSwipe }}</p>
    </div>

    <!-- Directional swipes -->
    <div class="directional-swipes">
      <div
        v-touch:swipe.left="onSwipeLeft"
        v-touch:swipe.right="onSwipeRight"
        class="swipe-box horizontal"
      >
        <p>← Swipe Left/Right →</p>
        <p class="count">Left: {{ leftCount }} | Right: {{ rightCount }}</p>
      </div>

      <div
        v-touch:swipe.top="onSwipeTop"
        v-touch:swipe.bottom="onSwipeBottom"
        class="swipe-box vertical"
      >
        <p>↑ Swipe Up/Down ↓</p>
        <p class="count">Up: {{ topCount }} | Down: {{ bottomCount }}</p>
      </div>
    </div>

    <!-- Custom swipe settings -->
    <div
      v-touch:swipe="onSwipeCustom"
      v-touch-options="{
        swipeTolerance: 50,     // Only 50px needed
        swipeConeSize: 0.9      // Wide cone (more forgiving)
      }"
      class="swipe-box custom"
    >
      <p>Swipe with custom sensitivity (50px, wide cone)</p>
      <p v-if="customSwipeDirection" class="direction">{{ customSwipeDirection }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const lastSwipe = ref('');
const leftCount = ref(0);
const rightCount = ref(0);
const topCount = ref(0);
const bottomCount = ref(0);
const customSwipeDirection = ref('');

// Generic swipe handler receives direction as first parameter
function onSwipe(direction: 'left' | 'right' | 'top' | 'bottom', event: MouseEvent | TouchEvent) {
  lastSwipe.value = `Swiped ${direction}`;
  console.log('Swipe direction:', direction);

  setTimeout(() => {
    lastSwipe.value = '';
  }, 1500);
}

function onSwipeLeft(event: MouseEvent | TouchEvent) {
  leftCount.value++;
  console.log('Swiped left');
}

function onSwipeRight(event: MouseEvent | TouchEvent) {
  rightCount.value++;
  console.log('Swiped right');
}

function onSwipeTop(event: MouseEvent | TouchEvent) {
  topCount.value++;
  console.log('Swiped up');
}

function onSwipeBottom(event: MouseEvent | TouchEvent) {
  bottomCount.value++;
  console.log('Swiped down');
}

function onSwipeCustom(direction: string, event: MouseEvent | TouchEvent) {
  customSwipeDirection.value = `Custom swipe: ${direction}`;

  setTimeout(() => {
    customSwipeDirection.value = '';
  }, 1500);
}
</script>

<style scoped>
.swipe-demo {
  padding: 20px;
}

.swipe-box {
  margin: 20px;
  padding: 40px;
  border: 3px dashed #9C27B0;
  border-radius: 12px;
  text-align: center;
  cursor: move;
  user-select: none;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.all-directions {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.horizontal {
  background: linear-gradient(to right, #f093fb 0%, #f5576c 100%);
  color: white;
}

.vertical {
  background: linear-gradient(to bottom, #4facfe 0%, #00f2fe 100%);
  color: white;
}

.custom {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.direction, .count {
  font-weight: bold;
  font-size: 18px;
  margin-top: 10px;
}
</style>

```

--------------------------------

### Handle Tap Events with vue3-touch-events

Source: https://context7.com/robinrodricks/vue3-touch-events/llms.txt

Illustrates how to use the `v-touch` directive to handle tap and click events on HTML elements. It covers basic tap detection, explicit tap event handling with event details, and how to pass custom parameters to tap event handlers using closures. This approach ensures cross-device compatibility for simple click interactions.

```vue
<template>
  <!-- Basic tap - default event -->
  <button v-touch="onTap" class="tap-button">
    Tap Me
  </button>

  <!-- Explicit tap event -->
  <div v-touch:tap="onTapWithDetails" class="interactive-box">
    Click or Tap Here
  </div>

  <!-- Tap with parameters -->
  <div v-for="(item, index) in items" :key="index">
    <div v-touch:tap="onTapItem(item, index)" class="list-item">
      {{ item.name }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const items = ref([
  { name: 'Item 1', id: 1 },
  { name: 'Item 2', id: 2 },
  { name: 'Item 3', id: 3 }
]);

// Simple callback
function onTap(event: MouseEvent | TouchEvent) {
  console.log('Tapped!', event);
}

// Callback with event details
function onTapWithDetails(event: MouseEvent | TouchEvent) {
  console.log('Element tapped at:', event.timeStamp);
  console.log('Target:', event.target);
}

// Callback with custom parameters
function onTapItem(item: any, index: number) {
  return function(event: MouseEvent | TouchEvent) {
    console.log(`Tapped item ${index}:`, item.name);
    console.log('Event:', event);
  };
}
</script>

<style scoped>
.tap-button {
  padding: 12px 24px;
  cursor: pointer;
}

.interactive-box {
  width: 200px;
  height: 100px;
  background: #4CAF50;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.list-item {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
}
</style>
```

--------------------------------

### Implement pinch-to-zoom gestures in Vue 3

Source: https://context7.com/robinrodricks/vue3-touch-events/llms.txt

Vue 3 component demonstrating multi-touch zoom gestures using the v-touch directive. Includes generic zoom handling, discrete zoom-in/out detection, and bounded image zooming with visual feedback.

```vue
<template>
  <div class="zoom-container">
    <!-- Generic zoom - receives zoom factor -->
    <div
      v-touch:zoom="onZoom"
      v-touch-options="{ zoomFrequency: 16, zoomDistance: 5 }"
      :style="{
        transform: `scale(${zoomScale})`,
        background: zoomColor
      }"
      class="zoom-box"
    >
      <p>Pinch to zoom</p>
      <p class="scale">Scale: {{ zoomScale.toFixed(2) }}</p>
    </div>

    <!-- Zoom in/out detection -->
    <div class="zoom-controls">
      <div
        v-touch:zoom.in="onZoomIn"
        v-touch-options="{ zoomInOutDistance: 80 }"
        class="zoom-box zoom-in"
      >
        <p>Pinch out to zoom in</p>
        <p class="count">Zoom ins: {{ zoomInCount }}</p>
      </div>

      <div
        v-touch:zoom.out="onZoomOut"
        v-touch-options="{ zoomInOutDistance: 80 }"
        class="zoom-box zoom-out"
      >
        <p>Pinch in to zoom out</p>
        <p class="count">Zoom outs: {{ zoomOutCount }}</p>
      </div>
    </div>

    <!-- Combined zoom with image -->
    <div class="image-zoom-wrapper">
      <img
        v-touch:zoom="onImageZoom"
        v-touch-options="{
          zoomFrequency: 10,
          zoomDistance: 8
        }"
        :style="{
          transform: `scale(${imageScale})`,
          transition: isZooming ? 'none' : 'transform 0.3s ease'
        }"
        src="https://via.placeholder.com/400x300"
        alt="Zoomable image"
        class="zoomable-image"
      />
      <p class="info">Use two fingers to zoom (mobile only)</p>
      <p class="scale">Image scale: {{ imageScale.toFixed(2) }}x</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const zoomScale = ref(1);
const zoomColor = ref('#3F51B5');
const zoomInCount = ref(0);
const zoomOutCount = ref(0);
const imageScale = ref(1);
const isZooming = ref(false);

// Generic zoom handler - receives zoom factor
function onZoom(zoomFactor: number, event: TouchEvent) {
  zoomScale.value = zoomFactor;

  // Change color based on zoom level
  if (zoomFactor > 1.5) {
    zoomColor.value = '#4CAF50';
  } else if (zoomFactor < 0.7) {
    zoomColor.value = '#F44336';
  } else {
    zoomColor.value = '#3F51B5';
  }

  console.log('Zoom factor:', zoomFactor);
}

function onZoomIn(event: TouchEvent) {
  zoomInCount.value++;
  console.log('Zoom in detected');
}

function onZoomOut(event: TouchEvent) {
  zoomOutCount.value++;
  console.log('Zoom out detected');
}

// Image zoom with bounds
function onImageZoom(zoomFactor: number, event: TouchEvent) {
  isZooming.value = true;

  // Apply zoom with min/max bounds
  let newScale = imageScale.value * zoomFactor;
  newScale = Math.max(0.5, Math.min(3, newScale));

  imageScale.value = newScale;

  console.log('Image zoom:', imageScale.value);

  // Reset zooming flag after a delay
  setTimeout(() => {
    isZooming.value = false;
  }, 100);
}
</script>

<style scoped>
.zoom-container {
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}

.zoom-box {
  width: 250px;
  height: 200px;
  padding: 20px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  user-select: none;
  touch-action: none;
  transition: transform 0.1s ease;
}

.zoom-controls {
  display: flex;
  gap: 20px;
}

.zoom-in {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.zoom-out {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.imagezoom-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.zoomable-image {
  max-width: 400px;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  touch-action: none;
  transform-origin: center;
}

.scale, .count {
  font-weight: bold;
  font-size: 16px;
  margin-top: 10px;
}

.info {
  color: #666;
  font-size: 14px;
  font-style: italic;
}
</style>
```

--------------------------------

### Configure vue3-touch-events in Nuxt 3

Source: https://context7.com/robinrodricks/vue3-touch-events/llms.txt

This snippet demonstrates how to configure vue3-touch-events as a Nuxt 3 plugin. It initializes the plugin with various options to customize touch event behavior.

```typescript
import Vue3TouchEvents from 'vue3-touch-events';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Vue3TouchEvents, {
    disableClick: false,
    touchClass: 'touch-active',
    tapTolerance: 10,
    touchHoldTolerance: 400,
    swipeTolerance: 100,
    longTapTimeInterval: 400,
    dragFrequency: 10,
    rollOverFrequency: 100,
    dragOutside: false
  });
});
```

--------------------------------

### Basic v-touch directive usage in HTML

Source: https://github.com/robinrodricks/vue3-touch-events/blob/master/README.md

Demonstrates various v-touch directive bindings for different touch events including tap, swipe, longtap, press, release, drag, hold, and zoom. Shows how to use modifiers for event specificity and configuration options.

```html
<!-- bind a tap event -->
<span v-touch:tap="touchHandler">Tap Me</span>

<!-- tap is the default event, you can omit it -->
<span v-touch="touchHandler">Tap Me</span>

<!-- bind the swipe event, no matter direction -->
<span v-touch:swipe="swipeHandler">Swipe Here</span>

<!-- only when swipe left can trigger the callback -->
<span v-touch:swipe.left="swipeHandler">Swipe Left Here</span>

<!-- bind a long tap event -->
<span v-touch:longtap="longtapHandler">Long Tap Event</span>

<!-- bind a start and end event -->
<span v-touch:press="startHandler" v-touch:release="endHandler">Press and Release Events</span>

<!-- bind a move and moving event -->
<span v-touch:drag.once="movedHandler">Triggered once when starting to move and tapTolerance is exceeded</span>
<span v-touch:drag="movingHandler">Continuously triggered while dragging</span>

<!-- touch and hold -->
<span v-touch:hold="touchHoldHandler">Touch and hold on the screen for a while</span>

<!-- you can even mix multiple events -->
<span v-touch:tap="tapHandler" v-touch:longtap="longtapHandler" v-touch:swipe.left="swipeLeftHandler" v-touch:press="startHandler" v-touch:release="endHandler" v-touch:swipe.right="swipeRightHandler">Mix Multiple Events</span>

<!-- using different options for specified element -->
<span v-touch:tap="tapHandler" v-touch-options="{touchClass: 'active', swipeTolerance: 80, touchHoldTolerance: 300}">Different options</span>

<!-- customize touch effects by CSS class -->
<span v-touch:tap="tapHandler" v-touch-class="active">Customize touch class</span>
<!-- or -->
<span v-touch:tap="tapHandler" v-touch-options="{touchClass: 'active'}">Customize touch class</span>

<!-- zoom in -->
<span v-touch:zoom.in="zoomInHandler">Use multi-touch to zoom in</span>

<!-- zoom out -->
<span v-touch:zoom.out="zoomOutHandler">Use multi-touch to zoom out</span>
```

--------------------------------

### CSS Alternative with v-touch-class

Source: https://github.com/robinrodricks/vue3-touch-events/blob/master/README.md

Demonstrates how to use the 'active' class added by v-touch-class as a replacement for traditional :active and :hover CSS pseudo-classes.

```css
/* before */
span:active,
span:hover {
	background: green;
}

/* now, you can write like this */
span.active {
	background: green;
}
```

--------------------------------

### Simple touch event callback implementation

Source: https://github.com/robinrodricks/vue3-touch-events/blob/master/README.md

Shows the basic pattern for handling touch events using a callback function in Vue methods. The mouseEvent parameter is optional and can be removed if not needed for the handler logic.

```html
<div v-touch:tap="onTapItem">Button</div>
```

```javascript
methods: {
	onTapItem(mouseEvent) { // you can remove the `mouseEvent` argument
		console.log("Tapped!");
	},
},
```

--------------------------------

### Include UMD Script for Vue 3 Touch Events

Source: https://github.com/robinrodricks/vue3-touch-events/blob/master/README.md

This HTML snippet shows how to include the UMD (Universal Module Definition) script for the vue3-touch-events plugin in a pure JavaScript project. No explicit registration with Vue.js is needed when using the UMD script.

```html
<script src="libs/vue.js"></script>
<script src="libs/vue3-touch-events.js"></script>
```

--------------------------------

### Event handler with parameters using delegation pattern

Source: https://github.com/robinrodricks/vue3-touch-events/blob/master/README.md

Demonstrates how to pass additional parameters to touch event handlers by returning a delegate function. This pattern allows accessing both the touch event data (direction, mouseEvent) and custom parameters (item, index) in the handler.

```html
<div v-for="(item, i) in items">
	<div v-touch:swipe="onSwipeItem(item, i)">Button</div>
</div>
```

```javascript
methods: {
	onSwipeItem(item, i) {
		return function (direction, mouseEvent) {
			console.log("Swiped item ", i, ": ", item, " in direction ", direction);
		};
	},
},
```

--------------------------------

### Register Vue 3 Touch Events Plugin (Vue 2)

Source: https://github.com/robinrodricks/vue3-touch-events/blob/master/README.md

This code snippet demonstrates how to globally register the vue3-touch-events plugin for Vue.js 2.x applications. It requires importing the plugin and then using `Vue.use()`.

```javascript
import Vue from "vue";
import Vue3TouchEvents from "vue3-touch-events";

Vue.use(Vue3TouchEvents);
```

--------------------------------

### v-touch Directive: Tap Event

Source: https://context7.com/robinrodricks/vue3-touch-events/llms.txt

Handle simple tap or click events on elements using the v-touch directive, supporting both desktop mouse and mobile touch interactions with optional parameters and event details.

```APIDOC
## v-touch Directive: Tap Event

### Description
Handle simple tap/click events on elements with support for both desktop and mobile devices. The directive can be used with basic callbacks or with explicit event binding.

### Method
Directive Application

### Endpoint
v-touch[:tap][="handler"]

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None (event handler function passed as directive value)

### Request Example
```vue
<template>
  <button v-touch="onTap">Tap Me</button>
  <div v-touch:tap="onTapWithDetails">Click or Tap Here</div>
  <div v-for="(item, index) in items" :key="index">
    <div v-touch:tap="onTapItem(item, index)"> {{ item.name }} </div>
  </div>
</template>
```

### Response
#### Success Response (Event Triggered)
- **event** (MouseEvent | TouchEvent) - The native event object containing details like timeStamp and target

#### Response Example
```typescript
function onTap(event: MouseEvent | TouchEvent) {
  console.log('Tapped!', event);
}
```

### Error Handling
If handler is not a function, no action is taken. Ensure event types are handled properly for cross-device compatibility.
```

--------------------------------

### Vue: Override Global Touch Event Options with v-touch-options

Source: https://context7.com/robinrodricks/vue3-touch-events/llms.txt

This Vue template demonstrates overriding global touch event configurations for individual elements using the `v-touch-options` directive. It shows how to customize tap tolerance, swipe settings, hold timing, and drag frequency, as well as combining multiple event options with custom settings.

```vue
<template>
  <div class="options-demo">
    <!-- Element with custom tap tolerance -->
    <div
      v-touch:tap="onTap"
      v-touch-options="{
        tapTolerance: 5,
        touchClass: 'precise-tap'
      }"
      class="precision-box"
    >
      <p>Precise tap (5px tolerance)</p>
      <p class="note">Very little movement allowed</p>
    </div>

    <!-- Element with custom swipe settings -->
    <div
      v-touch:swipe="onSwipe"
      v-touch-options="{
        swipeTolerance: 50,
        swipeConeSize: 0.9,
        touchClass: 'swiping'
      }"
      class="easy-swipe-box"
    >
      <p>Easy swipe (50px, wide cone)</p>
      <p class="direction" v-if="swipeDir">{{ swipeDir }}</p>
    </div>

    <!-- Element with custom hold timing -->
    <div
      v-touch:hold="onQuickHold"
      v-touch-options="{
        touchHoldTolerance: 200,
        touchClass: 'holding-quick'
      }"
      class="quick-hold-box"
    >
      <p>Quick hold (200ms)</p>
      <p class="status" v-if="quickHeld">Held!</p>
    </div>

    <!-- Element with custom drag frequency -->
    <div
      v-touch:drag="onSmoothDrag"
      v-touch-options="{
        dragFrequency: 8,
        dragOutside: true,
        touchClass: 'dragging-smooth'
      }"
      :style="{
        transform: `translate(${dragPos.x}px, ${dragPos.y}px)`
      }"
      class="smooth-drag-box"
    >
      <p>Smooth drag (125 FPS)</p>
      <p class="coords">{{ dragPos.x }}, {{ dragPos.y }}</p>
    </div>

    <!-- Combined custom options -->
    <div
      v-touch:tap="onCustomTap"
      v-touch:longtap="onCustomLongTap"
      v-touch:swipe.left="onCustomSwipe"
      v-touch-options="{
        tapTolerance: 8,
        longTapTimeInterval: 600,
        swipeTolerance: 80,
        touchClass: 'multi-active',
        disableClick: false
      }"
      class="combined-box"
    >
      <p>Multiple events with custom settings</p>
      <ul class="event-list">
        <li>Tap tolerance: 8px</li>
        <li>Long tap: 600ms</li>
        <li>Swipe left: 80px</li>
      </ul>
      <p class="last-event" v-if="lastEvent">{{ lastEvent }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';

const swipeDir = ref('');
const quickHeld = ref(false);
const dragPos = reactive({ x: 0, y: 0 });
const lastEvent = ref('');
let dragStart = { x: 0, y: 0 };

function onTap() {
  console.log('Precise tap detected');
}

function onSwipe(direction: string) {
  swipeDir.value = `Swiped ${direction}`;
  setTimeout(() => {
    swipeDir.value = '';
  }, 1500);
}

function onQuickHold() {
  quickHeld.value = true;
  setTimeout(() => {
    quickHeld.value = false;
  }, 1500);
}

function onSmoothDrag(event: MouseEvent | TouchEvent) {
  const clientX = 'touches' in event ? event.touches[0].clientX : event.clientX;
  const clientY = 'touches' in event ? event.touches[0].clientY : event.clientY;

  if (dragStart.x === 0) {
    dragStart = { x: clientX, y: clientY };
  }

  dragPos.x = clientX - dragStart.x;
  dragPos.y = clientY - dragStart.y;
}

function onCustomTap() {
  lastEvent.value = 'Tap detected';
  setTimeout(() => {
    lastEvent.value = '';
  }, 2000);
}

function onCustomLongTap() {
  lastEvent.value = 'Long tap (600ms)';
  setTimeout(() => {
    lastEvent.value = '';
  }, 2000);
}

function onCustomSwipe() {
  lastEvent.value = 'Swiped left';
  setTimeout(() => {
    lastEvent.value = '';
  }, 2000);
}
</script>

<style scoped>
.options-demo {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.precision-box, .easy-swipe-box, .quick-hold-box,
.smooth-drag-box, .combined-box {
  padding: 25px;
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.precision-box {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.precision-box.precise-tap {
  transform: scale(0.97);
  box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
}

.easy-swipe-box {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
}

.easy-swipe-box.swiping {
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.quick-hold-box {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
}

.quick-hold-box.holding-quick {
  animation: pulse 0.5s ease;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.smooth-drag-box {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  position: relative;
}

.smooth-drag-box.dragging-smooth {
  box-shadow: 0 15px 35px rgba(0,0,0,0.3);
  cursor: grabbing;
}

.combined-box {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  grid-column: span 2;
}

.combined-box.multi-active {
  transform: scale(1.02);
}
</style>
```