vue-admin-core/es/hooks/__shared__/useCorePopup.mjs

A Component Library for Vue 3

import { isVNode, ref, watch, defineComponent, createVNode, mergeProps } from 'vue';
import { ElButton } from 'element-plus';
import { isNum, isStr, isBool, isFn, applyMiddleware } from '@formily/shared';
import '../../formily/__builtins__/index.mjs';
import '../../formily/index.mjs';
import { isBoolean } from 'xe-utils';
import { isValidElement } from '../../formily/__builtins__/shared/utils.mjs';
import { loading } from '../../formily/__builtins__/shared/loading.mjs';
import { FormButtonGroup } from '../../formily/form-button-group/src/index.mjs';
import { resolveComponent } from '../../formily/__builtins__/shared/resolve-component.mjs';

function _isSlot(s) {
  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
}
const isPopupTitle = (props) => {
  return isNum(props) || isStr(props) || isBool(props) || isValidElement(props) || isFn(props) || isVNode(props);
};
const getPopupProps = (props) => {
  if (isPopupTitle(props)) {
    return {
      title: props
    };
  } else {
    return props;
  }
};
function useCorePopup(title, PopupComponent, content) {
  const visible = ref(false);
  const okLoading = ref(false);
  const cancelLoading = ref(false);
  const resetLoading = ref(false);
  let openMiddlewares = [];
  let confirmMiddlewares = [];
  let cancelMiddlewares = [];
  let resetMiddlewares = [];
  const dialogProps = ref(getPopupProps(title));
  const initPopupProps = {
    ...dialogProps.value
  };
  watch(visible, (value) => {
    if (!value) {
      openMiddlewares = [];
      confirmMiddlewares = [];
      cancelMiddlewares = [];
      resetMiddlewares = [];
    }
  });
  const dialog = {
    forOpen: (middleware) => {
      if (isFn(middleware)) {
        openMiddlewares.push(middleware);
      }
      return dialog;
    },
    forConfirm: (middleware) => {
      if (isFn(middleware)) {
        confirmMiddlewares.push(middleware);
      }
      return dialog;
    },
    forCancel: (middleware) => {
      if (isFn(middleware)) {
        cancelMiddlewares.push(middleware);
      }
      return dialog;
    },
    forReset: (middleware) => {
      if (isFn(middleware)) {
        resetMiddlewares.push(middleware);
      }
      return dialog;
    },
    reject: async (props) => {
      cancelLoading.value = true;
      const flag = await loading(dialogProps.value.loadingText, () => applyMiddleware(props, cancelMiddlewares));
      cancelLoading.value = false;
      if (dialogProps.value.onCancel) {
        dialogProps.value.onCancel(Boolean(flag), () => {
          dialog.close();
        });
      } else {
        if (isBoolean(flag) && flag === false)
          return;
        dialog.close();
      }
    },
    resolve: async (props) => {
      var _a, _b;
      okLoading.value = true;
      const flag = await applyMiddleware(props, confirmMiddlewares);
      okLoading.value = false;
      if (dialogProps.value.onOK) {
        (_b = (_a = dialogProps.value) == null ? void 0 : _a.onOK) == null ? void 0 : _b.call(_a, Boolean(flag), () => {
          dialog.close();
        });
      } else {
        if (isBoolean(flag) && flag === false)
          return;
        dialog.close();
      }
    },
    reset: async (props) => {
      resetLoading.value = true;
      await applyMiddleware(props, resetMiddlewares);
      resetLoading.value = false;
    },
    beforeOpen: async (props) => {
      const result = await loading(dialogProps.value.loadingText, () => applyMiddleware(props, openMiddlewares));
      return result;
    },
    open: async (props) => {
      const result = await dialog.beforeOpen();
      dialogProps.value = {
        ...initPopupProps,
        ...props ? getPopupProps(props) : {}
      };
      visible.value = true;
      return result;
    },
    close: () => {
      visible.value = false;
    }
  };
  const Footer = defineComponent({
    name: "PopupFooter",
    setup() {
      return () => {
        const {
          cancelButtonProps,
          cancelText,
          okButtonProps,
          okText,
          addonAfter,
          addonBefore,
          addonCenter,
          cancelButtonHidden,
          okButtonHidden
        } = dialogProps.value;
        return createVNode(FormButtonGroup, {
          "align": "right"
        }, {
          default: () => [addonBefore, !cancelButtonHidden && createVNode(ElButton, mergeProps(cancelButtonProps, {
            "loading": cancelLoading.value,
            "onClick": (e) => {
              dialog.reject();
            }
          }), {
            default: () => [cancelText || "\u53D6\u6D88"]
          }), addonCenter, !okButtonHidden && createVNode(ElButton, mergeProps({
            "type": "primary"
          }, okButtonProps, {
            "loading": okLoading.value,
            "onClick": (e) => {
              dialog.resolve();
            }
          }), {
            default: () => [okText || "\u786E\u5B9A"]
          }), addonAfter]
        });
      };
    }
  });
  const ContextHolder = defineComponent({
    name: "PopupContextHolder",
    setup() {
      return () => {
        const {
          footer = true,
          title: title2,
          ...reset
        } = dialogProps.value;
        let curestTitle = title2;
        const _slots = {
          default: () => resolveComponent(content)
        };
        if (typeof title2 !== "string") {
          _slots.header = () => resolveComponent(title2);
          curestTitle = "";
        }
        if (isBool(footer) && footer) {
          _slots.footer = () => resolveComponent(createVNode(Footer, dialogProps.value, null));
        }
        if (isFn(footer) || isValidElement(footer)) {
          _slots.footer = resolveComponent(footer);
        }
        return createVNode(PopupComponent, mergeProps(reset, {
          "title": curestTitle,
          "modelValue": visible.value,
          "onUpdate:modelValue": (v) => visible.value = v
        }), _isSlot(_slots) ? _slots : {
          default: () => [_slots]
        });
      };
    }
  });
  return [dialog, ContextHolder];
}

export { getPopupProps, isPopupTitle, useCorePopup };
//# sourceMappingURL=useCorePopup.mjs.map