asvae

Plugin (store-plugin.ts)

import { CheckOutStore } from '../services/store'

export const checkOutStoreInjectKey = Symbol('checkOutStore')

export const StorePlugin = {
  install (Vue: any): void {
    Vue.mixin({
      inject: {

asvae

    import DomHelpers from './Utility/DomHelpers.js'

// ...
    methods: {
      click (event) {
        DomHelpers.isChild(this.$el, event.target) || this.hide()
      },  
    }  

asvae

<div class="click-target-modal">
    <div class="click-target-modal__content"
         v-if="isDisplayed"
    >
        <slot></slot>
    </div>
</div>

asvae

// ...
    methods: {
      show () {
        this.isDisplayed = true
        this.$emit('input', true)
        this.listen(true)
      },
      hide () {
        this.isDisplayed = false
        this.$emit('input', false)

asvae

<div class="document-event-modal">
    <div class="document-event-modal__content"
         @click.stop
         v-if="isDisplayed"
    >
        <slot></slot>
    </div>
</div>

asvae

.full-screen-overlay-modal {
    &__background {
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    &__content {

asvae

<div class="full-screen-overlay-modal">
    <div class="background"
         @click="hide()"
         v-if="isDisplayed"
    />
    <div class="content"
         v-if="isDisplayed"
    >
        <slot></slot>
    </div>

asvae

Hunt for perfect modal

#modal #popup #javascript #vuejs 2017-05-08

Hey. Today we will pursue our dream for perfect modal. Being perfect means:

• Floats above everything else.
• Is not blocking.
• Supports nesting of any depth.

asvae

import Field from '../Domain/Entity/Field.js'

import FieldMapper from '../Domain/Mapper/FieldMapper.js'

import repoBus from '../../oop-store/repoBus'
import axios from '../../plugins/internal/axios-instance.js'
import MappingHelpers from '../Utility/Static/MappingHelpers.js'

export const FIELD_UPDATED = 'Field updated'
export const FIELD_CREATED = 'Field created'

asvae

let promise

export async function getMy2c2p () {
  promise || (promise = new Promise((resolve, reject) => {
    const script = document.createElement('script')
    script.src = 'https://demo2.2c2p.com/2C2PFrontEnd/SecurePayment/api/my2c2p.1.6.9.min.js'
    script.async = true
    script.onload = () => {
      resolve(My2c2p)
    }