use-dialog.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var core = require('@vueuse/core');
  5. require('../../../hooks/index.js');
  6. require('../../../constants/index.js');
  7. require('../../../utils/index.js');
  8. var index = require('../../../hooks/use-z-index/index.js');
  9. var index$1 = require('../../../hooks/use-id/index.js');
  10. var index$2 = require('../../../hooks/use-global-config/index.js');
  11. var index$3 = require('../../../hooks/use-namespace/index.js');
  12. var style = require('../../../utils/dom/style.js');
  13. var event = require('../../../constants/event.js');
  14. var index$4 = require('../../../hooks/use-lockscreen/index.js');
  15. const useDialog = (props, targetRef) => {
  16. const instance = vue.getCurrentInstance();
  17. const emit = instance.emit;
  18. const { nextZIndex } = index.useZIndex();
  19. let lastPosition = "";
  20. const titleId = index$1.useId();
  21. const bodyId = index$1.useId();
  22. const visible = vue.ref(false);
  23. const closed = vue.ref(false);
  24. const rendered = vue.ref(false);
  25. const zIndex = vue.ref(props.zIndex || nextZIndex());
  26. let openTimer = void 0;
  27. let closeTimer = void 0;
  28. const namespace = index$2.useGlobalConfig("namespace", index$3.defaultNamespace);
  29. const style$1 = vue.computed(() => {
  30. const style2 = {};
  31. const varPrefix = `--${namespace.value}-dialog`;
  32. if (!props.fullscreen) {
  33. if (props.top) {
  34. style2[`${varPrefix}-margin-top`] = props.top;
  35. }
  36. if (props.width) {
  37. style2[`${varPrefix}-width`] = style.addUnit(props.width);
  38. }
  39. }
  40. return style2;
  41. });
  42. const overlayDialogStyle = vue.computed(() => {
  43. if (props.alignCenter) {
  44. return { display: "flex" };
  45. }
  46. return {};
  47. });
  48. function afterEnter() {
  49. emit("opened");
  50. }
  51. function afterLeave() {
  52. emit("closed");
  53. emit(event.UPDATE_MODEL_EVENT, false);
  54. if (props.destroyOnClose) {
  55. rendered.value = false;
  56. }
  57. }
  58. function beforeLeave() {
  59. emit("close");
  60. }
  61. function open() {
  62. closeTimer == null ? void 0 : closeTimer();
  63. openTimer == null ? void 0 : openTimer();
  64. if (props.openDelay && props.openDelay > 0) {
  65. ;
  66. ({ stop: openTimer } = core.useTimeoutFn(() => doOpen(), props.openDelay));
  67. } else {
  68. doOpen();
  69. }
  70. }
  71. function close() {
  72. openTimer == null ? void 0 : openTimer();
  73. closeTimer == null ? void 0 : closeTimer();
  74. if (props.closeDelay && props.closeDelay > 0) {
  75. ;
  76. ({ stop: closeTimer } = core.useTimeoutFn(() => doClose(), props.closeDelay));
  77. } else {
  78. doClose();
  79. }
  80. }
  81. function handleClose() {
  82. function hide(shouldCancel) {
  83. if (shouldCancel)
  84. return;
  85. closed.value = true;
  86. visible.value = false;
  87. }
  88. if (props.beforeClose) {
  89. props.beforeClose(hide);
  90. } else {
  91. close();
  92. }
  93. }
  94. function onModalClick() {
  95. if (props.closeOnClickModal) {
  96. handleClose();
  97. }
  98. }
  99. function doOpen() {
  100. if (!core.isClient)
  101. return;
  102. visible.value = true;
  103. }
  104. function doClose() {
  105. visible.value = false;
  106. }
  107. function onOpenAutoFocus() {
  108. emit("openAutoFocus");
  109. }
  110. function onCloseAutoFocus() {
  111. emit("closeAutoFocus");
  112. }
  113. function onFocusoutPrevented(event) {
  114. var _a;
  115. if (((_a = event.detail) == null ? void 0 : _a.focusReason) === "pointer") {
  116. event.preventDefault();
  117. }
  118. }
  119. if (props.lockScroll) {
  120. index$4.useLockscreen(visible);
  121. }
  122. function onCloseRequested() {
  123. if (props.closeOnPressEscape) {
  124. handleClose();
  125. }
  126. }
  127. vue.watch(() => props.modelValue, (val) => {
  128. if (val) {
  129. closed.value = false;
  130. open();
  131. rendered.value = true;
  132. zIndex.value = props.zIndex ? zIndex.value++ : nextZIndex();
  133. vue.nextTick(() => {
  134. emit("open");
  135. if (targetRef.value) {
  136. targetRef.value.scrollTop = 0;
  137. }
  138. });
  139. } else {
  140. if (visible.value) {
  141. close();
  142. }
  143. }
  144. });
  145. vue.watch(() => props.fullscreen, (val) => {
  146. if (!targetRef.value)
  147. return;
  148. if (val) {
  149. lastPosition = targetRef.value.style.transform;
  150. targetRef.value.style.transform = "";
  151. } else {
  152. targetRef.value.style.transform = lastPosition;
  153. }
  154. });
  155. vue.onMounted(() => {
  156. if (props.modelValue) {
  157. visible.value = true;
  158. rendered.value = true;
  159. open();
  160. }
  161. });
  162. return {
  163. afterEnter,
  164. afterLeave,
  165. beforeLeave,
  166. handleClose,
  167. onModalClick,
  168. close,
  169. doClose,
  170. onOpenAutoFocus,
  171. onCloseAutoFocus,
  172. onCloseRequested,
  173. onFocusoutPrevented,
  174. titleId,
  175. bodyId,
  176. closed,
  177. style: style$1,
  178. overlayDialogStyle,
  179. rendered,
  180. visible,
  181. zIndex
  182. };
  183. };
  184. exports.useDialog = useDialog;
  185. //# sourceMappingURL=use-dialog.js.map