Morioh
Login
Liya Gebre

Liya Gebre

3 years ago

Universal Modal Plugin for Vue3

vue-universal-modal

Universal modal plugin for Vue@3

⚠️ This plugin does not support Vue@2

Introduction

vue-universal-modal plugin is based on the teleport.
It is very light and simple, but it provides essential features for modal use in applications.
(Such as Add & Remove, Visible & Hidden, Transition, Auto bind keyboard and mouse to close, Support SSR, A11Y…)

Install plugin

npm install vue-universal-modal

And install this plugin in vue application

import VueUniversalModal from 'vue-universal-modal'
// import VueUniversalModal from 'vue-universal-modal/dist/index.es5' // If need to use es5 build
import 'vue-universal-modal/dist/index.css'

app.use(VueUniversalModal)

Options

app.use(VueUniversalModal, {
  teleportComponent: 'MyModalTeleport',
  teleportComponentId: 'my-modal-teleport',
  modalComponent: 'MyModal',
})
name type detault description
teleportComponent string 'VueUniversalModal' Global teleport component name
teleportComponentId string 'vue-universal-modal-teleport' Global teleport component id
modalComponent string 'Modal' Global modal component name

Teleport component

Insert the teleport component into the root component.

<template>
  <Main />
  <VueUniversalModal />
  <!-- If the option changed teleport component the name
  <MyModalTeleport />
  -->
</template>

Usage modal

Insert the component wrapped with the modal component. (Slot based)

<template>
  <Modal>
  <!-- If the option changed modal component the name
  <MyModal>
  -->
    <div class="modal">
      <h2>Hello</h2>
      <p>
        Vue Universal Modal
      </p>
    </div>
  </Modal>
</template>

<style scoped lang="scss">
.modal {
  width: 300px;
  padding: 30px;
  box-sizing: border-box;
  background-color: #fff;
  font-size: 20px;
  text-align: center;
}
</style>

props

name type detault description
close function () => {} Function to close a modal
disabled boolean false Handle visibility (as in v-show)
options object {}
id string ''
class string ''
ariaLabelledby string '' Applying modal heading id helps with accessibility.
props.options
name type detault description
transition number false 300
closeClickDimmed boolean true Closes the modal when dimmed is clicked
closeKeyCode number false 27 (esc)
styleModal object {} Inject modal window style (.vue-universal-modal)
styleModalContent object {} Inject modal content style (.vue-universal-modal-content)

slot arguments

There are slot arguments that can be used within modal content.

name type description
emitClose function The modal component must be unmount after the transitionEnd event.
So we need to pass the close function to props and run emitClose with logic wrapped. 
<template>
  <p>
    <button @click="showModal">
      Show modal
    </button>
  </p>
  <Modal
    v-if="isShow"
    v-slot="{ emitClose }"
    :close="closeModal"
  >
    <div class="modal">
      <p>
        Hello
      </p>
      <button @click="emitClose">
        close
      </button>
    </div>
  </Modal>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup () {
    const isShow = ref(false)

    function showModal () {
      isShow.value = true
    }

    function closeModal () {
      isShow.value = false
    }

    return {
      isShow,
      showModal,
      closeModal
    }
  }
})
</script>

Handle global CSS

You can change it directly to your own style by referring to the source

.vue-universal-modal {
  /* Change dimmed color */
  background-color: rgba(255, 255, 0, 0.3);
}
.vue-universal-modal-content {
  /* Align to top (flex-direction property value is set to column) */
  justify-content: flex-start;
}

Example

Todo

  • [x] Order states
  • [x] Semantic release
  • [x] Make demo
  • [x] A11Y
  • [ ] TDD (Need more test cases)
  • [ ] Support SSR (Test only until renderToString of the teleport component)
  • [ ] Support IE11 (IE 11 support for Vue@3 is still pending)

Download Details:

Author: hoiheart

Source Code: https://github.com/hoiheart/vue-universal-modal

#vue #vuejs #javascript

Universal Modal Plugin for Vue3
21.60 GEEK