-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
10 changed files
with
167 additions
and
66 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| <template> | ||
| <div class="mt-3"> | ||
| <div class="row mb-3"> | ||
| <div class="col"> | ||
| <button type="button" class="btn btn-primary" @click="$modal.show('myModal')">Open a modal</button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <ClientOnly> | ||
| <Modal name="myModal" title="My first modal"> | ||
| <p>Modal content goes here...</p> | ||
| </Modal> | ||
| </ClientOnly> | ||
| </div> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,34 @@ | ||
| ## Basic | ||
|
|
||
| Download the repo, extract ```vue-modal.umd.js``` and ```vue-modal.css``` out of the ```dist``` folder | ||
| Download the repo, extract `vue-modal.umd.js` and `vue-modal.css` out of the `dist` folder | ||
| and insert them in your page. | ||
|
|
||
| ``` html | ||
| ```html | ||
| <script type="text/javascript" src="vue-modal.umd.js"></script> | ||
| ``` | ||
|
|
||
| ``` html | ||
| <link rel="stylesheet" href="vue-modal.css"> | ||
| ```html | ||
| <link rel="stylesheet" href="vue-modal.css" /> | ||
| ``` | ||
|
|
||
| ## Module System | ||
|
|
||
| Install it via npm | ||
|
|
||
| ``` | ||
| npm i @kouts/vue-modal@next --save | ||
| ``` | ||
| Use the ```import``` statement to include it into your js | ||
| ``` js | ||
| import VueModal from '@kouts/vue-modal' | ||
|
|
||
| Use the `import` statement to include it into your `main.js` file. | ||
| You may also choose to register `vue-modal` globally, so that you don't need to import it in every component. | ||
|
|
||
| ```js | ||
| import { createApp } from 'vue' | ||
| import { Modal } from '@kouts/vue-modal' | ||
| import '@kouts/vue-modal/dist/vue-modal.css' | ||
| ``` | ||
|
|
||
| const app = Vue.createApp({...}) | ||
|
|
||
| // This is optional | ||
| app.component('Modal', Modal) | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,53 +1,105 @@ | ||
| ## Register | ||
| Register ```vue-modal``` in your application globbaly | ||
| ``` js | ||
| const app = Vue.createApp({...}) | ||
| # Usage | ||
|
|
||
| There are two ways in which you can control `vue-modal`'s visibility: | ||
|
|
||
| 1. With `v-model` directive | ||
| 2. Using a `name` prop and `show`/`hide` functions | ||
|
|
||
| ## Usage with `v-model` directive | ||
|
|
||
| To control the visibility of the modal with `v-model`, you need to pass a `Boolean` value to the `v-model` directive. | ||
|
|
||
| ```vue | ||
| <template> | ||
| <!-- Setting `showModal` to true, displays the modal --> | ||
| <button type="button" @click="showModal = true">Open a modal</button> | ||
| <Modal v-model="showModal" title="My first modal"> | ||
| <p>Modal content goes here...</p> | ||
| </Modal> | ||
| </template> | ||
| <script> | ||
| // You can skip the import if you've registered the component globally | ||
| import { Modal } from '@kouts/vue-modal' | ||
| app.component('Modal', VueModal) | ||
| ``` | ||
| or locally | ||
| ``` js | ||
| export default { | ||
| components: { | ||
| 'Modal': VueModal | ||
| Modal | ||
| }, | ||
| data() { | ||
| return { | ||
| showModal: false | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
| ``` | ||
| ## Use | ||
| ### Template | ||
| with `v-model` | ||
| ``` vue | ||
| <button type="button" class="btn btn-primary" @click="showModal=true"> | ||
| Open a modal | ||
| </button> | ||
| <Modal v-model="showModal" title="My first modal"> | ||
| <p>Modal content goes here...</p> | ||
| </Modal> | ||
|
|
||
| **Example:** | ||
|
|
||
| <Example1 /> | ||
|
|
||
| ## Usage with `name` prop and `show`/`hide` functions | ||
|
|
||
| `vue-modal` comes with a `modalPlugin` that you need to import and register, | ||
| in order to be able to use `vue-modal` with a `name` prop. | ||
|
|
||
| ```js | ||
| import { createApp } from 'vue' | ||
| import { modalPlugin } from '@kouts/vue-modal' | ||
|
|
||
| const app = Vue.createApp({...}) | ||
|
|
||
| app.use(modalPlugin) | ||
| ``` | ||
| or | ||
| with `modelValue` value and `update:modelValue` event | ||
| ``` vue | ||
| <Modal :model-value="showModal" title="My first modal" @update:modelValue="showModal = false"> | ||
| <p>Modal content goes here...</p> | ||
| </Modal> | ||
|
|
||
| To control the visibility of the modal with the mane `prop` you use the and `show`/`hide` functions. | ||
|
|
||
| **Composition API** | ||
|
|
||
| ```vue | ||
| <template> | ||
| <!-- Use the `show` function to display the modal --> | ||
| <button type="button" @click="show('myModal')">Open a modal</button> | ||
| <Modal name="myModal" title="My first modal"> | ||
| <p>Modal content goes here...</p> | ||
| </Modal> | ||
| </template> | ||
| <script setup> | ||
| // You can skip the import if you've registered the component globally | ||
| import { Modal, useModal } from '@kouts/vue-modal' | ||
| const { show } = useModal() | ||
| </script> | ||
| ``` | ||
|
|
||
| **Options API** | ||
|
|
||
| ### Script | ||
| ``` js | ||
| import VueModal from '@kouts/vue-modal' | ||
| ```vue | ||
| <template> | ||
| <!-- Use the `$modal.show` function to display the modal --> | ||
| <button type="button" @click="$modal.show('myModal')">Open a modal</button> | ||
| <Modal name="myModal" title="My first modal"> | ||
| <p>Modal content goes here...</p> | ||
| </Modal> | ||
| </template> | ||
| <script> | ||
| // You can skip the import if you've registered the component globally | ||
| import { Modal } from '@kouts/vue-modal' | ||
| export default { | ||
| components: { | ||
| 'Modal': VueModal | ||
| }, | ||
| data() { | ||
| return { | ||
| showModal: false | ||
| } | ||
| Modal | ||
| } | ||
| } | ||
| </script> | ||
| ``` | ||
| ### Result | ||
| <Example1 /> | ||
|
|
||
| **Example:** | ||
|
|
||
| <Example2 /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters