Popup.js 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. var __defProp = Object.defineProperty;
  2. var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
  3. var __getOwnPropNames = Object.getOwnPropertyNames;
  4. var __hasOwnProp = Object.prototype.hasOwnProperty;
  5. var __export = (target, all) => {
  6. for (var name2 in all)
  7. __defProp(target, name2, { get: all[name2], enumerable: true });
  8. };
  9. var __copyProps = (to, from, except, desc) => {
  10. if (from && typeof from === "object" || typeof from === "function") {
  11. for (let key of __getOwnPropNames(from))
  12. if (!__hasOwnProp.call(to, key) && key !== except)
  13. __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  14. }
  15. return to;
  16. };
  17. var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
  18. var stdin_exports = {};
  19. __export(stdin_exports, {
  20. default: () => stdin_default,
  21. popupProps: () => popupProps
  22. });
  23. module.exports = __toCommonJS(stdin_exports);
  24. var import_vue = require("vue");
  25. var import_vue2 = require("vue");
  26. var import_shared = require("./shared");
  27. var import_utils = require("../utils");
  28. var import_use = require("@vant/use");
  29. var import_use_expose = require("../composables/use-expose");
  30. var import_use_lock_scroll = require("../composables/use-lock-scroll");
  31. var import_use_lazy_render = require("../composables/use-lazy-render");
  32. var import_on_popup_reopen = require("../composables/on-popup-reopen");
  33. var import_use_global_z_index = require("../composables/use-global-z-index");
  34. var import_icon = require("../icon");
  35. var import_overlay = require("../overlay");
  36. const popupProps = (0, import_utils.extend)({}, import_shared.popupSharedProps, {
  37. round: Boolean,
  38. position: (0, import_utils.makeStringProp)("center"),
  39. closeIcon: (0, import_utils.makeStringProp)("cross"),
  40. closeable: Boolean,
  41. transition: String,
  42. iconPrefix: String,
  43. closeOnPopstate: Boolean,
  44. closeIconPosition: (0, import_utils.makeStringProp)("top-right"),
  45. safeAreaInsetTop: Boolean,
  46. safeAreaInsetBottom: Boolean
  47. });
  48. const [name, bem] = (0, import_utils.createNamespace)("popup");
  49. var stdin_default = (0, import_vue2.defineComponent)({
  50. name,
  51. inheritAttrs: false,
  52. props: popupProps,
  53. emits: ["open", "close", "opened", "closed", "keydown", "update:show", "clickOverlay", "clickCloseIcon"],
  54. setup(props, {
  55. emit,
  56. attrs,
  57. slots
  58. }) {
  59. let opened;
  60. let shouldReopen;
  61. const zIndex = (0, import_vue2.ref)();
  62. const popupRef = (0, import_vue2.ref)();
  63. const lazyRender = (0, import_use_lazy_render.useLazyRender)(() => props.show || !props.lazyRender);
  64. const style = (0, import_vue2.computed)(() => {
  65. const style2 = {
  66. zIndex: zIndex.value
  67. };
  68. if ((0, import_utils.isDef)(props.duration)) {
  69. const key = props.position === "center" ? "animationDuration" : "transitionDuration";
  70. style2[key] = `${props.duration}s`;
  71. }
  72. return style2;
  73. });
  74. const open = () => {
  75. if (!opened) {
  76. opened = true;
  77. zIndex.value = props.zIndex !== void 0 ? +props.zIndex : (0, import_use_global_z_index.useGlobalZIndex)();
  78. emit("open");
  79. }
  80. };
  81. const close = () => {
  82. if (opened) {
  83. (0, import_utils.callInterceptor)(props.beforeClose, {
  84. done() {
  85. opened = false;
  86. emit("close");
  87. emit("update:show", false);
  88. }
  89. });
  90. }
  91. };
  92. const onClickOverlay = (event) => {
  93. emit("clickOverlay", event);
  94. if (props.closeOnClickOverlay) {
  95. close();
  96. }
  97. };
  98. const renderOverlay = () => {
  99. if (props.overlay) {
  100. return (0, import_vue.createVNode)(import_overlay.Overlay, {
  101. "show": props.show,
  102. "class": props.overlayClass,
  103. "zIndex": zIndex.value,
  104. "duration": props.duration,
  105. "customStyle": props.overlayStyle,
  106. "role": props.closeOnClickOverlay ? "button" : void 0,
  107. "tabindex": props.closeOnClickOverlay ? 0 : void 0,
  108. "onClick": onClickOverlay
  109. }, {
  110. default: slots["overlay-content"]
  111. });
  112. }
  113. };
  114. const onClickCloseIcon = (event) => {
  115. emit("clickCloseIcon", event);
  116. close();
  117. };
  118. const renderCloseIcon = () => {
  119. if (props.closeable) {
  120. return (0, import_vue.createVNode)(import_icon.Icon, {
  121. "role": "button",
  122. "tabindex": 0,
  123. "name": props.closeIcon,
  124. "class": [bem("close-icon", props.closeIconPosition), import_utils.HAPTICS_FEEDBACK],
  125. "classPrefix": props.iconPrefix,
  126. "onClick": onClickCloseIcon
  127. }, null);
  128. }
  129. };
  130. const onOpened = () => emit("opened");
  131. const onClosed = () => emit("closed");
  132. const onKeydown = (event) => emit("keydown", event);
  133. const renderPopup = lazyRender(() => {
  134. var _a;
  135. const {
  136. round,
  137. position,
  138. safeAreaInsetTop,
  139. safeAreaInsetBottom
  140. } = props;
  141. return (0, import_vue.withDirectives)((0, import_vue.createVNode)("div", (0, import_vue.mergeProps)({
  142. "ref": popupRef,
  143. "style": style.value,
  144. "role": "dialog",
  145. "tabindex": 0,
  146. "class": [bem({
  147. round,
  148. [position]: position
  149. }), {
  150. "van-safe-area-top": safeAreaInsetTop,
  151. "van-safe-area-bottom": safeAreaInsetBottom
  152. }],
  153. "onKeydown": onKeydown
  154. }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots), renderCloseIcon()]), [[import_vue.vShow, props.show]]);
  155. });
  156. const renderTransition = () => {
  157. const {
  158. position,
  159. transition,
  160. transitionAppear
  161. } = props;
  162. const name2 = position === "center" ? "van-fade" : `van-popup-slide-${position}`;
  163. return (0, import_vue.createVNode)(import_vue2.Transition, {
  164. "name": transition || name2,
  165. "appear": transitionAppear,
  166. "onAfterEnter": onOpened,
  167. "onAfterLeave": onClosed
  168. }, {
  169. default: renderPopup
  170. });
  171. };
  172. (0, import_vue2.watch)(() => props.show, (show) => {
  173. if (show && !opened) {
  174. open();
  175. if (attrs.tabindex === 0) {
  176. (0, import_vue2.nextTick)(() => {
  177. var _a;
  178. (_a = popupRef.value) == null ? void 0 : _a.focus();
  179. });
  180. }
  181. }
  182. if (!show && opened) {
  183. opened = false;
  184. emit("close");
  185. }
  186. });
  187. (0, import_use_expose.useExpose)({
  188. popupRef
  189. });
  190. (0, import_use_lock_scroll.useLockScroll)(popupRef, () => props.show && props.lockScroll);
  191. (0, import_use.useEventListener)("popstate", () => {
  192. if (props.closeOnPopstate) {
  193. close();
  194. shouldReopen = false;
  195. }
  196. });
  197. (0, import_vue2.onMounted)(() => {
  198. if (props.show) {
  199. open();
  200. }
  201. });
  202. (0, import_vue2.onActivated)(() => {
  203. if (shouldReopen) {
  204. emit("update:show", true);
  205. shouldReopen = false;
  206. }
  207. });
  208. (0, import_vue2.onDeactivated)(() => {
  209. if (props.show && props.teleport) {
  210. close();
  211. shouldReopen = true;
  212. }
  213. });
  214. (0, import_vue2.provide)(import_on_popup_reopen.POPUP_TOGGLE_KEY, () => props.show);
  215. return () => {
  216. if (props.teleport) {
  217. return (0, import_vue.createVNode)(import_vue2.Teleport, {
  218. "to": props.teleport
  219. }, {
  220. default: () => [renderOverlay(), renderTransition()]
  221. });
  222. }
  223. return (0, import_vue.createVNode)(import_vue.Fragment, null, [renderOverlay(), renderTransition()]);
  224. };
  225. }
  226. });