npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-modaltor

v1.5.4

Published

Modal plugin for Nuxt.js and Vue.js

Downloads

685

Readme

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

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 different dimensions with one single attribute see responsive
  • scrollable modal, modal will get scroll if content 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 in

VUE2

import Vue from "vue";
import VueModalTor from "vue-modaltor/dist/vue-modaltor.common";
import "vue-modaltor/dist/vue-modaltor.css";

Vue.use(VueModalTor, {
    bgPanel: "#7957d5"  // add custome options
});

NUXT-SSR

in file /plugins/modal.js

import Vue from "vue"
import VueModalTor from "vue-modaltor/dist/vue-modaltor.common.js"
import "vue-modaltor/dist/vue-modaltor.css"
Vue.use(VueModalTor)

then add plugins part in nuxt.config.js

plugins: [
    "~/plugins/modal.js"
]

Also, can use CDN

And check it this issues

Example

<template>
  <div>
    <vue-modaltor :visible="open" @hide="open=false">
      <template #header>
      <!--    add your custom header     -->
        <div>
          <i class="close-icon">x</i>
          <p>add modal title or not</p>
        </div>
      </template>
      <template #body>
          <p>
            “Never forget what you are,
            for surely the world will not. 
            Make it your strength. Then it can never be your weakness.
            Armour yourself in it, and it will never be used to hurt you.
            ” ― George R.R. Martin, A Game of Thrones.
          </p>
        </template>
    </vue-modaltor>
    <button @click="open=true">modal-basic</button>
  </div>
</template>
<script>
export default {
    name: "YourComponentName",
    data() {
        return {
          open: false
        }
    }
}
</script>

Props

<script>
  export default {
    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 animating modal
      // :animation-panel='slide-right'
      // :animation-panel='slide-left'
      // :animation-panel='slide-top'
      // :animation-panel='slide-bottom'
      animationPanel:{
        type: String,
        required: false,
        default: 'modal-fade'
      },
      // this is for animating animationParent modal
      // :animation-parent='scale'
      animationParent:{
        type: String,
        required: false,
        default: 'modal-fade'
      },
      // this is for color overlay
      bgOverlay:{
        type: String,
        required: false,
        default: '#fff'
      },
      // this is for color 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. for padding right scroll body 
      // when modal is open and has scroll when closeScroll is true
      spaceScroll:{
        type: String,
        required: false,
        default: "15px"
      }
    }
  }
</script>

Slots

#header
    - create your own header

#body 
    - create your own body

TODO List

  • [x] Add custom slot for header , body and footer