fix: fix form reset cause unexpectedly validation error

storipress · Feb 1, 2024 · 0b4d29e · 0b4d29e
1 parent 82955f5
commit 0b4d29e
Showing 1 changed file with 18 additions and 10 deletions.
diff --git a/src/components/LeakyPaywall.vue b/src/components/LeakyPaywall.vue
@@ -47,11 +47,19 @@ useEventListener(window, 'wheel', (event) => {
 // If user scroll over 40%, open the paywall
 whenever(
   () => y.value > height.value * 0.4,
-  () => {
+  async () => {
     scrollLock.value = true
     show.value = true
+  },
+  { immediate: true },
+)
+
+whenever(
+  logicNot(show),
+  () => {
     form.resetForm()
   },
+  { flush: 'post' },
 )
 </script>
 
@@ -63,35 +71,35 @@ whenever(
         <AlertDialogTitle class="invisible">Subscribe</AlertDialogTitle>
       </VisuallyHidden>
       <AlertDialogContent>
-        <Card class="w-full pt-4 pb-4" :style="themeConfig">
+        <Card class="w-full pb-4 pt-4" :style="themeConfig">
           <CardContent>
             <div class="flex flex-col items-center gap-1">
               <Avatar
-                class="relative items-center justify-center p-1 mt-2 mb-4 overflow-visible bg-white shadow-md"
+                class="relative mb-4 mt-2 items-center justify-center overflow-visible bg-white p-1 shadow-md"
                 size="md"
               >
-                <div class="overflow-hidden rounded-full size-full">
+                <div class="size-full overflow-hidden rounded-full">
                   <AvatarImage :src="config.avatar" />
                 </div>
                 <Avatar
                   shape="square"
-                  class="absolute bottom-0 right-0 items-center justify-center p-1 translate-x-1 translate-y-1 bg-white shadow-md"
+                  class="absolute bottom-0 right-0 translate-x-1 translate-y-1 items-center justify-center bg-white p-1 shadow-md"
                   size="sm"
                 >
-                  <div class="overflow-hidden rounded-md size-full">
+                  <div class="size-full overflow-hidden rounded-md">
                     <AvatarImage :src="config.publicationLogo" />
                   </div>
                 </Avatar>
               </Avatar>
 
-              <h3 class="text-lg font-bold text-center">{{ config.title }}</h3>
+              <h3 class="text-center text-lg font-bold">{{ config.title }}</h3>
 
-              <p class="pb-4 text-sm text-center text-stone-400 text-balance">
+              <p class="text-balance pb-4 text-center text-sm text-stone-400">
                 {{ config.description }}
               </p>
 
               <!-- email form -->
-              <form class="flex flex-col w-full gap-1" @submit="onSubmit">
+              <form class="flex w-full flex-col gap-1" @submit="onSubmit">
                 <FormField v-slot="{ componentField }" name="email">
                   <FormItem v-auto-animate>
                     <FormControl>
@@ -107,7 +115,7 @@ whenever(
                   </FormItem>
                 </FormField>
 
-                <Button type="submit" class="w-full text-white bg-sp_primary">Subscribe</Button>
+                <Button type="submit" class="w-full bg-sp_primary text-white">Subscribe</Button>
 
                 <Separator class="my-2" />