42 lines
1.1 KiB
Vue
42 lines
1.1 KiB
Vue
<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>
|