index.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import { createVNode as _createVNode } from "vue";
  3. import { isRef, unref, computed, defineComponent, shallowRef, watch } from 'vue';
  4. import { withConfirm, withError, withInfo, withSuccess, withWarn } from '../confirm';
  5. import HookModal from './HookModal';
  6. import destroyFns from '../destroyFns';
  7. let uuid = 0;
  8. const ElementsHolder = defineComponent({
  9. name: 'ElementsHolder',
  10. inheritAttrs: false,
  11. setup(_, _ref) {
  12. let {
  13. expose
  14. } = _ref;
  15. const modals = shallowRef([]);
  16. const addModal = modal => {
  17. modals.value.push(modal);
  18. modals.value = modals.value.slice();
  19. return () => {
  20. modals.value = modals.value.filter(currentModal => currentModal !== modal);
  21. };
  22. };
  23. expose({
  24. addModal
  25. });
  26. return () => {
  27. return modals.value.map(modal => modal());
  28. };
  29. }
  30. });
  31. function useModal() {
  32. const holderRef = shallowRef(null);
  33. // ========================== Effect ==========================
  34. const actionQueue = shallowRef([]);
  35. watch(actionQueue, () => {
  36. if (actionQueue.value.length) {
  37. const cloneQueue = [...actionQueue.value];
  38. cloneQueue.forEach(action => {
  39. action();
  40. });
  41. actionQueue.value = [];
  42. }
  43. }, {
  44. immediate: true
  45. });
  46. // =========================== Hook ===========================
  47. const getConfirmFunc = withFunc => function hookConfirm(config) {
  48. var _a;
  49. uuid += 1;
  50. const open = shallowRef(true);
  51. const modalRef = shallowRef(null);
  52. const configRef = shallowRef(unref(config));
  53. const updateConfig = shallowRef({});
  54. watch(() => config, val => {
  55. updateAction(_extends(_extends({}, isRef(val) ? val.value : val), updateConfig.value));
  56. });
  57. const destroyAction = function () {
  58. open.value = false;
  59. for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
  60. args[_key] = arguments[_key];
  61. }
  62. const triggerCancel = args.some(param => param && param.triggerCancel);
  63. if (configRef.value.onCancel && triggerCancel) {
  64. configRef.value.onCancel(() => {}, ...args.slice(1));
  65. }
  66. };
  67. // eslint-disable-next-line prefer-const
  68. let closeFunc;
  69. const modal = () => _createVNode(HookModal, {
  70. "key": `modal-${uuid}`,
  71. "config": withFunc(configRef.value),
  72. "ref": modalRef,
  73. "open": open.value,
  74. "destroyAction": destroyAction,
  75. "afterClose": () => {
  76. closeFunc === null || closeFunc === void 0 ? void 0 : closeFunc();
  77. }
  78. }, null);
  79. closeFunc = (_a = holderRef.value) === null || _a === void 0 ? void 0 : _a.addModal(modal);
  80. if (closeFunc) {
  81. destroyFns.push(closeFunc);
  82. }
  83. const updateAction = newConfig => {
  84. configRef.value = _extends(_extends({}, configRef.value), newConfig);
  85. };
  86. const destroy = () => {
  87. if (modalRef.value) {
  88. destroyAction();
  89. } else {
  90. actionQueue.value = [...actionQueue.value, destroyAction];
  91. }
  92. };
  93. const update = newConfig => {
  94. updateConfig.value = newConfig;
  95. if (modalRef.value) {
  96. updateAction(newConfig);
  97. } else {
  98. actionQueue.value = [...actionQueue.value, () => updateAction(newConfig)];
  99. }
  100. };
  101. return {
  102. destroy,
  103. update
  104. };
  105. };
  106. const fns = computed(() => ({
  107. info: getConfirmFunc(withInfo),
  108. success: getConfirmFunc(withSuccess),
  109. error: getConfirmFunc(withError),
  110. warning: getConfirmFunc(withWarn),
  111. confirm: getConfirmFunc(withConfirm)
  112. }));
  113. const holderKey = Symbol('modalHolderKey');
  114. return [fns.value, () => _createVNode(ElementsHolder, {
  115. "key": holderKey,
  116. "ref": holderRef
  117. }, null)];
  118. }
  119. export default useModal;