Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/schnapsterdog/flexi-modal
Vue.js Plugin Modal
https://github.com/schnapsterdog/flexi-modal
Last synced: 8 days ago
JSON representation
Vue.js Plugin Modal
- Host: GitHub
- URL: https://github.com/schnapsterdog/flexi-modal
- Owner: SchnapsterDog
- License: mit
- Created: 2019-08-29T23:58:54.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-04T09:31:35.000Z (almost 2 years ago)
- Last Synced: 2024-11-07T08:44:00.518Z (11 days ago)
- Language: Vue
- Size: 214 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[[Flexi Modal]](https://akrinum.com)
[](https://github.com/SchnapsterDog/flexi-modal/pulls)
[](https://www.npmjs.com/package/flexi-modal)
[](https://www.npmjs.com/package/flexi-modal)
Welcome to [version 0.2.5]() of **Flexi Modal**, an easy to implement, and well maintained **Vue.js** plugin.
You can support this project by giving it a star, or following the author. :heart:.
## :exclamation::exclamation::exclamation: This is README for FlexiModal component :exclamation::exclamation::exclamation:
Flexi Modal vue plugin made by [Oliver](https://akrinum.com)
## ⚙ Installation
- npm install flexi-modal --save
## 🤔 How to use it?
### Module usage
```js
import FlexiModal from 'flexi-modal';
export default {
name: 'someComponent',
components: { FlexiModal }
```
Once installed, it can be used in every Vue component easy.
```html
Open Modal
```
1. Name property is mandatory. Without providing it, the component will not work.
2. warningMessage, checkBoxesAllowed and checkBoxes is available only for Error Modal(See MODAL TYPE)
## Modal Type
There are two type of modal that could be use, Error and Confirm Modal.
Default value "false", that mean Error Modal. Confirm modal doesnt
support checkboxes and its validation.
```html
```
Enabling of checkboxes (optional) // default option false
```html
```
```js
data: () {
return {
checkBoxes: [
{ text: 'Remove all trade history related information', confirmed: false },
{ text: 'Remove stock exchanges database', confirmed: false }
]
}
}
```
## Event Listeners
Listen for 'is-valid' event which returns true if all checkboxes are marked
```js
methods: {
isValid(valid) {
valid ? alert('Action Confirmed') : alert('Please Mark the checkboxes in order to proceed the request');
}
}
```
## API
### ❔ Props & events
```
| Name | Type | Mandatory | Description
| :----- | :------- | :-------- |-------------------------------
| name | String | Yes | This prop is mandatory. Give string name to your modal and invoke it.
| modalType | Boolean | Yes | true/false. Set true for Confirm and false for Error Modal.
| headerMessage | String | No | Set message on the Header of the Modal.
| warningMessage | String | No | This option is only available for modalType=false (ErrorModal)
| confirmButtonMessage | String | No | Set ConfirmButton title
| declineButtonMessage | String | No | Set DeclineButton title
| checkBoxesAllowed | Boolean | No | true/false. This options is only available for modalType=false (ErrorModal).
| checkBoxes | Array | No | Set array of checkboxes options that will be loop inside component. avl only if checkBoxedAllowed is true.
| is-valid | Event | / | Listen for event. Return true if confirmButton is clicked and/or all checkBoxes are marked for modalType=false
```
## License
[MIT](http://opensource.org/licenses/MIT)