Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dillonchanis/vue-cute-modal
A simple and easy to use Modal component for Vue applications.
https://github.com/dillonchanis/vue-cute-modal
modal vue vue2
Last synced: 3 days ago
JSON representation
A simple and easy to use Modal component for Vue applications.
- Host: GitHub
- URL: https://github.com/dillonchanis/vue-cute-modal
- Owner: dillonchanis
- License: mit
- Created: 2018-02-14T01:14:23.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-03-15T13:29:09.000Z (over 6 years ago)
- Last Synced: 2024-04-11T17:10:41.540Z (6 months ago)
- Topics: modal, vue, vue2
- Language: JavaScript
- Homepage:
- Size: 178 KB
- Stars: 7
- Watchers: 2
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# vue-cute-modal
[](https://www.npmjs.com/package/vue-cute-modal)
A simple and easy to use Modal component for Vue applications.
## Features
- Simple API
- Customizable modal classes
- Customizable Vue transition name
- Name component whatever you like!
## Install
```bash
npm i vue-cute-modal
yarn add vue-cute-modal
```
For In-DOM templates include the JS CDN and optionally the CSS in your project:
**CDN:**
[JS](https://unpkg.com/[email protected]/dist/vue-cute-modal.min.js)
[CSS](https://unpkg.com/[email protected]/dist/vue-cute-modal.min.css)
## Usage
[](https://codesandbox.io/s/rw58r1w0v4)
### Setup
Include the plugin at the root of your application
```javascript
import CuteModal from 'vue-cute-modal'
Vue.use(CuteModal)
```
### Creating a Modal
Simply create your modal in your Vue app:
```html
Your modal content.
```
Then open/hide the modal within the app:
```javascript
// Opens the modal
this.$cuteModal.open('example')
// Hides the modal
this.$cuteModal.hide('example')
```
### Basic Example
```html
Open Modal
Hello World!
export default {
methods: {
open () {
this.$cuteModal.open('hello')
}
}
}
/* ... */
```
### Customizing the Component
The plugin comes with some base styles and classes. These may not fit your project and you may wish to override. We can do this via global settings or props.
To override defaults globally pass in the configuration object when you register the component to `Vue.use()`:
```javascript
/** Default Settings */
const DEFAULT_OPTIONS = {
body: 'cute-modal__body',
container: 'cute-modal__container',
footer: 'cute-modal__footer',
header: 'cute-modal__header',
height: 'auto',
overlay: 'cute-modal__overlay',
transition: 'modal',
width: '600px',
onOpen: null, // available in 1.1
onClose: null // available in 1.1
}
Vue.use(CuteModal, {
// Override the component's name to match your app's
// Default 'cute-modal' =
component: '',
// Override the component's base classes to match your app's
body: '',
container: '',
footer: '',
header: '',
overlay: ''
// Set default width and heights for all your modals
height: '',
width: '',
// Set the transition name to use custom Vue transitions
// This will be set as the transition's name
transition: '',
// Setup callbacks to be executed globally when Modal is closed/opened.
onClose: () => {
// ...
},
onOpen: () => {
// ...
}
})
```
Alternatively, you could pass props separately to each component. **Note that these will override the globally set options**.
```html
```
## API
### Props
Full prop list
| Name | Required | Type | Description |
| --- | --- | --- | --- |
| name | true | String | Name of your modal
| containerClass | false | String | Class name for container of modal
| footerClass | false | String | Modal footer class name
| headerClass | false | String | Modal header class name
| height | false | String | Set the height of the modal
| overlayClass | false | String | Overlay class name
| transition | false | String | Name for Vue transition
| wdith | false | String | Set the width of the modal
### Methods
```javascript
// Open a Modal
this.$cuteModal.open(/* modal name */)
// Close a Modal
this.$cuteModal.hide(/* modal name */)
```
### 1.1 Updates
In 1.1 a built in hide method is made available within the header and footer slots. It will be available on the `slot-scope` as a method named `$hide`. It takes no parameters.
```html
Some content
Hide Me
```
Futhermore, in 1.1 you can globally set a callback function to be ran when a modal is opened or closed using the `onOpen` and `onClose` keys on your configuration object.
```javascript
Vue.use({
onClose: () => {
document.body.style.overflow = 'auto'
},
onOpen: () => {
document.body.style.overflow = 'hidden'
}
})
```
## Development Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# run unit tests
npm run unit
# run all tests
npm test
```