vuikit/lib/modal.js

A responsive Vue UI library for web site interfaces based on UIkit

/**
 * Vuikit 0.8.10
 * (c) 2018 Miljan Aleksic
 * @license MIT
**/

/* Substantial part of the code is adapted from UIkit,
  Copyright (c) 2013-2018 YOOtheme GmbH, getuikit.com */

import { once, on } from './util/event';
import { addClass, removeClass } from './util/class';
import { mergeData } from './util/vue';
import IconClose from './icons/close-icon';
import IconCloseLarge from './icons/close-large';
import EventsMixin from './mixins/events';
import { css } from './util/style';
import { height } from './util/dimensions';
import { closest } from './util/selector';
import { each, assign } from './util/lang';
import VkHeightViewport from './height-viewport';

var SHOWN = 'shown';
var HIDDEN = 'hidden';
var TOGGLE = 'update:show';
var KEYUP = 'keyup';

var constants = /*#__PURE__*/Object.freeze({
SHOWN: SHOWN,
HIDDEN: HIDDEN,
TOGGLE: TOGGLE,
KEYUP: KEYUP
});

var doc = typeof document !== 'undefined' && document.documentElement;
var active;
var activeModals;
var Transition = {
  functional: true,
  render: function render (h, ref) {
    var data = ref.data;
    var children = ref.children;
    var modal = ref.parent;
    var def = {
      props: {
        css: false,
        appear: true
      },
      on: {
        beforeEnter: function beforeEnter () {
          addClass(doc, 'uk-modal-page');
        },
        enter: function enter (el, done) {
          var prev = active !== modal && active;
          if (prev && !modal.stack) {
            prev.hide();
            once(prev.$el, 'transitionend', function () { return doEnter(el, done); }, false, function (e) { return e.target === prev.$el; });
            return
          }
          setTimeout(function () { return doEnter(el, done); }, 0);
        },
        afterEnter: function afterEnter (el) {
          activeModals++;
          active = modal;
          active.$emit(SHOWN);
        },
        beforeLeave: function beforeLeave (el) {
          removeClass(el, 'uk-open');
        },
        leave: function leave (el, done) {
          once(el, 'transitionend', done, false, function (e) { return e.target === el; });
        },
        afterLeave: function afterLeave (el) {
          activeModals--;
          if (!activeModals) {
            removeClass(doc, 'uk-modal-page');
          }
          if (active === modal) {
            active = null;
          }
          modal.$emit(HIDDEN);
        }
      }
    };
    function doEnter (el, done) {
      modal.$root.$el.appendChild(el);
      el.offsetWidth;
      once(el, 'transitionend', done, false, function (e) { return e.target === el; });
      addClass(el, 'uk-open');
    }
    return h('transition', def, children)
  }
}
on(doc, 'click', function (e) {
  if (!active) {
    return
  }
  var clickedOut = e.target === active.$el;
  if (clickedOut && !active.stuck) {
    active.$emit(TOGGLE, false);
  }
});
on(doc, 'keyup', function (e) {
  active && active.$emit(KEYUP, e);
});

var ElementModal = {
  functional: true,
  props: {
    expand: {
      type: Boolean,
      default: false
    }
  },
  render: function render (h, ref) {
    var children = ref.children;
    var data = ref.data;
    var props = ref.props;
    var expand = props.expand;
    return h('div', mergeData(data, {
      class: ['uk-modal', {
        'uk-modal-container': expand
      }],
      style: {
        display: 'block'
      }
    }), children)
  }
}

var ElementModalFull = {
  functional: true,
  render: function render (h, ref) {
    var children = ref.children;
    var data = ref.data;
    var props = ref.props;
    return h('div', mergeData(data, {
      class: 'uk-modal uk-modal-full',
      style: {
        display: 'block'
      }
    }), children)
  }
}

var ElementModalClose = {
  functional: true,
  props: {
    large: {
      type: Boolean,
      default: false
    },
    outside: {
      type: Boolean,
      default: false
    }
  },
  render: function render (h, ref) {
    var obj;
    var data = ref.data;
    var props = ref.props;
    var large = props.large;
    var outside = props.outside;
    var def = {
      class: ['uk-close uk-icon', ( obj = {
        'uk-close-large': large
      }, obj["uk-modal-close-outside"] = outside, obj["uk-modal-close-default"] = !outside, obj)],
      attrs: {
        type: 'button'
      }
    };
    return h('button', mergeData(data, def), [
      h(large ? IconCloseLarge : IconClose)
    ])
  }
}

var ElementModalFullClose = {
  functional: true,
  props: {
    large: {
      type: Boolean,
      default: false
    }
  },
  render: function render (h, ref) {
    var data = ref.data;
    var props = ref.props;
    var large = props.large;
    var def = {
      class: ['uk-close uk-icon uk-modal-close-full', {
        'uk-close-large': large
      }],
      attrs: {
        type: 'button'
      }
    };
    return h('button', mergeData(data, def), [
      h(large ? IconCloseLarge : IconClose)
    ])
  }
}

var ElementModalTitle = {
  functional: true,
  props: {
    tag: {
      type: String,
      default: 'h2'
    }
  },
  render: function render (h, ref) {
    var props = ref.props;
    var data = ref.data;
    var children = ref.children;
    var tag = props.tag;
    return h(tag, mergeData(data, {
      class: 'uk-modal-title'
    }), children)
  }
}

var ElementModalBody = {
  functional: true,
  render: function render (h, ref) {
    var props = ref.props;
    var data = ref.data;
    var children = ref.children;
    return h('div', mergeData(data, {
      class: 'uk-modal-body'
    }), children)
  }
}

var ElementModalDialog = {
  functional: true,
  render: function render (h, ref) {
    var props = ref.props;
    var data = ref.data;
    var children = ref.children;
    return h('div', mergeData(data, {
      class: 'uk-modal-dialog'
    }), children)
  }
}

var ElementModalFooter = {
  functional: true,
  render: function render (h, ref) {
    var props = ref.props;
    var data = ref.data;
    var children = ref.children;
    return h('div', mergeData(data, {
      class: 'uk-modal-footer'
    }), children)
  }
}

var ElementModalHeader = {
  functional: true,
  render: function render (h, ref) {
    var props = ref.props;
    var data = ref.data;
    var children = ref.children;
    return h('div', mergeData(data, {
      class: 'uk-modal-header'
    }), children)
  }
}

var doc$1 = typeof document !== 'undefined' && document.documentElement;
var core = {
  mixins: [EventsMixin],
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    hide: function hide () {
      this.$emit(TOGGLE, false);
    }
  },
  beforeDestroy: function beforeDestroy () {
    if (this.$el.parentNode) {
      this.$el.parentNode.removeChild(this.$el);
    }
    if (!activeModals) {
      removeClass(doc$1, 'uk-modal-page');
    }
  }
}

var VkModalOverflowAuto = {
  bind: function bind (el, binding) {
    el.vkModalOverflowAutoOff = on(window, 'resize', function () { return update(el, binding); });
    addClass(el, 'uk-overflow-auto');
  },
  inserted: function inserted (el, binding, vnode) {
    vnode.context.$nextTick(function () { return update(el, binding); });
  },
  componentUpdated: function componentUpdated (el, binding) {
    update(el, binding);
  },
  unbind: function unbind (el) {
    el.vkModalOverflowAutoOff();
  }
}
function update (el, binding) {
  var modal = closest(el, '.uk-modal');
  var panel = closest(el, '.uk-modal-dialog');
  if (!panel || !modal) {
    return
  }
  var current = css(el, 'maxHeight');
  css(el, 'maxHeight', 150);
  css(el, 'maxHeight', Math.max(150, 150 + height(modal) - panel.offsetHeight));
  if (current !== css(el, 'maxHeight')) {
    update(el, binding);
  }
}

var modal = {
  name: 'VkModal',
  extends: core,
  directives: {
    VkModalOverflowAuto: VkModalOverflowAuto
  },
  props: {
    stuck: {
      type: Boolean,
      default: false
    },
    overflowAuto: {
      type: Boolean,
      default: false
    },
    center: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: ''
    },
    stack: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    widthClasses: function widthClasses () {
      return this.size
        ? this.size.split(' ').map(function (size) { return ("uk-width-" + size); })
        : ''
    }
  },
  render: function render (h) {
    var this$1 = this;
    var def = {
      class: {
        'uk-flex uk-flex-top': this.center
      },
      style: {
        display: this.center ? 'flex' : 'block'
      },
      props: {
        expand: this.size === 'container'
      },
      directives: [{
        name: 'show',
        value: this.show
      }],
      on: {
      }
    };
    Object.keys(this.$slots).forEach(function (slot) { return each(this$1.$slots[slot], function (node) {
      if (node.fnOptions && node.fnOptions.name === 'VkModalClose') {
        assign(node.data, {
          on: assign({ click: function (e) { return this$1.$emit(TOGGLE, false); } }, node.data.on || {})
        });
      }
    }); });
    var modal = h(ElementModal, def, [
      h(ElementModalDialog, {
        class: [this.widthClasses, {
          'uk-margin-auto-vertical': this.center
        }]
      }, [
        this.$slots.dialog && this.$slots.dialog,
        this.$slots.header && h(ElementModalHeader, this.$slots.header),
        this.$slots.default && h(ElementModalBody, {
          directives: this.overflowAuto
            ? [{ name: 'vk-modal-overflow-auto' }]
            : []
        }, this.$slots.default),
        this.$slots.footer && h(ElementModalFooter, this.$slots.footer)
      ])
    ]);
    return h(Transition, [ modal ])
  }
}

var modalFull = {
  name: 'VkModalFull',
  extends: core,
  directives: {
    VkHeightViewport: VkHeightViewport
  },
  render: function render (h) {
    var this$1 = this;
    var def = {
      props: {
        expand: 'full'
      },
      directives: [{
        name: 'show',
        value: this.show
      }]
    };
    Object.keys(this.$slots).forEach(function (slot) { return each(this$1.$slots[slot], function (node) {
      if (node.fnOptions && node.fnOptions.name === 'VkModalFullClose') {
        assign(node.data, {
          on: assign({ click: function (e) { return this$1.$emit(TOGGLE, false); } }, node.data.on || {})
        });
      }
    }); });
    var modal = h(ElementModalFull, def, [
      h(ElementModalDialog, {
        directives: [{
          name: 'vk-height-viewport'
        }]
      }, this.$slots.default)
    ]);
    return h(Transition, [ modal ])
  }
}

var modal_Close = {
  name: 'VkModalClose',
  functional: true,
  props: ElementModalClose.props,
  render: ElementModalClose.render
}

var modalFull_Close = {
  name: 'VkModalFullClose',
  functional: true,
  props: ElementModalFullClose.props,
  render: ElementModalFullClose.render
}

var modal_Title = {
  name: 'VkModalTitle',
  functional: true,
  props: ElementModalTitle.props,
  render: ElementModalTitle.render
}

export { constants, active, ElementModal, ElementModalFull, ElementModalClose, ElementModalFullClose, ElementModalTitle, ElementModalBody, ElementModalDialog, ElementModalFooter, ElementModalHeader, modal as Modal, modalFull as ModalFull, modal_Close as ModalClose, modalFull_Close as ModalFullClose, modal_Title as ModalTitle };