Skip to content

Commit 4f185d0

Browse files
hunterliu1003hunterliu1003
committed
docs: give up code block file
1 parent 04cbd50 commit 4f185d0

File tree

11 files changed

+739
-107
lines changed

11 files changed

+739
-107
lines changed

‎docs/components/content/ModalIdPreview.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ function confirm() {
1111

1212
<template>
1313
<VButton @click="() => vfm.open(modalId)">
14-
Open Modal by modalId
14+
Open Modal
1515
</VButton>
1616

1717
<ConfirmModal

‎docs/components/content/UseModalPreview.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const { open, close } = useModal({
1818

1919
<template>
2020
<VButton @click="() => open()">
21-
Open Modal by useModal()
21+
Open Modal
2222
</VButton>
2323

2424
<ModalsContainer />

‎docs/components/content/VModelPreview.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ function confirm() {
88

99
<template>
1010
<VButton @click="show = true">
11-
Open Modal by v-model
11+
Open Modal
1212
</VButton>
1313

1414
<ConfirmModal

‎docs/content/2.get-started/1.guide/2.setup.md‎

Lines changed: 223 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,8 @@ export default defineNuxtConfig({
7373

7474
You don't need to do add anything else to the `<ModalsContainer>`{lang=ts}, as long as you include it in your Vue tree, you can use Dynamic modals.
7575

76+
You only need to put it **once** in your Vue app.
77+
7678
### Vue 3
7779

7880
```vue [App.vue]
@@ -114,17 +116,96 @@ Use plain CSS to define a `<PlainCssConfirmModal>`{lang=ts} component with `<Vue
114116

115117
- Basic example
116118
::code-group
117-
::code-block{label="PlainCssConfirmModal.vue"}
118-
<!-- :code-block-file{path="./PlainCssConfirmModal.vue" language="vue"} -->
119-
::
120-
121-
::code-block{label="Preview.vue"}
122-
:code-block-file{path="./PlainCssConfirmModalPreview.vue" language="vue"}
123-
::
124-
125119
::code-block{label="Preview" preview}
126120
::plain-css-confirm-modal-preview
127121
::
122+
123+
```vue [Preview.vue]
124+
<script setup lang="ts">
125+
import { ModalsContainer, useModal } from 'vue-final-modal'
126+
import PlainCssConfirmModal from './PlainCssConfirmModal.vue'
127+
128+
const { open, close } = useModal({
129+
component: PlainCssConfirmModal,
130+
attrs: {
131+
title: 'Hello World!',
132+
onConfirm() {
133+
close()
134+
},
135+
},
136+
slots: {
137+
default: '<p>The content of the modal</p>',
138+
},
139+
})
140+
</script>
141+
142+
<template>
143+
<VButton @click="open">
144+
Open Modal
145+
</VButton>
146+
147+
<ModalsContainer />
148+
</template>
149+
```
150+
151+
```vue [PlainCssConfirmModal.vue]
152+
<script setup lang="ts">
153+
import { VueFinalModal } from 'vue-final-modal'
154+
155+
defineProps<{
156+
title?: string
157+
}>()
158+
159+
const emit = defineEmits<{
160+
(e: 'update:modelValue', modelValue: boolean): void
161+
(e: 'confirm'): void
162+
}>()
163+
</script>
164+
165+
<template>
166+
<VueFinalModal
167+
class="confirm-modal"
168+
content-class="confirm-modal-content"
169+
@update:model-value="val => emit('update:modelValue', val)"
170+
>
171+
<h1>{{ title }}</h1>
172+
<slot />
173+
<button @click="emit('confirm')">
174+
Confirm
175+
</button>
176+
</VueFinalModal>
177+
</template>
178+
179+
<style>
180+
.confirm-modal {
181+
display: flex;
182+
justify-content: center;
183+
align-items: center;
184+
}
185+
.confirm-modal-content {
186+
display: flex;
187+
flex-direction: column;
188+
padding: 1rem;
189+
background: #fff;
190+
border-radius: 0.5rem;
191+
}
192+
.confirm-modal-content > * + *{
193+
margin: 0.5rem 0;
194+
}
195+
.confirm-modal-content h1 {
196+
font-size: 1.375rem;
197+
}
198+
.confirm-modal-content button {
199+
margin: 0.25rem 0 0 auto;
200+
padding: 0 8px;
201+
border: 1px solid;
202+
border-radius: 0.5rem;
203+
}
204+
.dark .confirm-modal-content {
205+
background: #000;
206+
}
207+
</style>
208+
```
128209
::
129210
130211
### Atomic CSS (Recommended)
@@ -138,17 +219,64 @@ Let's take TailwindCSS for example to define a `<ConfirmModal>`{lang=ts} compone
138219
- Basic example
139220
140221
::code-group
141-
::code-block{label="ConfirmModal.vue"}
142-
:code-block-file{path="./ConfirmModal.vue" language="vue"}
143-
::
144-
145-
::code-block{label="Preview.vue"}
146-
:code-block-file{path="./ConfirmModalPreview.vue" language="vue"}
147-
::
148-
149222
::code-block{label="Preview" preview}
150223
::confirm-modal-preview
151224
::
225+
226+
```vue [Preview.vue]
227+
<script setup lang="ts">
228+
const show = ref(false)
229+
230+
function confirm() {
231+
show.value = false
232+
}
233+
</script>
234+
235+
<template>
236+
<VButton @click="show = true">
237+
Open Modal
238+
</VButton>
239+
240+
<ConfirmModal
241+
v-model="show"
242+
title="Hello World!"
243+
@confirm="() => confirm()"
244+
>
245+
<p>The content of the modal</p>
246+
</ConfirmModal>
247+
</template>
248+
```
249+
250+
```vue [ConfirmModal.vue]
251+
<script setup lang="ts">
252+
import { VueFinalModal } from 'vue-final-modal'
253+
254+
defineProps<{
255+
title?: string
256+
}>()
257+
258+
const emit = defineEmits<{
259+
(e: 'update:modelValue', modelValue: boolean): void
260+
(e: 'confirm'): void
261+
}>()
262+
</script>
263+
264+
<template>
265+
<VueFinalModal
266+
class="flex justify-center items-center"
267+
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"
268+
@update:model-value="val => emit('update:modelValue', val)"
269+
>
270+
<h1 class="text-xl">
271+
{{ title }}
272+
</h1>
273+
<slot />
274+
<button class="mt-1 ml-auto px-2 border rounded-lg" @click="emit('confirm')">
275+
Confirm
276+
</button>
277+
</VueFinalModal>
278+
</template>
279+
```
152280
::
153281
154282
## Control a modal
@@ -165,13 +293,37 @@ As a requirement to using `useModal()`{lang=ts} you must add [\<ModalsContainer>
165293
166294
- Basic example
167295
::code-group
168-
::code-block{label="Preview.vue"}
169-
:code-block-file{path="./UseModalPreview.vue" language="vue"}
170-
::
171-
172296
::code-block{label="Preview" preview}
173297
::use-modal-preview
174298
::
299+
300+
```vue [Preview.vue]
301+
<script setup lang="ts">
302+
import { ModalsContainer, useModal } from 'vue-final-modal'
303+
import ConfirmModal from './ConfirmModal.vue'
304+
305+
const { open, close } = useModal({
306+
component: ConfirmModal,
307+
attrs: {
308+
title: 'Hello World!',
309+
onConfirm() {
310+
close()
311+
},
312+
},
313+
slots: {
314+
default: '<p>UseModal: The content of the modal</p>',
315+
},
316+
})
317+
</script>
318+
319+
<template>
320+
<VButton @click="() => open()">
321+
Open Modal
322+
</VButton>
323+
324+
<ModalsContainer />
325+
</template>
326+
```
175327
::
176328
177329
::ReadMore{link="/api/composables/use-modal"}
@@ -183,13 +335,33 @@ Use `v-model` for show/hide a modal.
183335
184336
- Basic example
185337
::code-group
186-
::code-block{label="Preview.vue"}
187-
:code-block-file{path="./VModelPreview.vue" language="vue"}
188-
::
189-
190338
::code-block{label="Preview" preview}
191339
::v-model-preview
192340
::
341+
342+
```vue [Preview.vue]
343+
<script setup lang="ts">
344+
const show = ref(false)
345+
346+
function confirm() {
347+
show.value = false
348+
}
349+
</script>
350+
351+
<template>
352+
<VButton @click="show = true">
353+
Open Modal
354+
</VButton>
355+
356+
<ConfirmModal
357+
v-model="show"
358+
title="Hello World!"
359+
@confirm="() => confirm()"
360+
>
361+
<p>VModel: The content of the modal</p>
362+
</ConfirmModal>
363+
</template>
364+
```
193365
::
194366
195367
### modalId
@@ -198,13 +370,36 @@ Use `v-model` for show/hide a modal.
198370
199371
- Basic example
200372
::code-group
201-
::code-block{label="Preview.vue"}
202-
:code-block-file{path="./ModalIdPreview.vue" language="vue"}
203-
::
204-
205373
::code-block{label="Preview" preview}
206374
::modal-id-preview
207375
::
376+
377+
```vue [Preview.vue]
378+
<script setup lang="ts">
379+
import { useVfm } from 'vue-final-modal'
380+
381+
const vfm = useVfm()
382+
const modalId = Symbol('modalId')
383+
384+
function confirm() {
385+
vfm.close(modalId)
386+
}
387+
</script>
388+
389+
<template>
390+
<VButton @click="() => vfm.open(modalId)">
391+
Open Modal
392+
</VButton>
393+
394+
<ConfirmModal
395+
:modal-id="modalId"
396+
title="Hello World!"
397+
@confirm="() => confirm()"
398+
>
399+
<p>The content of the modal</p>
400+
</ConfirmModal>
401+
</template>
402+
```
208403
::
209404
210405
::ReadMore{link="/api/components/vue-final-modal"}

0 commit comments

Comments
 (0)