9baa41114f73f2cc528920d5ea6c090e7b3c6413da6c718abe95edea45902c894abed3a7d096dbe6a895fbc37c64838319c92a8116eda93ec31866598ff9e4 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var core = require('@vueuse/core');
  5. var constants = require('./constants.js');
  6. var index$3 = require('../../../hooks/use-lockscreen/index.js');
  7. var index = require('../../../hooks/use-z-index/index.js');
  8. var index$1 = require('../../../hooks/use-id/index.js');
  9. var useGlobalConfig = require('../../config-provider/src/hooks/use-global-config.js');
  10. var index$2 = require('../../../hooks/use-namespace/index.js');
  11. var style = require('../../../utils/dom/style.js');
  12. var shared = require('@vue/shared');
  13. var event = require('../../../constants/event.js');
  14. const useDialog = (props, targetRef) => {
  15. var _a;
  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((_a = props.zIndex) != null ? _a : nextZIndex());
  26. let openTimer = void 0;
  27. let closeTimer = void 0;
  28. const config = useGlobalConfig.useGlobalConfig();
  29. const namespace = vue.computed(() => {
  30. var _a2, _b;
  31. return (_b = (_a2 = config.value) == null ? void 0 : _a2.namespace) != null ? _b : index$2.defaultNamespace;
  32. });
  33. const globalConfig = vue.computed(() => {
  34. var _a2;
  35. return (_a2 = config.value) == null ? void 0 : _a2.dialog;
  36. });
  37. const style$1 = vue.computed(() => {
  38. const style2 = {};
  39. const varPrefix = `--${namespace.value}-dialog`;
  40. if (!props.fullscreen) {
  41. if (props.top) {
  42. style2[`${varPrefix}-margin-top`] = props.top;
  43. }
  44. if (props.width) {
  45. style2[`${varPrefix}-width`] = style.addUnit(props.width);
  46. }
  47. }
  48. return style2;
  49. });
  50. const _draggable = vue.computed(() => {
  51. var _a2, _b, _c;
  52. return ((_c = (_b = props.draggable) != null ? _b : (_a2 = globalConfig.value) == null ? void 0 : _a2.draggable) != null ? _c : false) && !props.fullscreen;
  53. });
  54. const _alignCenter = vue.computed(() => {
  55. var _a2, _b, _c;
  56. return (_c = (_b = props.alignCenter) != null ? _b : (_a2 = globalConfig.value) == null ? void 0 : _a2.alignCenter) != null ? _c : false;
  57. });
  58. const _overflow = vue.computed(() => {
  59. var _a2, _b, _c;
  60. return (_c = (_b = props.overflow) != null ? _b : (_a2 = globalConfig.value) == null ? void 0 : _a2.overflow) != null ? _c : false;
  61. });
  62. const overlayDialogStyle = vue.computed(() => {
  63. if (_alignCenter.value) {
  64. return { display: "flex" };
  65. }
  66. return {};
  67. });
  68. const transitionConfig = vue.computed(() => {
  69. var _a2, _b, _c;
  70. const transition = (_c = (_b = props.transition) != null ? _b : (_a2 = globalConfig.value) == null ? void 0 : _a2.transition) != null ? _c : constants.DEFAULT_DIALOG_TRANSITION;
  71. const baseConfig = {
  72. name: transition,
  73. onAfterEnter: afterEnter,
  74. onBeforeLeave: beforeLeave,
  75. onAfterLeave: afterLeave
  76. };
  77. if (shared.isObject(transition)) {
  78. const config2 = { ...transition };
  79. const _mergeHook = (userHook, defaultHook) => {
  80. return (el) => {
  81. if (shared.isArray(userHook)) {
  82. userHook.forEach((fn) => {
  83. if (shared.isFunction(fn))
  84. fn(el);
  85. });
  86. } else if (shared.isFunction(userHook)) {
  87. userHook(el);
  88. }
  89. defaultHook();
  90. };
  91. };
  92. config2.onAfterEnter = _mergeHook(config2.onAfterEnter, afterEnter);
  93. config2.onBeforeLeave = _mergeHook(config2.onBeforeLeave, beforeLeave);
  94. config2.onAfterLeave = _mergeHook(config2.onAfterLeave, afterLeave);
  95. if (!config2.name) {
  96. config2.name = constants.DEFAULT_DIALOG_TRANSITION;
  97. }
  98. return config2;
  99. }
  100. return baseConfig;
  101. });
  102. function afterEnter() {
  103. emit("opened");
  104. }
  105. function afterLeave() {
  106. emit("closed");
  107. emit(event.UPDATE_MODEL_EVENT, false);
  108. if (props.destroyOnClose) {
  109. rendered.value = false;
  110. }
  111. }
  112. function beforeLeave() {
  113. emit("close");
  114. }
  115. function open() {
  116. closeTimer == null ? void 0 : closeTimer();
  117. openTimer == null ? void 0 : openTimer();
  118. if (props.openDelay && props.openDelay > 0) {
  119. ({ stop: openTimer } = core.useTimeoutFn(() => doOpen(), props.openDelay));
  120. } else {
  121. doOpen();
  122. }
  123. }
  124. function close() {
  125. openTimer == null ? void 0 : openTimer();
  126. closeTimer == null ? void 0 : closeTimer();
  127. if (props.closeDelay && props.closeDelay > 0) {
  128. ({ stop: closeTimer } = core.useTimeoutFn(() => doClose(), props.closeDelay));
  129. } else {
  130. doClose();
  131. }
  132. }
  133. function handleClose() {
  134. function hide(shouldCancel) {
  135. if (shouldCancel)
  136. return;
  137. closed.value = true;
  138. visible.value = false;
  139. }
  140. if (props.beforeClose) {
  141. props.beforeClose(hide);
  142. } else {
  143. close();
  144. }
  145. }
  146. function onModalClick() {
  147. if (props.closeOnClickModal) {
  148. handleClose();
  149. }
  150. }
  151. function doOpen() {
  152. if (!core.isClient)
  153. return;
  154. visible.value = true;
  155. }
  156. function doClose() {
  157. visible.value = false;
  158. }
  159. function onOpenAutoFocus() {
  160. emit("openAutoFocus");
  161. }
  162. function onCloseAutoFocus() {
  163. emit("closeAutoFocus");
  164. }
  165. function onFocusoutPrevented(event) {
  166. var _a2;
  167. if (((_a2 = event.detail) == null ? void 0 : _a2.focusReason) === "pointer") {
  168. event.preventDefault();
  169. }
  170. }
  171. if (props.lockScroll) {
  172. index$3.useLockscreen(visible);
  173. }
  174. function onCloseRequested() {
  175. if (props.closeOnPressEscape) {
  176. handleClose();
  177. }
  178. }
  179. vue.watch(() => props.zIndex, () => {
  180. var _a2;
  181. zIndex.value = (_a2 = props.zIndex) != null ? _a2 : nextZIndex();
  182. });
  183. vue.watch(() => props.modelValue, (val) => {
  184. var _a2;
  185. if (val) {
  186. closed.value = false;
  187. open();
  188. rendered.value = true;
  189. zIndex.value = (_a2 = props.zIndex) != null ? _a2 : nextZIndex();
  190. vue.nextTick(() => {
  191. emit("open");
  192. if (targetRef.value) {
  193. targetRef.value.parentElement.scrollTop = 0;
  194. targetRef.value.parentElement.scrollLeft = 0;
  195. targetRef.value.scrollTop = 0;
  196. }
  197. });
  198. } else {
  199. if (visible.value) {
  200. close();
  201. }
  202. }
  203. });
  204. vue.watch(() => props.fullscreen, (val) => {
  205. if (!targetRef.value)
  206. return;
  207. if (val) {
  208. lastPosition = targetRef.value.style.transform;
  209. targetRef.value.style.transform = "";
  210. } else {
  211. targetRef.value.style.transform = lastPosition;
  212. }
  213. });
  214. vue.onMounted(() => {
  215. if (props.modelValue) {
  216. visible.value = true;
  217. rendered.value = true;
  218. open();
  219. }
  220. });
  221. return {
  222. afterEnter,
  223. afterLeave,
  224. beforeLeave,
  225. handleClose,
  226. onModalClick,
  227. close,
  228. doClose,
  229. onOpenAutoFocus,
  230. onCloseAutoFocus,
  231. onCloseRequested,
  232. onFocusoutPrevented,
  233. titleId,
  234. bodyId,
  235. closed,
  236. style: style$1,
  237. overlayDialogStyle,
  238. rendered,
  239. visible,
  240. zIndex,
  241. transitionConfig,
  242. _draggable,
  243. _alignCenter,
  244. _overflow
  245. };
  246. };
  247. exports.useDialog = useDialog;
  248. //# sourceMappingURL=use-dialog.js.map