Skip to content

Commit a43f7e0

Browse files
hunterliu1003hunterliu1003
committed
docs: add drag and resize modal example
1 parent 5cdddf3 commit a43f7e0

File tree

6 files changed

+112
-34
lines changed

6 files changed

+112
-34
lines changed

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<script setup lang="ts">
2+
import { VueFinalModal } from 'vue-final-modal'
3+
import VueDragResize from 'vue3-drag-resize'
4+
5+
const emit = defineEmits<{
6+
(e: 'update:modelValue', modelValue: boolean): void
7+
}>()
8+
9+
const width = ref(0)
10+
const height = ref(0)
11+
const top = ref(0)
12+
const left = ref(0)
13+
14+
function dragResize(newRect) {
15+
width.value = newRect.width
16+
height.value = newRect.height
17+
top.value = newRect.top
18+
left.value = newRect.left
19+
}
20+
</script>
21+
22+
<template>
23+
<VueFinalModal
24+
display-directive="show"
25+
background="interactive"
26+
:hide-overlay="true"
27+
@update:model-value="val => emit('update:modelValue', val)"
28+
>
29+
<ClientOnly>
30+
<VueDragResize
31+
:is-active="true"
32+
:w="200"
33+
:h="200"
34+
@resizing="dragResize"
35+
@dragging="dragResize"
36+
>
37+
<h3>Hello World!</h3>
38+
<p>{{ top }} х {{ left }} </p>
39+
<p>{{ width }} х {{ height }}</p>
40+
<button class="absolute top-0 right-0 mt-2 mr-2 px-2 border rounded-md " @click="emit('update:modelValue', false)">
41+
X
42+
</button>
43+
</VueDragResize>
44+
</ClientOnly>
45+
</VueFinalModal>
46+
</template>

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<script setup lang="ts">
2+
const show = ref(false)
3+
</script>
4+
5+
<template>
6+
<VButton class="p-2 border rounded" @click="show = true">
7+
Open Modal
8+
</VButton>
9+
10+
<DragResizeModal v-model="show" />
11+
</template>

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

Lines changed: 40 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -130,38 +130,47 @@ It's easy to have a condition before open or before close the modal. So it's not
130130

131131
### Delete Drag & Resize
132132

133-
To keep vue-final-modal simple and easier to maintain, I decided to remove the Drag & Resize feature. So if you are using Drag & Resize, please staying at the 3.x releases.
133+
To keep vue-final-modal simple and easier to maintain, I decided to remove the Drag & Resize feature.
134+
135+
If you are using Drag & Resize, please consider staying at the 3.x releases.
136+
137+
Here is a new drag & resize example with an awesome library `vue3-drag-resize`:
138+
::ReadMore{link="/use-cases/use-cases/drag-resize-modal"}
139+
::
134140

135141
### Renamed properties
136142

137-
| 3.x | 4.0 | Description |
138-
| ----------------- | -------- | --- |
139-
| `name` | [modalId](/api/components/vue-final-modal#modalid) | - |
140-
| `ssr` | [display-directive](/api/components/vue-final-modal#displaydirective) | - |
141-
| `attach` | [teleportTo](/api/components/vue-final-modal#teleportto) | Use `<teleport>` in Vue 3 |
142-
| `preventClick` | [background](/api/components/vue-final-modal#background) | - |
143-
| `transition` | [contentTransition](/api/components/vue-final-modal#contenttransition) | - |
143+
| 3.x | 4.0 | Description |
144+
| -------------- | ---------------------------------------------------------------------- | ------------------------- |
145+
| `name` | [modalId](/api/components/vue-final-modal#modalid) | - |
146+
| `ssr` | [display-directive](/api/components/vue-final-modal#displaydirective) | - |
147+
| `attach` | [teleportTo](/api/components/vue-final-modal#teleportto) | Use `<teleport>` in Vue 3 |
148+
| `preventClick` | [background](/api/components/vue-final-modal#background) | - |
149+
| `transition` | [contentTransition](/api/components/vue-final-modal#contenttransition) | - |
144150

145151
### Deleted properties
146152

147-
| 3.x | 4.0 |
148-
| ----------------- | -------- |
149-
| `classes` | Just use `class` |
150-
| `styles` | Just use `class` |
151-
| `focusRetain` | Merged into [focusTrap](/api/components/vue-final-modal#focustrap) |
152-
| `zIndexAuto` | Replaced by [zIndexFn](/api/components/vue-final-modal#zindexfn) |
153-
| `zIndexBase` | Replaced by [zIndexFn](/api/components/vue-final-modal#zindexfn) |
154-
| `zIndex` | Replaced by [zIndexFn](/api/components/vue-final-modal#zindexfn) |
155-
| `drag` | Not support `Drag & Resize` anymore |
156-
| `fitParent` | Not support `Drag & Resize` anymore |
157-
| `dragSelector` | Not support `Drag & Resize` anymore |
158-
| `keepChangedStyle` | Not support `Drag & Resize` anymore |
159-
| `resize` | Not support `Drag & Resize` anymore |
160-
| `resizeDirections` | Not support `Drag & Resize` anymore |
161-
| `minWidth` | Not support `Drag & Resize` anymore |
162-
| `minHeight` | Not support `Drag & Resize` anymore |
163-
| `maxWidth` | Not support `Drag & Resize` anymore |
164-
| `maxHeight` | Not support `Drag & Resize` anymore |
153+
| 3.x | 4.0 |
154+
| ------------------ | ------------------------------------------------------------------ |
155+
| `classes` | Just use `class` |
156+
| `styles` | Just use `class` |
157+
| `focusRetain` | Merged into [focusTrap](/api/components/vue-final-modal#focustrap) |
158+
| `zIndexAuto` | Replaced by [zIndexFn](/api/components/vue-final-modal#zindexfn) |
159+
| `zIndexBase` | Replaced by [zIndexFn](/api/components/vue-final-modal#zindexfn) |
160+
| `zIndex` | Replaced by [zIndexFn](/api/components/vue-final-modal#zindexfn) |
161+
| `drag` | Not support `Drag & Resize` anymore |
162+
| `fitParent` | Not support `Drag & Resize` anymore |
163+
| `dragSelector` | Not support `Drag & Resize` anymore |
164+
| `keepChangedStyle` | Not support `Drag & Resize` anymore |
165+
| `resize` | Not support `Drag & Resize` anymore |
166+
| `resizeDirections` | Not support `Drag & Resize` anymore |
167+
| `minWidth` | Not support `Drag & Resize` anymore |
168+
| `minHeight` | Not support `Drag & Resize` anymore |
169+
| `maxWidth` | Not support `Drag & Resize` anymore |
170+
| `maxHeight` | Not support `Drag & Resize` anymore |
171+
172+
::ReadMore{link="/use-cases/use-cases/drag-resize-modal"}
173+
::
165174

166175
### Renamed APIs `$vfm` to `useVfm`
167176

@@ -187,8 +196,8 @@ To keep vue-final-modal simple and easier to maintain, I decided to remove the D
187196
vfm.closeAll(...)
188197
```
189198

190-
| 3.x | 4.0 |
191-
| -------- | -------- |
192-
| `$vfm.show()` | [vfm.open()]([/api/components/vue-final-modal#modalid](http://localhost:3000/api/composables/use-vfm#functions)) |
193-
| `$vfm.hide()` | [vfm.close()]([/api/components/vue-final-modal#displaydirective](http://localhost:3000/api/composables/use-vfm#functions)) |
194-
| `$vfm.hideAll()` | [vfm.closeAll()]([/api/components/vue-final-modal#teleportto](http://localhost:3000/api/composables/use-vfm#functions)) |
199+
| 3.x | 4.0 |
200+
| ---------------- | -------------------------------------------------------------------------------------------------------------------------- |
201+
| `$vfm.show()` | [vfm.open()]([/api/components/vue-final-modal#modalid](http://localhost:3000/api/composables/use-vfm#functions)) |
202+
| `$vfm.hide()` | [vfm.close()]([/api/components/vue-final-modal#displaydirective](http://localhost:3000/api/composables/use-vfm#functions)) |
203+
| `$vfm.hideAll()` | [vfm.closeAll()]([/api/components/vue-final-modal#teleportto](http://localhost:3000/api/composables/use-vfm#functions)) |

‎packages/docs/content/4.use-cases/1.use-cases/8.drag-resize-modal.md‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,13 @@ head.title: 'Drag Resize Modal | Examples'
44

55
# Drag Resize Modal
66

7-
TBD
7+
A drag and resize modal example.
8+
9+
Here is a basic drag and resize modal example that using [vue3-drag-resize](https://github.com/kirillmurashov/vue-drag-resize/tree/vue3).
10+
11+
::code-group
12+
::code-block{label="Preview" preview}
13+
::drag-resize-modal-preview
14+
::
15+
::
16+
::

‎packages/docs/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,12 @@
1010
"postinstall": "nuxt prepare"
1111
},
1212
"dependencies": {
13-
"vue-final-modal": "workspace:4.0.0-beta.3"
13+
"vue-final-modal": "workspace:4.0.0-beta.3",
14+
"vue3-drag-resize": "^2.0.5"
1415
},
1516
"devDependencies": {
16-
"@nuxt/content": "^2.1.1",
1717
"@nuxt-themes/docus": "npm:@nuxt-themes/docus-edge@latest",
18+
"@nuxt/content": "^2.1.1",
1819
"nuxt": "3.0.0-rc.12"
1920
}
2021
}

‎pnpm-lock.yaml‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)