diff --git a/src/components/SwipeRefresh.vue b/src/components/SwipeRefresh.vue index 8b23f678..ae605c6a 100644 --- a/src/components/SwipeRefresh.vue +++ b/src/components/SwipeRefresh.vue @@ -14,20 +14,36 @@ export default defineComponent({ name: 'SwipeRefresh', props: { + /** Callback to execute when the user swipes down */ refresh: { type: Function as PropType<() => Promise>, required: true, }, + /** Whether to allow the swipe action */ allowSwipe: { type: Boolean, default: true, }, + /** + * A unique identifier for the swipe action. + * If the state changes, the swipe action is reset. + */ state: { type: Number, default: Math.random(), }, + + /** + * An ancestor element of the touch action + * target must match this query selector to be + * eligible for the swipe action. + */ + match: { + type: String, + default: '', + }, }, data: () => ({ @@ -131,6 +147,11 @@ export default defineComponent({ touchstart(event: TouchEvent) { if (!this.allowSwipe) return; const touch = event.touches[0]; + + // Check if top element matches selector + if (this.match && !(touch.target).closest(this.match)) return; + + // Start swipe action this.end = this.start = touch.clientY; this.progress = 0; this.on = true; diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue index 170d18f0..9e06df85 100644 --- a/src/components/Timeline.vue +++ b/src/components/Timeline.vue @@ -2,6 +2,7 @@