index.js 4.1 KB

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