Popup.js 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  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_shared = require("./shared");
  26. var import_utils = require("../utils");
  27. var import_use = require("@vant/use");
  28. var import_use_expose = require("../composables/use-expose");
  29. var import_use_lock_scroll = require("../composables/use-lock-scroll");
  30. var import_use_lazy_render = require("../composables/use-lazy-render");
  31. var import_on_popup_reopen = require("../composables/on-popup-reopen");
  32. var import_use_global_z_index = require("../composables/use-global-z-index");
  33. var import_use_scope_id = require("../composables/use-scope-id");
  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_vue.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_vue.ref)();
  62. const popupRef = (0, import_vue.ref)();
  63. const lazyRender = (0, import_use_lazy_render.useLazyRender)(() => props.show || !props.lazyRender);
  64. const style = (0, import_vue.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, (0, import_vue.mergeProps)({
  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. }, (0, import_use_scope_id.useScopeId)(), {
  109. "onClick": onClickOverlay
  110. }), {
  111. default: slots["overlay-content"]
  112. });
  113. }
  114. };
  115. const onClickCloseIcon = (event) => {
  116. emit("clickCloseIcon", event);
  117. close();
  118. };
  119. const renderCloseIcon = () => {
  120. if (props.closeable) {
  121. return (0, import_vue.createVNode)(import_icon.Icon, {
  122. "role": "button",
  123. "tabindex": 0,
  124. "name": props.closeIcon,
  125. "class": [bem("close-icon", props.closeIconPosition), import_utils.HAPTICS_FEEDBACK],
  126. "classPrefix": props.iconPrefix,
  127. "onClick": onClickCloseIcon
  128. }, null);
  129. }
  130. };
  131. let timer;
  132. const onOpened = () => {
  133. if (timer) clearTimeout(timer);
  134. timer = setTimeout(() => {
  135. emit("opened");
  136. });
  137. };
  138. const onClosed = () => emit("closed");
  139. const onKeydown = (event) => emit("keydown", event);
  140. const renderPopup = lazyRender(() => {
  141. var _a;
  142. const {
  143. round,
  144. position,
  145. safeAreaInsetTop,
  146. safeAreaInsetBottom
  147. } = props;
  148. return (0, import_vue.withDirectives)((0, import_vue.createVNode)("div", (0, import_vue.mergeProps)({
  149. "ref": popupRef,
  150. "style": style.value,
  151. "role": "dialog",
  152. "tabindex": 0,
  153. "class": [bem({
  154. round,
  155. [position]: position
  156. }), {
  157. "van-safe-area-top": safeAreaInsetTop,
  158. "van-safe-area-bottom": safeAreaInsetBottom
  159. }],
  160. "onKeydown": onKeydown
  161. }, attrs, (0, import_use_scope_id.useScopeId)()), [(_a = slots.default) == null ? void 0 : _a.call(slots), renderCloseIcon()]), [[import_vue.vShow, props.show]]);
  162. });
  163. const renderTransition = () => {
  164. const {
  165. position,
  166. transition,
  167. transitionAppear
  168. } = props;
  169. const name2 = position === "center" ? "van-fade" : `van-popup-slide-${position}`;
  170. return (0, import_vue.createVNode)(import_vue.Transition, {
  171. "name": transition || name2,
  172. "appear": transitionAppear,
  173. "onAfterEnter": onOpened,
  174. "onAfterLeave": onClosed
  175. }, {
  176. default: renderPopup
  177. });
  178. };
  179. (0, import_vue.watch)(() => props.show, (show) => {
  180. if (show && !opened) {
  181. open();
  182. if (attrs.tabindex === 0) {
  183. (0, import_vue.nextTick)(() => {
  184. var _a;
  185. (_a = popupRef.value) == null ? void 0 : _a.focus();
  186. });
  187. }
  188. }
  189. if (!show && opened) {
  190. opened = false;
  191. emit("close");
  192. }
  193. });
  194. (0, import_use_expose.useExpose)({
  195. popupRef
  196. });
  197. (0, import_use_lock_scroll.useLockScroll)(popupRef, () => props.show && props.lockScroll);
  198. (0, import_use.useEventListener)("popstate", () => {
  199. if (props.closeOnPopstate) {
  200. close();
  201. shouldReopen = false;
  202. }
  203. });
  204. (0, import_vue.onMounted)(() => {
  205. if (props.show) {
  206. open();
  207. }
  208. });
  209. (0, import_vue.onActivated)(() => {
  210. if (shouldReopen) {
  211. emit("update:show", true);
  212. shouldReopen = false;
  213. }
  214. });
  215. (0, import_vue.onDeactivated)(() => {
  216. if (props.show && props.teleport) {
  217. close();
  218. shouldReopen = true;
  219. }
  220. });
  221. (0, import_vue.provide)(import_on_popup_reopen.POPUP_TOGGLE_KEY, () => props.show);
  222. return () => {
  223. if (props.teleport) {
  224. return (0, import_vue.createVNode)(import_vue.Teleport, {
  225. "to": props.teleport
  226. }, {
  227. default: () => [renderOverlay(), renderTransition()]
  228. });
  229. }
  230. return (0, import_vue.createVNode)(import_vue.Fragment, null, [renderOverlay(), renderTransition()]);
  231. };
  232. }
  233. });