Skip to content

Commit ac1eead

Browse files
hunterliu1003hunterliu1003
committed
docs: update docs
1 parent d0323bf commit ac1eead

22 files changed

+364
-98
lines changed

‎packages/docs/components/content/BottomSheet.vue‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<script setup lang="ts">
2+
import { VBottomSheet } from 'vue-final-modal'
3+
4+
const emit = defineEmits<{
5+
(e: 'update:modelValue', modelValue: boolean): void
6+
}>()
7+
</script>
8+
9+
<template>
10+
<VBottomSheet
11+
@update:model-value="val => emit('update:modelValue', val)"
12+
>
13+
<div class="flex justify-center items-center h-60 bg-primary-100">
14+
<VButton @click="emit('update:modelValue', false)">
15+
Close
16+
</VButton>
17+
</div>
18+
</VBottomSheet>
19+
</template>

‎packages/docs/components/content/BottomSheetPreview.vue‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script setup lang="ts">
2+
import { ModalsContainer, useModal } from 'vue-final-modal'
3+
import BottomSheet from './BottomSheet.vue'
4+
5+
const { open } = useModal({
6+
component: markRaw(BottomSheet),
7+
})
8+
</script>
9+
10+
<template>
11+
<VButton @click="open">
12+
Open Modal
13+
</VButton>
14+
15+
<ModalsContainer />
16+
</template>

‎packages/docs/components/content/ConfirmModal.vue‎

Lines changed: 6 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -13,44 +13,16 @@ const emit = defineEmits<{
1313

1414
<template>
1515
<VueFinalModal
16-
class="confirm-modal"
17-
content-class="confirm-modal-content"
16+
class="flex justify-center items-center"
17+
content-class="flex flex-col p-4 bg-white dark:bg-black rounded-lg space-y-2"
1818
@update:model-value="val => emit('update:modelValue', val)"
1919
>
20-
<h1>{{ title }}</h1>
20+
<h1 class="text-xl">
21+
{{ title }}
22+
</h1>
2123
<slot />
22-
<button @click="emit('confirm')">
24+
<button class="mt-1 ml-auto px-2 border rounded-lg" @click="emit('confirm')">
2325
Confirm
2426
</button>
2527
</VueFinalModal>
2628
</template>
27-
28-
<style>
29-
.confirm-modal {
30-
display: flex;
31-
justify-content: center;
32-
align-items: center;
33-
}
34-
.confirm-modal-content {
35-
display: flex;
36-
flex-direction: column;
37-
padding: 1rem;
38-
background: #fff;
39-
border-radius: 0.5rem;
40-
}
41-
.confirm-modal-content > * + *{
42-
margin: 0.5rem 0;
43-
}
44-
.confirm-modal-content h1 {
45-
font-size: 1.375rem;
46-
}
47-
.confirm-modal-content button {
48-
margin: 0.25rem 0 0 auto;
49-
padding: 0 8px;
50-
border: 1px solid;
51-
border-radius: 0.5rem;
52-
}
53-
.dark .confirm-modal-content {
54-
background: #000;
55-
}
56-
</style>

‎packages/docs/components/content/ConfirmModalPreview.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
const show = ref(false)
33
44
function confirm() {
5-
alert('confirm')
65
show.value = false
76
}
87
</script>

‎packages/docs/components/content/FormLogin.vue‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<script setup lang="ts">
2+
import { useForm } from '@vorms/core'
3+
4+
export type FormData = {
5+
account: string
6+
password: string
7+
remember: boolean
8+
}
9+
10+
// eslint-disable-next-line vue/define-macros-order
11+
const emit = defineEmits<{
12+
(e: 'submit', formData: FormData): void
13+
}>()
14+
15+
const { register, errors, handleSubmit } = useForm({
16+
initialValues: {
17+
account: '',
18+
password: '',
19+
remember: false,
20+
},
21+
onSubmit(values) {
22+
emit('submit', values)
23+
},
24+
})
25+
26+
const { value: account, attrs: accountAttrs } = register('account', {
27+
validate(value) {
28+
if (!value)
29+
return 'account is required!'
30+
},
31+
})
32+
const { value: password, attrs: passwordAttrs } = register('password')
33+
const { value: remember, attrs: rememberAttrs } = register('remember')
34+
</script>
35+
36+
<template>
37+
<form @submit="handleSubmit">
38+
<div class="field">
39+
<input
40+
v-model="account"
41+
class="field__input"
42+
type="text"
43+
placeholder="Account"
44+
v-bind="accountAttrs"
45+
>
46+
<div v-show="'account' in errors" class="field__error">
47+
{{ errors.account }}
48+
</div>
49+
</div>
50+
<div class="field">
51+
<input
52+
v-model="password"
53+
class="field__input"
54+
type="password"
55+
placeholder="Password"
56+
v-bind="passwordAttrs"
57+
>
58+
</div>
59+
60+
<div class="field checkbox">
61+
<input
62+
id="remember"
63+
v-model="remember"
64+
class="field__checkbox"
65+
type="checkbox"
66+
v-bind="rememberAttrs"
67+
>
68+
<label for="remember">remember</label>
69+
</div>
70+
71+
<div class="field">
72+
<input type="submit" value="Submit">
73+
</div>
74+
</form>
75+
</template>
76+
77+
<style>
78+
form {
79+
background: #344951;
80+
}
81+
82+
.field + .field {
83+
margin-top: 15px;
84+
}
85+
86+
.field__input,
87+
input[type='submit'] {
88+
box-sizing: border-box;
89+
width: 100%;
90+
border-radius: 4px;
91+
border: 1px solid white;
92+
padding: 12px 16px;
93+
}
94+
95+
.field__error {
96+
color: red;
97+
margin-top: 2px;
98+
}
99+
100+
.checkbox {
101+
display: flex;
102+
align-items: center;
103+
color: white;
104+
}
105+
106+
.field__checkbox {
107+
accent-color: #41b883;
108+
}
109+
110+
.field__checkbox + label {
111+
margin-left: 4px;
112+
}
113+
114+
input[type='submit'] {
115+
background: #41b883;
116+
border: 1px solid #41b883;
117+
color: #344951;
118+
cursor: pointer;
119+
}
120+
</style>

‎packages/docs/components/content/FormModal.vue‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<script setup lang="ts">
2+
import { VueFinalModal } from 'vue-final-modal'
3+
import type { FormData } from './FormLogin.vue'
4+
import FormLogin from './FormLogin.vue'
5+
6+
const emit = defineEmits<{
7+
(e: 'update:modelValue', modelValue: boolean): void
8+
(e: 'submit', formData: FormData): void
9+
}>()
10+
</script>
11+
12+
<template>
13+
<VueFinalModal
14+
class="flex justify-center items-center"
15+
content-style="background: #344951;"
16+
content-class="p-4 rounded-lg"
17+
@update:model-value="val => emit('update:modelValue', val)"
18+
>
19+
<div class="flex justify-between items-center mb-4 text-2xl text-white">
20+
<h1>Login</h1>
21+
<button>x</button>
22+
</div>
23+
<FormLogin @submit="formData => emit('submit', formData)" />
24+
</VueFinalModal>
25+
</template>

‎packages/docs/components/content/FormModalPreview.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 { ModalsContainer, useModal } from 'vue-final-modal'
3+
import FormModal from './FormModal.vue'
4+
5+
const { open, close } = useModal<InstanceType<typeof FormModal>['$props']>({
6+
component: markRaw(FormModal),
7+
attrs: {
8+
onSubmit(formData) {
9+
alert(JSON.stringify(formData, null, 2))
10+
close()
11+
},
12+
},
13+
})
14+
</script>
15+
16+
<template>
17+
<VButton @click="open">
18+
Open Modal
19+
</VButton>
20+
21+
<ModalsContainer />
22+
</template>

‎packages/docs/components/content/FullScreen.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script setup lang="ts">
2+
import { VFullScreen } from 'vue-final-modal'
3+
4+
const emit = defineEmits<{
5+
(e: 'update:modelValue', modelValue: boolean): void
6+
}>()
7+
</script>
8+
9+
<template>
10+
<VFullScreen
11+
full-screen-class="bg-primary-50"
12+
@update:model-value="val => emit('update:modelValue', val)"
13+
>
14+
<h1 class="text-primary text-lg">
15+
Full Screen Modal
16+
</h1>
17+
<VButton @click="emit('update:modelValue', false)">
18+
Close
19+
</VButton>
20+
</VFullScreen>
21+
</template>

‎packages/docs/components/content/FullScreenPreview.vue‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script setup lang="ts">
2+
import { ModalsContainer, useModal } from 'vue-final-modal'
3+
import FullScreen from './FullScreen.vue'
4+
5+
const { open } = useModal({
6+
component: markRaw(FullScreen),
7+
})
8+
</script>
9+
10+
<template>
11+
<VButton @click="open">
12+
Open Modal
13+
</VButton>
14+
15+
<ModalsContainer />
16+
</template>

‎packages/docs/components/content/ModalIdPreview.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ const vfm = useVfm()
55
const modalId = Symbol('modalId')
66
77
function confirm() {
8-
alert('confirm')
98
vfm.close(modalId)
109
}
1110
</script>

0 commit comments

Comments
 (0)