@fe6/water-pro/lib/modal-pro/src/modal-pro.js

An enterprise-class UI design language and Vue-based implementation

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _vue = require("vue");

var _shared = require("@fe6/shared");

var _lodashEs = require("lodash");

var _Modal = _interopRequireDefault(require("./components/Modal"));

var _modalWrapper = _interopRequireDefault(require("./components/modal-wrapper"));

var _modalClose = _interopRequireDefault(require("./components/modal-close"));

var _modalFooter = _interopRequireDefault(require("./components/modal-footer"));

var _modalHeader = _interopRequireDefault(require("./components/modal-header"));

var _props = require("./props");

var _useModalFullScreen = require("./hooks/use-modal-full-screen");

var _useConfigInject2 = _interopRequireDefault(require("../../_util/hooks/useConfigInject"));

var _propsUtil = require("../../_util/props-util");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

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 _default2 = (0, _vue.defineComponent)({
  name: 'AModalPro',
  inheritAttrs: false,
  props: _props.basicProps,
  emits: ['visible-change', 'height-change', 'cancel', 'ok', 'register'],
  setup: function setup(props, _ref) {
    var emit = _ref.emit,
        attrs = _ref.attrs;

    var _useConfigInject = (0, _useConfigInject2.default)('modal-pro', props),
        prefixClsNew = _useConfigInject.prefixCls,
        configProvider = _useConfigInject.configProvider;

    var visibleRef = (0, _vue.ref)(false);
    var propsRef = (0, _vue.ref)(null);
    var modalWrapperRef = (0, _vue.ref)(null); // modal   Bottom and top height

    var extHeightRef = (0, _vue.ref)(0);
    var modalMethods = {
      setModalProps: setModalProps,
      emitVisible: undefined,
      redoModalHeight: function redoModalHeight() {
        (0, _vue.nextTick)(function () {
          if ((0, _vue.unref)(modalWrapperRef)) {
            (0, _vue.unref)(modalWrapperRef).setModalHeight();
          }
        });
      }
    };
    var instance = (0, _vue.getCurrentInstance)();

    if (instance) {
      emit('register', modalMethods, instance.uid);
    } // Custom title component: get title


    var getMergeProps = (0, _vue.computed)(function () {
      return _extends(_extends({}, (0, _vue.unref)(propsRef)), props);
    });

    var _useFullScreen = (0, _useModalFullScreen.useFullScreen)({
      modalWrapperRef: modalWrapperRef,
      extHeightRef: extHeightRef,
      wrapClassName: (0, _vue.toRef)(getMergeProps.value, 'wrapClassName'),
      prefixClsNew: prefixClsNew.value
    }),
        handleFullScreen = _useFullScreen.handleFullScreen,
        getWrapClassName = _useFullScreen.getWrapClassName,
        fullScreenRef = _useFullScreen.fullScreenRef; // modal component does not need title


    var getProps = (0, _vue.computed)(function () {
      var opt = _extends(_extends({}, (0, _vue.unref)(getMergeProps)), {
        visible: (0, _vue.unref)(visibleRef),
        title: undefined
      });

      return _extends(_extends({}, opt), {
        wrapClassName: (0, _vue.unref)(getWrapClassName)
      });
    });
    var getBindValue = (0, _vue.computed)(function () {
      var _a;

      var attr = _extends(_extends(_extends({}, attrs), (0, _vue.unref)(getProps)), (_a = configProvider.locale) === null || _a === void 0 ? void 0 : _a.Modal);

      if ((0, _vue.unref)(fullScreenRef)) {
        return (0, _lodashEs.omit)(attr, 'height');
      }

      return attr;
    });
    var getWrapperHeight = (0, _vue.computed)(function () {
      if ((0, _vue.unref)(fullScreenRef)) {
        return undefined;
      }

      return (0, _vue.unref)(getProps).height;
    });
    (0, _vue.watchEffect)(function () {
      visibleRef.value = !!props.visible;
      fullScreenRef.value = !!props.defaultFullscreen;
    });
    (0, _vue.watch)(function () {
      return (0, _vue.unref)(visibleRef);
    }, function (v) {
      var _a;

      emit('visible-change', v);
      instance && ((_a = modalMethods.emitVisible) === null || _a === void 0 ? void 0 : _a.call(modalMethods, v, instance.uid));
      (0, _vue.nextTick)(function () {
        if (props.scrollTop && v && (0, _vue.unref)(modalWrapperRef)) {
          (0, _vue.unref)(modalWrapperRef).scrollTop();
        }
      });
    }, {
      immediate: false
    }); // 取消事件
    // TODO [feat] 发版之后使用的时候 babel 报错
    // async function handleCancel(e: Event) {

    function handleCancel(e) {
      e === null || e === void 0 ? void 0 : e.stopPropagation(); // TODO [feat] 发版之后使用的时候 babel 报错
      // if (props.closeFunc && isFunction(props.closeFunc)) {
      //   const isClose: boolean = await props.closeFunc();
      //   visibleRef.value = !isClose;
      //   return;
      // }

      visibleRef.value = false;
      emit('cancel');
    }
    /**
     * @description: 设置modal参数
     */


    function setModalProps(props) {
      // Keep the last setModalProps
      propsRef.value = (0, _shared.deepMerge)((0, _vue.unref)(propsRef) || {}, props);

      if (!Reflect.has(props, 'visible')) {
        return;
      }

      visibleRef.value = !!props.visible;
    }

    function handleOk() {
      emit('ok');
    }

    function handleHeightChange(height) {
      emit('height-change', height);
    }

    function handleExtHeight(height) {
      extHeightRef.value = height;
    }

    function handleTitleDbClick(e) {
      if (!props.canFullscreen) {
        return;
      }

      e.stopPropagation();
      handleFullScreen(e);
    }

    return {
      handleCancel: handleCancel,
      getBindValue: getBindValue,
      getProps: getProps,
      handleFullScreen: handleFullScreen,
      fullScreenRef: fullScreenRef,
      getMergeProps: getMergeProps,
      handleOk: handleOk,
      visibleRef: visibleRef,
      omit: _lodashEs.omit,
      modalWrapperRef: modalWrapperRef,
      handleExtHeight: handleExtHeight,
      handleHeightChange: handleHeightChange,
      handleTitleDbClick: handleTitleDbClick,
      getWrapperHeight: getWrapperHeight,
      configProvider: configProvider
    };
  },
  render: function render() {
    var _this = this;

    var _a;

    var closeSlotNode = (0, _propsUtil.getSlot)(this, 'close');
    var closeNode = closeSlotNode.length ? closeSlotNode : (0, _vue.createVNode)(_modalClose.default, {
      "can-fullscreen": this.getProps.canFullscreen,
      "full-screen": this.fullScreenRef,
      "onCancel": this.handleCancel,
      "onFullscreen": this.handleFullScreen
    }, null);
    var titleSlotNode = (0, _propsUtil.getSlot)(this, 'header');
    var defaultHeader = null;

    if (this.title) {
      defaultHeader = (0, _vue.createVNode)(_modalHeader.default, _objectSpread(_objectSpread(_objectSpread({}, this.getMergeProps), this.$attrs), {}, {
        "onDblclick": this.handleTitleDbClick
      }), null);
    }

    var titleNode = titleSlotNode.length ? titleSlotNode : defaultHeader;
    var footerSlotNode = (0, _propsUtil.getSlot)(this, 'footer');
    var footerNode = footerSlotNode.length ? footerSlotNode : (0, _vue.createVNode)(_modalFooter.default, _objectSpread(_objectSpread(_objectSpread({}, this.getProps), (_a = this.configProvider.locale) === null || _a === void 0 ? void 0 : _a.Modal), {}, {
      "onOk": this.handleOk,
      "onCancel": this.handleCancel
    }), null);
    var slots = {
      closeIcon: function closeIcon() {
        return closeNode;
      },
      title: function title() {
        return titleNode;
      },
      footer: function footer() {
        return footerNode;
      }
    };
    return (0, _vue.createVNode)(_Modal.default, _objectSpread(_objectSpread({}, this.getBindValue), {}, {
      "onCancel": this.handleCancel
    }), _objectSpread({
      default: function _default() {
        return [(0, _vue.createVNode)(_modalWrapper.default, _objectSpread(_objectSpread({
          "ref": "modalWrapperRef",
          "use-wrapper": _this.getProps.useWrapper,
          "footer-offset": _this.wrapperFooterOffset,
          "full-screen": _this.fullScreenRef,
          "loading": _this.getProps.loading,
          "loading-tip": _this.getProps.loadingTip,
          "min-height": _this.getProps.minHeight,
          "height": _this.getWrapperHeight,
          "visible": _this.visibleRef,
          "scroll-style": _this.scrollStyle,
          "modal-footer-height": _this.footer !== undefined && !_this.footer ? 0 : undefined
        }, (0, _lodashEs.omit)(_this.getProps.wrapperProps, 'visible', 'height')), {}, {
          "onExtHeight": _this.handleExtHeight,
          "onHeightChange": _this.handleHeightChange
        }), _this.$slots)];
      }
    }, slots));
  }
});

exports.default = _default2;