Skip to content

🌈Transform Vue.js 2.0+ component into modal with powerful layout and transition support✨

License

Notifications You must be signed in to change notification settings

leodd/vue-modal-wizard

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Vue Modal Wizard

npm version npm

Simple and intuitive, highly customizable modal component for Vue.js.

Demo: https://leodd.github.io/vue-modal-wizard/

demo

Install

npm i vue-modal-wizard
import ModalWizard from 'vue-modal-wizard'
Vue.use(ModalWizard)

//use it in your vue component
this.$modal.open(modalComponent, opts)

//or
ModalWizard.open(modalComponent, opts)

/*
The default plugin name is 'modal'.
You can manually define it by giving a name option.
e.g.
Vue.use(ModalWizard, {name: 'coolModal'})
this.$coolModal.open(modalComponent, opts)
*/

Usage

There are three different ways to create a modal.

Define in inline template:

this.$modal.open(`
  <div>
    {{ message }}
    <button :click="onOk" }>ok</button>
  </div>
`, {
  props: {
      message: 'here is a message',
      onOk: () => {console.log('ok')}
    }
})

Define in inline render function:

// P.S. I use JSX here for simplicity. You can use normal render function if you like.
this.$modal.open((h, props) => {
  return (
    <div>
      { props.message }
      <button onClick={ props.onOk }>ok</button>
    </div>
  )
}, {
  props: {
    message: 'here is a message',
    onOk: () => {console.log('ok')}
  }
})

Define in component (Recommended):

// define the modal using vue component
<template>
  <div>
    {{ message }}
    <button :click="onOk" }>ok</button>
  </div>
</template>

<script>
  export default {
    props: ['message', 'onOk']
  }
</script>
// use component as modal
import modal from 'component.vue'
this.$modal.open(modal /* or 'componentName' */, {
  props: {
    message: 'here is a message',
    onOk: () => {console.log('ok')}
  }
})

Positioning

Modal Wizard provides four different types of layout: point, column, sticky-column, and viewport. (naming is based on the type of anchor)

layout

Include a position option when creating modal:

this.$modal.open(`
  <div>
    ...
  </div>
`, {
  position: {
    type: 'point',
    anchorLeft: '100px',
    left: '0'
  }
})

Also, you can define the position option in your modal component:

methods: {
  _modalPosition: function() {
    return {
      type: 'point',
          anchorLeft: '100px',
          left: '0'
    }
  }
}
Adaptive layout (only for component approach)

You can dynamically change the layout type and position when the window size change by adding a handler in your component:

methods: {
  _modalFlexPosition: function(width, height) {
    return width > 500 ? {
      type: 'column'
    } : {
      type: 'viewport'
    }
  }
}
Properties
Property Value Default Description
type 'point', 'column', 'sticky-column', 'viewport' 'point' The type of anchor
top e.g. '100px', '0' null Position relative to the anchor. Under 'point' mode, when both top and bottom have value null, the modal will be centered vertically. For other anchor mode, it will be regarded as margin
bottom same as above null same as above
left same as above null Position relative to the anchor. Under 'viewport' mode, it will be regarded as margin. For other anchor mode, when both left and right have value null, the modal will be centered horizontally.
right same as above null same as above
anchorTop e.g. '100px', '50%' '50%' Position relative to the top of the window. Only works under 'point' mode.
anchorBottom same as above null Position relative to the bottom of the window. Only works under 'point' mode.
anchorLeft same as above '50%' Position relative to the left of the window. Does not work under 'viewport' mode
anchorLeft same as above null Position relative to the right of the window. Does not work under 'viewport' mode

P.S. For 'sticky-column', the element's height should be set to 'auto'. For 'viewport' mode, both height and width should be set to 'auto'.

Close Modal

User can click the area outside the modal or press esc to close it. You can do it manually by

this.$modal.close()

This will close the modal on the top.

You can disable esc detection by

this.$modal.open(`
  <div>
    ...
  </div>
`, {
     ...
     escOff: true
     ...
})

When the modal is being closed, an onClose handler will be trigger. You can define it in the option.

this.$modal.open(`
  <div>
    ...
  </div>
`, {
     ...
     onClose: () => {console.log('on close')}
     ...
})

Setting Style

You can set the lightbox color and transition by

this.$modal.open(`
  <div>
    ...
  </div>
`, {
     ...
     style: {
       lightboxColor: 'rgba(0,0,0,0.8)',
       transition: 'pop-out',
       fadeDuration: '0.4s',
       colorChangeDuration: '300ms'
     }
     ...
})

In your css file

.pop-out-enter,
  .pop-out-leave-to {
    transform: translateY(-20px);
  }

  .pop-out-enter-active,
  .pop-out-leave-active {
    /*do not use 'all' for transition, as positioning of modal will be animated*/
    transition: transform 0.4s;
  }

Same as positioning, there's a handler for defining style inside your modal component

methods: {
  _modalStyle() {
    return {
      lightboxColor: 'rgba(0,0,0,0.8)',
      transition: 'pop-out',
      fadeDuration: '0.4s',
      colorChangeDuration: '300ms'
    }
  }
}
Change color (only for component approach)

You can change the lightbox color dynamically by emitting a changeColor event

this.$emit('changeColor', 'rgba(255,255,255,0.8)');
Properties
Property Value Default Description
transition string null Name of transition
lightboxColor e.g. 'black', '#000', 'rgba(0,0,0,0.8)' 'rgba(0,0,0,0.8)' Lightbox color
fadeDuration e.g. '0.3s', '300ms' '200ms' The duration of fade in or fade out transition
colorChangeDuration e.g. '0.3s', '300ms' '200ms' The duration of lightbox color transition

Keep in memory

By default, modal will be created dynamically, and will be destroyed after being closed. However, you can keep it in the memory by giving it a name.

this.$modal.open(`
  <div>
    ...
  </div>
`, {
     ...
     name: 'modal-one'
     ...
})

If you create several modal with the same name, only the first one will be saved.

For component approach, you can define a handler for recovery (for reusing modal)

methods: {
  _modalRecover: function() {
    // do something
  }
}

About

🌈Transform Vue.js 2.0+ component into modal with powerful layout and transition support✨

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published