@@ -92,6 +92,25 @@ export function useSwipeToClose(
9292 } ,
9393 } )
9494
95+ const bindSwipe = computed ( ( ) => {
96+ if ( props . swipeToClose === 'none' )
97+ return
98+ const translateDirection = ( ( ) => {
99+ switch ( props . swipeToClose ) {
100+ case 'up' :
101+ case 'down' :
102+ return 'translateY'
103+ case 'left' :
104+ case 'right' :
105+ return 'translateX'
106+ }
107+ } ) ( )
108+ return {
109+ class : { 'vfm-bounce-back' : ! isSwiping . value } ,
110+ style : { transform : `${ translateDirection } (${ - offset . value } px)` } ,
111+ }
112+ } )
113+
95114 watch (
96115 ( ) => isCollapsed . value ,
97116 ( val ) => {
@@ -100,6 +119,14 @@ export function useSwipeToClose(
100119 } ,
101120 )
102121
122+ watch (
123+ ( ) => modelValueLocal . value ,
124+ ( val ) => {
125+ if ( val )
126+ offset . value = 0
127+ } ,
128+ )
129+
103130 watch (
104131 ( ) => offset . value ,
105132 ( newValue , oldValue ) => {
@@ -116,6 +143,11 @@ export function useSwipeToClose(
116143 } ,
117144 )
118145
146+ function onTouchStartSwipeBanner ( e : TouchEvent ) {
147+ if ( props . preventNavigationGestures )
148+ e . preventDefault ( )
149+ }
150+
119151 function canSwipe ( target ?: null | EventTarget ) : boolean {
120152 const tagName = ( target as HTMLElement ) ?. tagName
121153 if ( ! tagName || [ 'INPUT' , 'TEXTAREA' ] . includes ( tagName ) )
@@ -142,38 +174,6 @@ export function useSwipeToClose(
142174 return allow && canSwipe ( ( target as HTMLElement ) ?. parentElement )
143175 }
144176
145- watch (
146- ( ) => modelValueLocal . value ,
147- ( val ) => {
148- if ( val )
149- offset . value = 0
150- } ,
151- )
152-
153- const bindSwipe = computed ( ( ) => {
154- if ( props . swipeToClose === 'none' )
155- return
156- const translateDirection = ( ( ) => {
157- switch ( props . swipeToClose ) {
158- case 'up' :
159- case 'down' :
160- return 'translateY'
161- case 'left' :
162- case 'right' :
163- return 'translateX'
164- }
165- } ) ( )
166- return {
167- class : { 'vfm-bounce-back' : ! isSwiping . value } ,
168- style : { transform : `${ translateDirection } (${ - offset . value } px)` } ,
169- }
170- } )
171-
172- function onTouchStartSwipeBanner ( e : TouchEvent ) {
173- if ( props . preventNavigationGestures )
174- e . preventDefault ( )
175- }
176-
177177 return {
178178 vfmContentEl,
179179 swipeBannerEl,
0 commit comments