@darens/modal-slot

Modal-Slot for VUE

Introduction

This library was made in order to create manners in an easier way using v-model.

What you are looking for with this library is to choose a kind of template for a modal that with only a few props of vue we can generate a great modal, as well as it is divided by versions since if you do not want to download the whole library if not only You want the basic modal-slot, you download a specific version and you can also choose to download the newer versions that will contain more structured modals.

Install

NPM:

npm install --save @darens/modal-slot

How to use

There are two ways to use the modal slot:

General component

Declaring as a general component in the index.js or .ts file of our vue project as follows:

import Vue from 'vue'
import App from './App.vue'
import '@darens/modal-slot/dist/modal-slot.css';
import ModalSlot from '@darens/modal-slot';

Vue.config.productionTip = false;

Vue.use(ModalSlot);

new Vue({
  render: h => h(App),
}).$mount('#app')

And we would use it anywhere in our project, as follows:

<template>
  <div id="app">
    Contact us
    <section>
      <modal-slot v-model="showModal">
        Hello word
      </modal-slot>
    </section>
  </div>
</template>

<script>
export default {
  name: 'app',
  data(){
    return{
      showModal: false,
    }
  }
}
</script>

Direct import

Directly importing the component where we want to use it, as follows:

<template>
  <div id="app">
    Contact us
    <section>
      <modal-slot v-model="showModal">
        Hello word
      </modal-slot>
    </section>
  </div>
</template>

<script>
import '@darens/modal-slot/dist/modal-slot.css';
import { ModalSlot } from '@darens/modal-slot';

export default {
  name: 'app',
  data(){
    return{
      showModal: false,
    }
  },
  components: {
    ModalSlot
  }
}
</script>

Slots

Content:

To modify the body, simply write code inside the tags:

<template>
  <modal-slot v-model="showModal">
   Hello word
  </modal-slot>
</template>

Header:

If you want to get a better customization of the modal header, you can use the slot-header in the following way.

<template>
 <modal-slot v-model="showModal">
   <div slot="header">
     hello word
   </div>
 </modal-slot>
</template>

Footer:

To modify the footer of the modal is done as follows:

<template>
 <modal-slot v-model="showModal">
   <div slot="footer">
     Actions
   </div>
 </modal-slot>
</template>

Props

Name	Type	Required	Default	Description
v-model	Boolean	---	false	Used to open and close the modal.
width	String	---	'md'	Accepted values: xs, sm, md, lg, xl.
position	String	---	'center center'	Accepted values: top, right, bottom, left.
card_class	String	---	''	Css classes that are directed to the modal card.
title	String	---	'Modal title'	Used to modify the title of the default header.
no_header	Boolean	---	false	Hide the header of the modal.
no_footer	Boolean	---	false	Hide the footer of the modal.
no_layout	Boolean	---	false	Hide the header and footer of the modal.
maximized	Boolean	---	false	Convert the modal to a full screen.
persistent	Boolean	---	false	The modal cannot be closed from anywhere, only from a button assigned to close it.
full_width	Boolean	---	false	Maximizes the width of the modal as much as possible.
full_height	Boolean	---	false	Maximizes the height of the modal as much as possible.
layout_fixed	Boolean	---	false	The header and footer of the modal will be fixed inside the modal and only the body will be scrolleable.
transition	String	---	'modal'	Accepted values: fade, modal. Input and output animation for the modal, if you want a different animation you can choose to create your animation in css and then send the class through this prop.
no_mask	Boolean	---	false	It takes care of hiding the default rgba background of the modal.
bg_card	String	---	''	Background color of the modal card, can be sent in hexadecimal or rgba
bg_mask	String	---	''	Modal background color, can be sent in hexadecimal or rgba
time_out	[String, Number]	---	'0'	Waiting time before closing the modal, it is sent in milliseconds
icon	Object	---	{}	The following prop is used to place an icon next to the title in the header. Any material desing icon can be used and this icon can be styled with the camelcase principle. Example:{name: 'face', style: {color: 'red', fontSize: '24px'}}

##Types modals

Modal Verify

It is a very common type of modal, used for verifications such as, for example, when a product is going to be eliminated in an application that contains inventory, it is necessary that a specific alert is output so that the user is aware of the product that he is eliminating and thus avoid that a product that we do not want is eliminated.

Now for the operation of this type of modal, the following must be taken into account:

This type of modal receives certain props and emits unique ones.

• no_persistent: The modal-verify by default is of a persistent type and many times it is not necessary that it be this way, so if you want to change this, you just have to send this prop to true.

• jsonData: This prop is used to change certain things within the modal and is constituted in the following way:

  jsonData = {
    dataEmit: false
    title: 'Alerta',
    icon: {
      name: 'report_problem',
      style:{
        color: 'red'
      }
    },
  }

It is important to note that if this prop is not sent, it will have the aforementioned values ​​by default, so you do not have to worry if you do not want to change any of them.

• @acepted: Inside this modal there is an accept button which throws that emit, here any necessary function can be performed and as if that were not enough, it also sends the "dataEmit" that was established in the "jsonData" as the first parameter.

In addition to this, the modal has two slots which are:

Content:

To modify the body, simply write code inside the tags:

<template>
  <modal-verify v-model="showModal">
    Validating my actions
  </modal-verify>
</template>

Footer:

To modify the footer of the modal is done as follows:

<template>
 <modal-verify v-model="showModal">
   <div slot="footer">
     Actions
   </div>
 </modal-verify>
</template>

Creator

• Created by Andres Rodrigues (@darens), 18/08/2020.