@fesjs/fes-design/es/modal/modalApi.js

fes-design for PC

import { render, createVNode } from 'vue';
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
import { isUndefined, isFunction, isNil } from 'lodash-es';
import Modal from './modal';

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
const forceProps = {
  forGlobal: true,
  // 标记是否API调用
  displayDirective: 'if',
  footer: true
};
const defaultConfig = {
  getContainer: () => document.body,
  width: 400,
  closable: false,
  useAnimation: true,
  maskClosable: false
};
let mergeConfig = defaultConfig;

/**
 * 创建 Model
 */
function create(type, config) {
  const div = document.createElement('div');
  const slots = {};
  const mergeProps = _objectSpread(_objectSpread({}, mergeConfig), {}, {
    show: true
  });
  let cbFuncEnd = false;
  function removeModal() {
    render(null, div);
  }
  function renderModal() {
    const props = _objectSpread(_objectSpread(_objectSpread({}, mergeProps), forceProps), {}, {
      type,
      onAfterLeave: removeModal
    });
    render(createVNode(Modal, props, slots), div);
  }
  async function handleCallBack(event, cbFunc) {
    if (cbFuncEnd) {
      return;
    }
    cbFuncEnd = true;
    try {
      if (isFunction(cbFunc)) {
        await cbFunc(event);
      }
      mergeProps.show = false;
      renderModal();
    } catch (error) {}
    cbFuncEnd = false;
  }
  function updateProps(options) {
    // 更新 props
    Object.assign(mergeProps, options || {});
    if (isUndefined(options.showCancel)) {
      mergeProps.showCancel = type === 'confirm';
    }
    mergeProps.onOk = event => handleCallBack(event, options.onOk);
    mergeProps.onCancel = event => handleCallBack(event, options.onCancel);

    // 更新 slots
    ['title', 'content', 'footer'].forEach(key => {
      const slot = options[key];
      // 如果有slot，则更新
      if (slot) {
        slots[key] = isFunction(slot) ? slot : () => slot;
      }
      // 如果不为空再更新
      if (key === 'content' && !isNil(slots.content)) {
        slots.default = slots.content;
        delete slots.content;
      }
      delete mergeProps[key];
    });
  }
  function update(options) {
    if (mergeProps.show) {
      // 展示时才能更新
      updateProps(options);
      renderModal();
    }
  }
  function destroy() {
    mergeProps.show = false;
    renderModal();
    // 确保清理所有引用
    Object.keys(mergeProps).forEach(key => {
      delete mergeProps[key];
    });
    Object.keys(slots).forEach(key => {
      delete slots[key];
    });
  }
  updateProps(config);
  renderModal();
  return {
    update,
    destroy
  };
}
var modalApi = {
  config(config) {
    if (config) {
      mergeConfig = _objectSpread(_objectSpread({}, defaultConfig), config);
    }
  },
  info: config => create('info', config),
  warning: config => create('warning', config),
  warn: config => create('warning', config),
  success: config => create('success', config),
  error: config => create('error', config),
  confirm: config => create('confirm', config)
};

export { modalApi as default };