@meve/ui/es/popup/index.js

Argon design system components library

import _extends from "@babel/runtime/helpers/esm/extends";
import { props } from './props';
import { createNamespace } from '../utils/create';
import { createZIndexMixin } from '../utils/mixins/zIndex';
import { createLockMixin } from '../context/lock';
import { createRouterMixin } from '../utils/mixins/router';



var _createNamespace = createNamespace('popup'),
    createComponent = _createNamespace.createComponent,
    namespace = _createNamespace.namespace;

var PopupPlugin = createComponent({
  inheritAttrs: false,
  mixins: [createZIndexMixin('value'), createLockMixin('value', 'lockScroll'), createRouterMixin()],
  props: props,
  watch: {
    value: function value(newValue) {
      this.$emit(newValue ? 'open' : 'close');
    }
  },
  methods: {
    hidePopup: function hidePopup() {
      this.$emit('clickOverlay');

      if (!this.closeOnClickOverlay) {
        return;
      }

      this.$emit('input', false);
    },
    renderOverlay: function renderOverlay() {
      var _this = this;

      var h = this.$createElement;
      var overlayClass = this.overlayClass,
          overlayStyle = this.overlayStyle;
      return h("div", {
        "class": [namespace('__overlay'), overlayClass],
        "style": _extends({
          zIndex: this.zIndex - 1
        }, overlayStyle),
        "on": _extends({}, {
          "click": function click($event) {
            for (var _len = arguments.length, attrs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
              attrs[_key - 1] = arguments[_key];
            }

            _this.hidePopup.apply(_this, [$event].concat(attrs));
          }
        })
      });
    },
    renderContent: function renderContent() {
      var h = this.$createElement;
      return h("div", {
        "class": [namespace('__content'), namespace("--" + this.position)],
        "style": {
          zIndex: this.zIndex
        },
        "attrs": _extends({}, this.$attrs)
      }, [this.slots()]);
    },
    handleAfterEnter: function handleAfterEnter() {
      this.$emit('opened');
    },
    handleAfterLeave: function handleAfterLeave() {
      this.$emit('closed');
    },
    // for router mixin
    handleRouteChange: function handleRouteChange() {
      this.$emit('routeChange');
    }
  },
  render: function render() {
    var _this2 = this;

    var h = arguments[0];
    var value = this.value,
        overlay = this.overlay,
        position = this.position;
    return h("transition", {
      "attrs": {
        "name": "m-fade"
      },
      "on": _extends({}, {
        "afterEnter": function afterEnter($event) {
          for (var _len2 = arguments.length, attrs = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
            attrs[_key2 - 1] = arguments[_key2];
          }

          _this2.handleAfterEnter.apply(_this2, [$event].concat(attrs));
        },
        "afterLeave": function afterLeave($event) {
          for (var _len3 = arguments.length, attrs = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
            attrs[_key3 - 1] = arguments[_key3];
          }

          _this2.handleAfterLeave.apply(_this2, [$event].concat(attrs));
        }
      })
    }, [h("div", {
      "class": ['m--box', namespace()],
      "style": {
        zIndex: this.zIndex - 2
      },
      "directives": [{
        name: "show",
        value: value
      }]
    }, [overlay && this.renderOverlay(), h("transition", {
      "attrs": {
        "name": "m-pop-" + position
      }
    }, [value && this.renderContent()])])]);
  }
});
export var _PopupComponent = PopupPlugin;
export default PopupPlugin;