Popover.js 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  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. popoverProps: () => popoverProps
  22. });
  23. module.exports = __toCommonJS(stdin_exports);
  24. var import_vue = require("vue");
  25. var import_popperjs = require("@vant/popperjs");
  26. var import_utils = require("../utils");
  27. var import_use = require("@vant/use");
  28. var import_use_scope_id = require("../composables/use-scope-id");
  29. var import_use_sync_prop_ref = require("../composables/use-sync-prop-ref");
  30. var import_icon = require("../icon");
  31. var import_popup = require("../popup");
  32. const [name, bem] = (0, import_utils.createNamespace)("popover");
  33. const popupProps = ["overlay", "duration", "teleport", "overlayStyle", "overlayClass", "closeOnClickOverlay"];
  34. const popoverProps = {
  35. show: Boolean,
  36. theme: (0, import_utils.makeStringProp)("light"),
  37. overlay: Boolean,
  38. actions: (0, import_utils.makeArrayProp)(),
  39. actionsDirection: (0, import_utils.makeStringProp)("vertical"),
  40. trigger: (0, import_utils.makeStringProp)("click"),
  41. duration: import_utils.numericProp,
  42. showArrow: import_utils.truthProp,
  43. placement: (0, import_utils.makeStringProp)("bottom"),
  44. iconPrefix: String,
  45. overlayClass: import_utils.unknownProp,
  46. overlayStyle: Object,
  47. closeOnClickAction: import_utils.truthProp,
  48. closeOnClickOverlay: import_utils.truthProp,
  49. closeOnClickOutside: import_utils.truthProp,
  50. offset: {
  51. type: Array,
  52. default: () => [0, 8]
  53. },
  54. teleport: {
  55. type: [String, Object],
  56. default: "body"
  57. }
  58. };
  59. var stdin_default = (0, import_vue.defineComponent)({
  60. name,
  61. props: popoverProps,
  62. emits: ["select", "touchstart", "update:show"],
  63. setup(props, {
  64. emit,
  65. slots,
  66. attrs
  67. }) {
  68. let popper;
  69. const popupRef = (0, import_vue.ref)();
  70. const wrapperRef = (0, import_vue.ref)();
  71. const popoverRef = (0, import_vue.ref)();
  72. const show = (0, import_use_sync_prop_ref.useSyncPropRef)(() => props.show, (value) => emit("update:show", value));
  73. const getPopoverOptions = () => ({
  74. placement: props.placement,
  75. modifiers: [{
  76. name: "computeStyles",
  77. options: {
  78. adaptive: false,
  79. gpuAcceleration: false
  80. }
  81. }, (0, import_utils.extend)({}, import_popperjs.offsetModifier, {
  82. options: {
  83. offset: props.offset
  84. }
  85. })]
  86. });
  87. const createPopperInstance = () => {
  88. if (wrapperRef.value && popoverRef.value) {
  89. return (0, import_popperjs.createPopper)(wrapperRef.value, popoverRef.value.popupRef.value, getPopoverOptions());
  90. }
  91. return null;
  92. };
  93. const updateLocation = () => {
  94. (0, import_vue.nextTick)(() => {
  95. if (!show.value) {
  96. return;
  97. }
  98. if (!popper) {
  99. popper = createPopperInstance();
  100. if (import_utils.inBrowser) {
  101. window.addEventListener("animationend", updateLocation);
  102. window.addEventListener("transitionend", updateLocation);
  103. }
  104. } else {
  105. popper.setOptions(getPopoverOptions());
  106. }
  107. });
  108. };
  109. const updateShow = (value) => {
  110. show.value = value;
  111. };
  112. const onClickWrapper = () => {
  113. if (props.trigger === "click") {
  114. show.value = !show.value;
  115. }
  116. };
  117. const onClickAction = (action, index) => {
  118. if (action.disabled) {
  119. return;
  120. }
  121. emit("select", action, index);
  122. if (props.closeOnClickAction) {
  123. show.value = false;
  124. }
  125. };
  126. const onClickAway = () => {
  127. if (show.value && props.closeOnClickOutside && (!props.overlay || props.closeOnClickOverlay)) {
  128. show.value = false;
  129. }
  130. };
  131. const renderActionContent = (action, index) => {
  132. if (slots.action) {
  133. return slots.action({
  134. action,
  135. index
  136. });
  137. }
  138. return [action.icon && (0, import_vue.createVNode)(import_icon.Icon, {
  139. "name": action.icon,
  140. "classPrefix": props.iconPrefix,
  141. "class": bem("action-icon")
  142. }, null), (0, import_vue.createVNode)("div", {
  143. "class": [bem("action-text"), {
  144. [import_utils.BORDER_BOTTOM]: props.actionsDirection === "vertical"
  145. }]
  146. }, [action.text])];
  147. };
  148. const renderAction = (action, index) => {
  149. const {
  150. icon,
  151. color,
  152. disabled,
  153. className
  154. } = action;
  155. return (0, import_vue.createVNode)("div", {
  156. "role": "menuitem",
  157. "class": [bem("action", {
  158. disabled,
  159. "with-icon": icon
  160. }), {
  161. [import_utils.BORDER_RIGHT]: props.actionsDirection === "horizontal"
  162. }, className],
  163. "style": {
  164. color
  165. },
  166. "tabindex": disabled ? void 0 : 0,
  167. "aria-disabled": disabled || void 0,
  168. "onClick": () => onClickAction(action, index)
  169. }, [renderActionContent(action, index)]);
  170. };
  171. (0, import_vue.onMounted)(() => {
  172. updateLocation();
  173. (0, import_vue.watchEffect)(() => {
  174. var _a;
  175. popupRef.value = (_a = popoverRef.value) == null ? void 0 : _a.popupRef.value;
  176. });
  177. });
  178. (0, import_vue.onBeforeUnmount)(() => {
  179. if (popper) {
  180. if (import_utils.inBrowser) {
  181. window.removeEventListener("animationend", updateLocation);
  182. window.removeEventListener("transitionend", updateLocation);
  183. }
  184. popper.destroy();
  185. popper = null;
  186. }
  187. });
  188. (0, import_vue.watch)(() => [show.value, props.offset, props.placement], updateLocation);
  189. (0, import_use.useClickAway)([wrapperRef, popupRef], onClickAway, {
  190. eventName: "touchstart"
  191. });
  192. return () => {
  193. var _a;
  194. return (0, import_vue.createVNode)(import_vue.Fragment, null, [(0, import_vue.createVNode)("span", {
  195. "ref": wrapperRef,
  196. "class": bem("wrapper"),
  197. "onClick": onClickWrapper
  198. }, [(_a = slots.reference) == null ? void 0 : _a.call(slots)]), (0, import_vue.createVNode)(import_popup.Popup, (0, import_vue.mergeProps)({
  199. "ref": popoverRef,
  200. "show": show.value,
  201. "class": bem([props.theme]),
  202. "position": "",
  203. "transition": "van-popover-zoom",
  204. "lockScroll": false,
  205. "onUpdate:show": updateShow
  206. }, attrs, (0, import_use_scope_id.useScopeId)(), (0, import_utils.pick)(props, popupProps)), {
  207. default: () => [props.showArrow && (0, import_vue.createVNode)("div", {
  208. "class": bem("arrow")
  209. }, null), (0, import_vue.createVNode)("div", {
  210. "role": "menu",
  211. "class": bem("content", props.actionsDirection)
  212. }, [slots.default ? slots.default() : props.actions.map(renderAction)])]
  213. })]);
  214. };
  215. }
  216. });