zmp-vue/cjs/components/routable-modals.js

Build full featured iOS & Android apps using ZMP & Vue

"use strict";

exports.__esModule = true;
exports.default = void 0;

var _vue = require("vue");

var _zmp = require("../shared/zmp");

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var _default = {
  name: 'zmp-routable-modals',
  setup: function setup() {
    var elRef = (0, _vue.ref)(null);
    var modals = (0, _vue.ref)([]);
    var routerData = (0, _vue.ref)(null);
    (0, _vue.onMounted)(function () {
      routerData.value = {
        modals: modals,
        el: elRef.value,
        setModals: function setModals(newModals) {
          newModals.forEach(function (modal) {
            // eslint-disable-next-line
            modal.component = (0, _vue.toRaw)(modal.component);
          });
          modals.value = [].concat(newModals);
        }
      };
      _zmp.zmprouters.modals = routerData.value;
    });
    (0, _vue.onUpdated)(function () {
      if (!routerData.value || !_zmp.zmp) return;

      _zmp.zmpevents.emit('modalsRouterDidUpdate', routerData.value);
    });
    (0, _vue.onBeforeUnmount)(function () {
      if (!routerData.value) return;
      _zmp.zmprouters.modals = null;
      routerData.value = null;
    });

    var getComponent = function getComponent(modal) {
      return (0, _vue.toRaw)(modal.component);
    };

    var getProps = function getProps(modal) {
      var modalComponent = modal.component,
          modalProps = modal.props;
      var keys = [];
      var passProps = {};
      if (modalComponent && modalComponent.props) keys = Object.keys(modalComponent.props);
      keys.forEach(function (key) {
        if (key in modalProps) passProps[key] = modalProps[key];
      });
      return passProps;
    };

    return function () {
      return (0, _vue.h)('div', {
        ref: elRef,
        class: 'zmp-modals'
      }, [].concat(modals.value.map(function (modal) {
        return (0, _vue.h)(getComponent(modal), _extends({
          key: modal.id
        }, getProps(modal)));
      })));
    };
  }
};
exports.default = _default;