Feat/swipe to close (#318)

* feat: support swipeToClose to VueFinalModal, delete ModalFullscreen and ModalBottom

* docs: update

* docs: update docs

* chore: add warning for useModal()

* docs: update docs

* chore: warning only in dev mode

Author: hunterliu1003

docs/components/content/BottomSheet.vue

@@ -33,6 +33,7 @@ const { value: remember, attrs: rememberAttrs } = register('remember')
 </script>
 
 <template>
+  <h1 class="text-2xl mb-4">Login</h1>
   <form @submit="handleSubmit">
     <div class="field">
       <input
@@ -74,11 +75,6 @@ const { value: remember, attrs: rememberAttrs } = register('remember')
 </template>
 
 <style>
-form {
-  background: #344951;
-  color: rgb(63, 63, 70, var(--tw-text-opacity));
-}
-
 .field + .field {
   margin-top: 15px;
 }
@@ -89,7 +85,7 @@ input[type='submit'] {
   width: 100%;
   border-radius: 4px;
   border: 1px solid white;
-  padding: 12px 16px;
+  padding: 4px 16px 4px 4px;
 }
 
 .field__error {
@@ -100,7 +96,6 @@ input[type='submit'] {
 .checkbox {
   display: flex;
   align-items: center;
-  color: white;
 }
 
 .field__checkbox {
@@ -114,7 +109,6 @@ input[type='submit'] {
 input[type='submit'] {
   background: #41b883;
   border: 1px solid #41b883;
-  color: #344951;
   cursor: pointer;
 }
 </style>

docs/components/content/BottomSheetPreview.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { VueFinalModal } from 'vue-final-modal'
+
+defineProps<{
+  title?: string
+}>()
+</script>
+
+<template>
+  <VueFinalModal
+    content-class="absolute bottom-0 w-full p-4 bg-white dark:bg-gray-900 space-y-2"
+    swipe-to-close="down"
+    content-transition="vfm-slide-down"
+    overlay-transition="vfm-fade"
+  >
+    <h1 class="text-xl">
+      {{ title }}
+    </h1>
+    <div class="text-3xl">Swipe down to close the modal</div>
+    <slot />
+  </VueFinalModal>
+</template>

docs/components/content/ConfirmModalPreview.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ModalsContainer, useModal } from 'vue-final-modal'
+import ModalBottom from './ModalBottom.vue'
+const { open, close } = useModal({
+  component: ModalBottom,
+  attrs: {
+    title: 'Hello World!',
+    onClose() {
+      close()
+    },
+  },
+  slots: {
+    default: '<p>ModalBottom: The content of the modal</p>',
+  },
+})
+</script>
+
+<template>
+  <VButton @click="() => open()">
+    Open Modal
+  </VButton>
+
+  <ModalsContainer />
+</template>