Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit b918009

Browse files
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
1 parent f9cc023 commit b918009

File tree

65 files changed

+1062
-1211
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+1062
-1211
lines changed

‎docs/components/content/BottomSheet.vue

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎docs/components/content/BottomSheetPreview.vue

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎docs/components/content/ConfirmModalPreview.vue

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎docs/components/content/DragResizeModalPreview.vue

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎docs/components/content/Fullscreen.vue

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎docs/components/content/FullscreenPreview.vue

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎docs/components/content/LoginFormModal.vue

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎docs/components/content/LoginFormVorms.vue

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ const { value: remember, attrs: rememberAttrs } = register('remember')
3333
</script>
3434

3535
<template>
36+
<h1 class="text-2xl mb-4">Login</h1>
3637
<form @submit="handleSubmit">
3738
<div class="field">
3839
<input
@@ -74,11 +75,6 @@ const { value: remember, attrs: rememberAttrs } = register('remember')
7475
</template>
7576

7677
<style>
77-
form {
78-
background: #344951;
79-
color: rgb(63, 63, 70, var(--tw-text-opacity));
80-
}
81-
8278
.field + .field {
8379
margin-top: 15px;
8480
}
@@ -89,7 +85,7 @@ input[type='submit'] {
8985
width: 100%;
9086
border-radius: 4px;
9187
border: 1px solid white;
92-
padding: 12px 16px;
88+
padding: 4px 16px4px4px;
9389
}
9490
9591
.field__error {
@@ -100,7 +96,6 @@ input[type='submit'] {
10096
.checkbox {
10197
display: flex;
10298
align-items: center;
103-
color: white;
10499
}
105100
106101
.field__checkbox {
@@ -114,7 +109,6 @@ input[type='submit'] {
114109
input[type='submit'] {
115110
background: #41b883;
116111
border: 1px solid #41b883;
117-
color: #344951;
118112
cursor: pointer;
119113
}
120114
</style>

‎docs/components/content/ModalBottom.vue

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script setup lang="ts">
2+
import { VueFinalModal } from 'vue-final-modal'
3+
4+
defineProps<{
5+
title?: string
6+
}>()
7+
</script>
8+
9+
<template>
10+
<VueFinalModal
11+
content-class="absolute bottom-0 w-full p-4 bg-white dark:bg-gray-900 space-y-2"
12+
swipe-to-close="down"
13+
content-transition="vfm-slide-down"
14+
overlay-transition="vfm-fade"
15+
>
16+
<h1 class="text-xl">
17+
{{ title }}
18+
</h1>
19+
<div class="text-3xl">Swipe down to close the modal</div>
20+
<slot />
21+
</VueFinalModal>
22+
</template>
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<script setup lang="ts">
2+
import { ModalsContainer, useModal } from 'vue-final-modal'
3+
import ModalBottom from './ModalBottom.vue'
4+
const { open, close } = useModal({
5+
component: ModalBottom,
6+
attrs: {
7+
title: 'Hello World!',
8+
onClose() {
9+
close()
10+
},
11+
},
12+
slots: {
13+
default: '<p>ModalBottom: The content of the modal</p>',
14+
},
15+
})
16+
</script>
17+
18+
<template>
19+
<VButton @click="() => open()">
20+
Open Modal
21+
</VButton>
22+
23+
<ModalsContainer />
24+
</template>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /