8 |
9 |
10 |
11 |
13 |
14 |
17 |
18 | 
19 |
20 |
5 |
6 | {{ top }} х {{ left }}
43 |{{ width }} х {{ height }}
44 | 47 |The content of the modal
23 |Magna deserunt nulla aliquip velit aute. Et occaecat elit nulla excepteur labore cupidatat. Duis culpa mollit commodo dolor qui Lorem qui laborum elit elit Lorem occaecat. Commodo eiusmod esse voluptate officia amet quis occaecat aliqua. Proident do irure amet ut occaecat dolor laboris consectetur.
116 | 119 |VModel: The content of the modal
20 |The content of the modal
' 98 | } 99 | }) 100 | ``` 101 | 102 | Will be re-written as this: 103 | 104 | ```ts 105 | const { open, close } = useModal({ 106 | component: ModalConfirm, 107 | attrs: { 108 | title: 'Hello World!', 109 | onConfirm() { 110 | close() 111 | }, 112 | onOpened() { 113 | console.log('modal opened') 114 | } 115 | }, 116 | slots: { 117 | default: 'The content of the modal
', 118 | }, 119 | }) 120 | open() 121 | ``` 122 | 123 | ### Removed `params` 124 | 125 | `params` is not a good practice and hard to keep type-save in Typescript. 126 | So if you are using `params`, you have to re-written it with [useModal()](/api/composables/use-modal) composable. 127 | 128 | ### Delete Drag & Resize 129 | 130 | To keep vue-final-modal simple and easier to maintain, I decided to remove the Drag & Resize feature. 131 | 132 | If you are using Drag & Resize, please consider staying at the 3.x releases. 133 | 134 | Here is a new drag & resize example with an awesome library `vue3-drag-resize`: 135 | ::ReadMore{link="/use-cases/modal-drag-resize"} 136 | :: 137 | 138 | ### Renamed properties 139 | 140 | | 3.x | 4.0 | Description | 141 | | -------------- | ---------------------------------------------------------------------- | ------------------------- | 142 | | `name` | [modalId](/api/components/vue-final-modal#modalid) | - | 143 | | `ssr` | [display-directive](/api/components/vue-final-modal#displaydirective) | - | 144 | | `attach` | [teleportTo](/api/components/vue-final-modal#teleportto) | Use `The content of the modal
' 87 | } 88 | }) 89 | ``` 90 | 91 | ::alert{type=warning} 92 | Security Note: https://vuejs.org/api/built-in-directives.html#v-html 93 | Dynamically rendering arbitrary HTML on your website can be very dangerousbecause it can easily lead to XSS attacks. Only use v-html on trusted content and never on user-provided content. 94 | :: 95 | 96 | #### with `Component` 97 | 98 | 99 | ```ts 100 | import { VueFinalModal, useModal } from 'vue-final-modal' 101 | // ModalContent is the component you want to put into the modal content 102 | import ModalContent from './ModalContent.vue' 103 | 104 | 105 | const modalInstance = useModal({ 106 | component: VueFinalModal, 107 | attrs: { ... }, 108 | slots: { 109 | // You can import your own component as a slot and put it to `slots.default` without binding props and events. 110 | default: ModalContent 111 | } 112 | }) 113 | ``` 114 | 115 | #### with `Component`, `Props` and `Events` 116 | 117 | ```ts 118 | import { VueFinalModal, useModal, useModalSlot } from 'vue-final-modal' 119 | // ModalContent is the component you want to put into the modal content 120 | import ModalContent from './ModalContent.vue' 121 | 122 | const modalInstance = useModal({ 123 | component: VueFinalModal, 124 | attrs: { ... }, 125 | slots: { 126 | default: useModalSlot({ 127 | component: ModalContent, 128 | attrs: { 129 | // Bind ModalContent props 130 | title: 'Hello world!' 131 | // Bind ModalContent events 132 | onConfirm() { } 133 | } 134 | }) 135 | } 136 | }) 137 | ``` 138 | 139 | ::alert{type=info} 140 | `useModalSlot()` is a function that provides better DX for type checking. It just returns the same object you passed in. 141 | :: 142 | 143 | ## Type Declarations 144 | 145 | ::alert{type=info} 146 | Checkout [Types section](/get-started/guide/types). 147 | :: 148 | -------------------------------------------------------------------------------- /docs/content/3.api/2.composables/2.use-vfm.md: -------------------------------------------------------------------------------- 1 | # useVfm() 2 | 3 | `useVfm()`{lang=ts} provides global state for the modal components and also provides functions that can be used to control the modal 4 | components. 5 | 6 | ## Usage 7 | 8 | ```vue 9 | 24 | ``` 25 | 26 | ## Global state 27 | 28 | - `vfm.modals`{lang=ts}: All modals including opened and closed modals. 29 | - `vfm.openedModals`{lang=ts}: All opened modals including opened `vfm.modals` and opened `vfm.dynamicModals`. 30 | - `vfm.dynamicModals`{lang=ts}: All opened dynamic modals that create by [useModal()](/api/composables/use-modal). 31 | 32 | ## Functions 33 | 34 | `vfm` instance provides some utility functions that allows you to operate a modal (see [modalId](/api/components/vue-final-modal#modalid-optional)) or modals. 35 | 36 | - `vfm.get(modalId)`{lang=ts}: Get a modal instance by given a modalId 37 | - `vfm.toggle(modalId)`{lang=ts}: Toggle a modal by given a modalId 38 | ```ts 39 | vfm.toggle(modalId).then(() => { 40 | // Do something after the modal opened or closed 41 | }) 42 | ``` 43 | - `vfm.open(modalId)`{lang=ts}: Open a modal by given a modalId 44 | ```ts 45 | vfm.open(modalId).then(() => { 46 | // Do something after the modal opened 47 | }) 48 | ``` 49 | - `vfm.close(modalId)`{lang=ts}: Close a modal by given a modalId 50 | ```ts 51 | vfm.close(modalId).then(() => { 52 | // Do something after the modal closed 53 | }) 54 | ``` 55 | - `vfm.closeAll()`{lang=ts}: Close all modals 56 | ```ts 57 | vfm.closeAll().then(() => { 58 | // Do something after all modals closed 59 | }) 60 | ``` 61 | 62 | 63 | ## Type Declarations 64 | 65 | ::ReadMore{link="/get-started/guide/types"} 66 | :: -------------------------------------------------------------------------------- /docs/content/3.api/2.composables/_dir.yml: -------------------------------------------------------------------------------- 1 | icon: heroicons-outline:switch-horizontal 2 | -------------------------------------------------------------------------------- /docs/content/3.api/_dir.yml: -------------------------------------------------------------------------------- 1 | title: 'API' 2 | icon: heroicons-outline:bookmark-alt 3 | -------------------------------------------------------------------------------- /docs/content/4.use-cases/.2.modal-transition.md: -------------------------------------------------------------------------------- 1 | --- 2 | head.title: 'Modal Transition | Examples' 3 | --- 4 | 5 | # Modal Transition 6 | 7 | TBD -------------------------------------------------------------------------------- /docs/content/4.use-cases/1.playground.md: -------------------------------------------------------------------------------- 1 | --- 2 | head.title: 'Playground | Examples' 3 | --- 4 | 5 | # Playground 6 | 7 | ::code-group 8 | ::code-block{label="Preview" preview} 9 | :playground 10 | :: 11 | 12 | ```vue [Preview.vue] 13 | 37 | 38 | 39 |Magna deserunt nulla aliquip velit aute. Et occaecat elit nulla excepteur labore cupidatat. Duis culpa mollit commodo dolor qui Lorem qui laborum elit elit Lorem occaecat. Commodo eiusmod esse voluptate officia amet quis occaecat aliqua. Proident do irure amet ut occaecat dolor laboris consectetur.
128 | 131 |The content of the modal
36 |{{ top }} х {{ left }}
89 |{{ width }} х {{ height }}
90 | 93 |