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

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

import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";

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); }

import { deepMerge } from '@fe6/shared';
import { omit } from 'lodash-es';
import { defineComponent, computed, ref, watch, unref, watchEffect, toRef, getCurrentInstance, nextTick } from 'vue';
import AModalBase from './components/Modal';
import ModalWrapper from './components/modal-wrapper';
import ModalClose from './components/modal-close';
import ModalFooter from './components/modal-footer';
import ModalHeader from './components/modal-header';
import { basicProps } from './props';
import { useFullScreen } from './hooks/use-modal-full-screen';
import useConfigInject from '../../_util/hooks/useConfigInject';
import { getSlot } from '../../_util/props-util';
export default defineComponent({
  name: 'AModalPro',
  inheritAttrs: false,
  props: basicProps,
  emits: ['visible-change', 'height-change', 'cancel', 'ok', 'register'],
  setup: function setup(props, _ref) {
    var emit = _ref.emit,
        attrs = _ref.attrs;

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

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

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

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


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

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


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

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

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

      if (unref(fullScreenRef)) {
        return omit(attr, 'height');
      }

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

      return unref(getProps).height;
    });
    watchEffect(function () {
      visibleRef.value = !!props.visible;
      fullScreenRef.value = !!props.defaultFullscreen;
    });
    watch(function () {
      return 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));
      nextTick(function () {
        if (props.scrollTop && v && unref(modalWrapperRef)) {
          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 = deepMerge(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: omit,
      modalWrapperRef: modalWrapperRef,
      handleExtHeight: handleExtHeight,
      handleHeightChange: handleHeightChange,
      handleTitleDbClick: handleTitleDbClick,
      getWrapperHeight: getWrapperHeight,
      configProvider: configProvider
    };
  },
  render: function render() {
    var _this = this;

    var _a;

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

    if (this.title) {
      defaultHeader = _createVNode(ModalHeader, _objectSpread(_objectSpread(_objectSpread({}, this.getMergeProps), this.$attrs), {}, {
        "onDblclick": this.handleTitleDbClick
      }), null);
    }

    var titleNode = titleSlotNode.length ? titleSlotNode : defaultHeader;
    var footerSlotNode = getSlot(this, 'footer');
    var footerNode = footerSlotNode.length ? footerSlotNode : _createVNode(ModalFooter, _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 _createVNode(AModalBase, _objectSpread(_objectSpread({}, this.getBindValue), {}, {
      "onCancel": this.handleCancel
    }), _objectSpread({
      default: function _default() {
        return [_createVNode(ModalWrapper, _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
        }, omit(_this.getProps.wrapperProps, 'visible', 'height')), {}, {
          "onExtHeight": _this.handleExtHeight,
          "onHeightChange": _this.handleHeightChange
        }), _this.$slots)];
      }
    }, slots));
  }
});