V2: Origin based animations, Gesture Builder, New Demo, non-url-based-routing. Massive improvements.

packages/core-v2/src/components/OriginGesture.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useOriginGesture } from "../gesture";
+import type { OriginGestureProps } from "../types";
+
+defineOptions({ name: "OriginGesture", inheritAttrs: false });
+
+const props = withDefaults(defineProps<OriginGestureProps>(), {
+  as: "div",
+});
+
+/*
+ * This convenience component makes the declaration live exactly where the
+ * developer writes it. `useOriginGesture()` is also public for components that
+ * cannot accept an extra wrapper element.
+ */
+const gesture = useOriginGesture(
+  props.gesture ?? {
+    direction: props.direction,
+    edge: props.edge,
+    threshold: props.threshold,
+    action: (context) => props.action?.(context),
+  },
+);
+const touchStyle = computed(() => gesture.style);
+</script>
+
+<template>
+  <component
+    :is="as"
+    v-bind="$attrs"
+    class="nvo-gesture"
+    :style="touchStyle"
+    @pointerdown="gesture.onPointerdown"
+    @pointermove="gesture.onPointermove"
+    @pointerup="gesture.onPointerup"
+    @pointercancel="gesture.onPointercancel"
+  >
+    <slot />
+  </component>
+</template>