vue-slim-modal/dist/vue-slim-modal.js

Slim modal component for Vue.js

/*!
 * vue-slim-modal v1.0.4
 * (c) 2017-present EGOIST <0x142857@gmail.com> (github.com/egoist)
 * Released under the MIT License.
 */
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global.SlimModal = factory());
}(this, (function () { 'use strict';

var nestRE = /^(attrs|props|on|nativeOn|class|style|hook)$/;

var index$1 = function mergeJSXProps(objs) {
  return objs.reduce(function (a, b) {
    var aa, bb, key, nestedKey, temp;
    for (key in b) {
      aa = a[key];
      bb = b[key];
      if (aa && nestRE.test(key)) {
        // normalize class
        if (key === 'class') {
          if (typeof aa === 'string') {
            temp = aa;
            a[key] = aa = {};
            aa[temp] = true;
          }
          if (typeof bb === 'string') {
            temp = bb;
            b[key] = bb = {};
            bb[temp] = true;
          }
        }
        if (key === 'on' || key === 'nativeOn' || key === 'hook') {
          // merge functions
          for (nestedKey in bb) {
            aa[nestedKey] = mergeFn(aa[nestedKey], bb[nestedKey]);
          }
        } else if (Array.isArray(aa)) {
          a[key] = aa.concat(bb);
        } else if (Array.isArray(bb)) {
          a[key] = [aa].concat(bb);
        } else {
          for (nestedKey in bb) {
            aa[nestedKey] = bb[nestedKey];
          }
        }
      } else {
        a[key] = b[key];
      }
    }
    return a;
  }, {});
};

function mergeFn(a, b) {
  return function () {
    a.apply(this, arguments);
    b.apply(this, arguments);
  };
}

var index = {
  name: 'slim-modal',
  functional: true,
  props: {
    isOpen: {
      type: Boolean,
      required: true
    },
    clickOutside: {
      type: Function,
      default: function _default() {
        return function () {
          return null;
        };
      }
    },
    isCenter: {
      type: Boolean,
      default: false
    },
    overlayClass: {
      type: String
    }
  },
  render: function render(h, ctx) {
    var _ctx$props = ctx.props,
        isOpen = _ctx$props.isOpen,
        isCenter = _ctx$props.isCenter,
        clickOutside = _ctx$props.clickOutside,
        overlayClass = _ctx$props.overlayClass;


    if (!isOpen) return;

    var contentClassNames = 'modal' + (isCenter ? ' modal__center' : '');

    var overlayClassNames = 'modal-overlay' + (overlayClass ? ' ' + overlayClass : '');

    return h(
      'div',
      { 'class': 'modal-wrapper' },
      [h(
        'div',
        { 'class': overlayClassNames, on: {
            'click': clickOutside
          }
        },
        []
      ), h(
        'div',
        index$1([{
          'class': contentClassNames,
          on: {
            'click': function click(e) {
              return e.stopPropagation();
            }
          }
        }, ctx.data]),
        [ctx.children]
      )]
    );
  }
};

return index;

})));