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>

docs/components/content/DragResizeModalPreview.vue

@@ -6,7 +6,6 @@ defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', modelValue: boolean): void
   (e: 'confirm'): void
 }>()
 </script>
@@ -15,7 +14,8 @@ const emit = defineEmits<{
   <VueFinalModal
     class="flex justify-center items-center"
     content-class="flex flex-col max-w-xl mx-4 p-4 bg-white dark:bg-gray-900 border dark:border-gray-700 rounded-lg space-y-2"
-    @update:model-value="val => emit('update:modelValue', val)"
+    content-transition="vfm-fade"
+    overlay-transition="vfm-fade"
   >
     <h1 class="text-xl">
       {{ title }}

docs/components/content/Fullscreen.vue

@@ -6,7 +6,6 @@ defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', modelValue: boolean): void
   (e: 'confirm'): void
 }>()
 </script>
@@ -15,7 +14,8 @@ const emit = defineEmits<{
   <VueFinalModal
     class="confirm-modal"
     content-class="confirm-modal-content"
-    @update:model-value="val => emit('update:modelValue', val)"
+    overlay-transition="vfm-fade"
+    content-transition="vfm-fade"
   >
     <h1>{{ title }}</h1>
     <slot />

docs/components/content/FullscreenPreview.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { ModalsContainer, useModal } from 'vue-final-modal'
-import PlainCssConfirmModal from './PlainCssConfirmModal.vue'
+import ModalConfirmPlainCss from './ModalConfirmPlainCss.vue'
 
 const { open, close } = useModal({
-  component: PlainCssConfirmModal,
+  component: ModalConfirmPlainCss,
   attrs: {
     title: 'Hello World!',
     onConfirm() {

docs/components/content/LoginFormModal.vue

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

docs/components/content/LoginFormVorms.vue

@@ -40,7 +40,7 @@ function dragResize(newRect) {
         <h3>Hello World!</h3>
         <p>{{ top }} х {{ left }} </p>
         <p>{{ width }} х {{ height }}</p>
-        <button class="absolute top-0 right-0 mt-2 mr-2 px-2 border rounded-md " @click="emit('update:modelValue', false)">
+        <button class="absolute top-0 right-0 mt-2 mr-2 px-2 border rounded-md " @pointerup="emit('update:modelValue', false)">
           X
         </button>
       </VueDragResize>

docs/components/content/ModalBottom.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { ModalsContainer } from 'vue-final-modal'
+import ModalDragResize from './ModalDragResize.vue'
+
+const show = ref(false)
+</script>
+
+<template>
+  <VButton @click="show = true">
+    Open Modal
+  </VButton>
+
+  <ModalDragResize v-model="show" />
+
+  <ModalsContainer />
+</template>

docs/components/content/ModalBottomPreview.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { VueFinalModal } from 'vue-final-modal'
+
+defineProps<{
+  title?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+</script>
+
+<template>
+  <VueFinalModal
+    content-class="w-full h-full flex flex-col bg-white dark:bg-gray-900 space-y-2"
+    :hide-overlay="true"
+    content-transition="vfm-fade"
+  >
+    <h1 class="text-xl">
+      {{ title }}
+    </h1>
+    <slot />
+    <button class="absolute top-4 right-4 px-2 border rounded-lg" @click="emit('close')">
+      x
+    </button>
+  </VueFinalModal>
+</template>

docs/components/content/ConfirmModal.vue renamed to docs/components/content/ModalConfirm.vue

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

docs/components/content/PlainCssConfirmModal.vue renamed to docs/components/content/ModalConfirmPlainCss.vue

@@ -14,11 +14,11 @@ function confirm() {
     Open Modal
   </VButton>
 
-  <ConfirmModal
+  <ModalConfirm
     :modal-id="modalId"
     title="Hello World!"
     @confirm="() => confirm()"
   >
     <p>The content of the modal</p>
-  </ConfirmModal>
+  </ModalConfirm>
 </template>