Vuejs-Modaltor: vue-modaltor - most advance configurable modal component for vuejs

vue-modaltor

Changelog

All notable changes to this project will be documented in this file.

vue modal component for vuejs and i hope it be useful for everyone ...

you can see example usages here Demo or

see Edit Vue Template

Features

  • no need to handle modal's height manually it extends as the content of modal increases .
  • manage modal's size on diffrent dimenstions with one single attribute see responsive
  • scrollable modal, modal will get scroll if conntent is more than current view page height see close-scroll
  • modals has multiple parent animations parent-animation
  • edit icon close svg or icon font parent-animation
  • hide icon close parent-animation

Installation

npm install vue-modaltor --save
yarn add vue-modaltor

then you can import modaltor like this ...

import Vue from "vue";
import VueModalTor from "vue-modaltor";
Vue.use(VueModalTor);

if you are not using any build system you can include it in your project

<script src="/vue-modaltor/dist/vue-modaltor.js"></script>

Example

<vue-modaltor :visible="open" @hide="hideModal">
  <template slot="close-icon">
    <svg
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 40 40"
      width="20"
      height="20"
      xml:space="preserve"
    >
      <path
        class="st0"
        fill="#41b883"
        d="M8.7,7.6c-0.4-0.4-1-0.4-1.4,0C6.9,8,6.9,8.6,7.3,9l11,11l-11,11c-0.4,0.4-0.4,1,0,1.4c0.4,0.4,1,0.4,1.4,0 l11-11l11,11c0.4,0.4,1,0.4,1.4,0c0.4-0.4,0.4-1,0-1.4l-11-11L32,9c0.4-0.4,0.4-1,0-1.4c-0.4-0.4-1-0.4-1.4,0l-11,11L8.7,7.6z"
      />
    </svg>
  </template>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</vue-modaltor>
<button @click="open=true">modal-basic</button>
var app = new Vue({
  el: "#app",
  data: {
    open: false
  },
  methods: {
    hideModal() {
      this.open = false;
    }
  }
});

Props config

props: {
   // this is for toggle show modal
   // :visible:false
    visible: {
      type: Boolean,
      required: false,
      default: false
    },
    // this is for responsive modal and
    // :resize-width='{1200:"50%",992:"70%",768:"90%"}'
    resizeWidth:{
      type:Object,
    },
    // this is for anaimating modal
    // :animation-panel='modal-slide-right'
    // :animation-panel='modal-slide-left'
    // :animation-panel='modal-slide-top'
    // :animation-panel='modal-slide-bottom'
    animationPanel:{
      type: String,
      required: false,
      default: 'modal-fade'
    },
    // this is for anaimating animationParent modal
    // :animation-parent='modal-scale'
    animationParent:{
      type: String,
      required: false,
      default: 'modal-fade'
    },
    // this is for bgcolor overlay
    bgOverlay:{
      type: String,
      required: false,
      default: '#fff'
    },
    // this is for bgcolor panel
    bgPanel:{
      type: String,
      required: false,
      default: '#fff'
    },
    //set default width modal
    // :default-width="'50%'"
    // :default-width="'495px'"
    // :default-width="'40em'"
    defaultWidth:{
      type: String,
      required: false,
      default: '50%'
    },
    // this is option for close scroll body when show modal
    // :close-scroll="false"  // if true close scroll body
    closeScroll:{
      type: Boolean,
      required: false,
      default: true
    },
    // this is option for showing/hiding close button on modal
    // :show-close-button="false"  // if true close button will show
    showCloseButton:{
      type: Boolean,
      required: false,
      default: true
    },
    // this is option for space in content slot
    // u can castumize this
     zeroSpace: {
      type: Boolean,
      required: false,
      default: false
    }
  },

TODO List

  • multiple animations on diffrent device size
  • 3D Animations

Comments

  • Bump follow-redirects from 1.14.1 to 1.14.7
    Bump follow-redirects from 1.14.1 to 1.14.7

    Jan 15, 2022

    Bumps follow-redirects from 1.14.1 to 1.14.7.

    Commits
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • 2ad9e82 Carry over Host header on relative redirects (#172)
    • 77e2a58 Release version 1.14.4 of the npm package.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump y18n from 3.2.1 to 3.2.2
    Bump y18n from 3.2.1 to 3.2.2

    Mar 29, 2021

    Bumps y18n from 3.2.1 to 3.2.2.

    Commits
    Maintainer changes

    This version was pushed to npm by oss-bot, a new releaser for y18n since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump url-parse from 1.4.7 to 1.5.1
    Bump url-parse from 1.4.7 to 1.5.1

    May 6, 2021

    Bumps url-parse from 1.4.7 to 1.5.1.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump lodash from 4.17.15 to 4.17.21
    Bump lodash from 4.17.15 to 4.17.21

    May 14, 2021

    Bumps lodash from 4.17.15 to 4.17.21.

    Commits
    • f299b52 Bump to v4.17.21
    • c4847eb Improve performance of toNumber, trim and trimEnd on large input strings
    • 3469357 Prevent command injection through _.template's variable option
    • ded9bc6 Bump to v4.17.20.
    • 63150ef Documentation fixes.
    • 00f0f62 test.js: Remove trailing comma.
    • 846e434 Temporarily use a custom fork of lodash-cli.
    • 5d046f3 Re-enable Travis tests on 4.17 branch.
    • aa816b3 Remove /npm-package.
    • d7fbc52 Bump to v4.17.19
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by bnjmnt4n, a new releaser for lodash since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump elliptic from 6.5.1 to 6.5.4
    Bump elliptic from 6.5.1 to 6.5.4

    Mar 8, 2021

    Bumps elliptic from 6.5.1 to 6.5.4.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • can you make this dimmed out?
    can you make this dimmed out?

    Nov 14, 2019

    I'm looking for this effect https://bootstrap-vue.js.org/docs/components/modal/

    Reply
  • How to change css styles of modal window?
    How to change css styles of modal window?

    Aug 26, 2020

    How can I change css styles of modal window?

    Let's say I want to change height of modal. How can I do that?

    Reply
  • Update packages to fix security vuln. messages from npm audit
    Update packages to fix security vuln. messages from npm audit

    Mar 14, 2019

    Fixes npm audit:

    Before

    found 22 vulnerabilities (13 low, 8 moderate, 1 high) in 21831 scanned packages
      6 vulnerabilities require semver-major dependency updates.
      16 vulnerabilities require manual review. See the full report for details.
    

    After

    found 0 vulnerabilities
    
    Reply
  • This dependency was not found:  * vue-modaltor in ./src/main.js
    This dependency was not found: * vue-modaltor in ./src/main.js

    Oct 9, 2018

    screen shot 2018-10-09 at 5 28 33 pm

    After npm install --save vue-modaltor the following folder doesn't exist but you still use it in package.json

    Reply
  • Use CDN
    Use CDN

    Jan 2, 2020

    It is not working on CDN. Can you please make small example.

    <script src="/vue-modaltor/dist/vue-modaltor.js"></script>
    Vue.use(VueModalTor);
    

    and it still not working. Thank you

    Reply
  • Ability to prevent close by clicking on overlay
    Ability to prevent close by clicking on overlay

    Apr 9, 2018

    I still wanted to keep the close by X though, so I removed the $emit('hide') from the click on overlay.

    I think it would work better as an option (perhaps even an option to hide the X button as well) to prevent it.

    enhancement 
    Reply