Popover.js 6.4 KB

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