@darens/modal-slot v1.2.4

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

##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.