index.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. exports.__esModule = true;
  4. exports.default = void 0;
  5. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  6. var _popperjs = require("@vant/popperjs");
  7. var _utils = require("../utils");
  8. var _constant = require("../utils/constant");
  9. var _clickOutside = require("../mixins/click-outside");
  10. var _icon = _interopRequireDefault(require("../icon"));
  11. var _popup = _interopRequireDefault(require("../popup"));
  12. // Mixins
  13. // Components
  14. var _createNamespace = (0, _utils.createNamespace)('popover'),
  15. createComponent = _createNamespace[0],
  16. bem = _createNamespace[1];
  17. var _default2 = createComponent({
  18. mixins: [(0, _clickOutside.ClickOutsideMixin)({
  19. event: 'touchstart',
  20. method: 'onClickOutside'
  21. })],
  22. props: {
  23. value: Boolean,
  24. trigger: String,
  25. overlay: Boolean,
  26. offset: {
  27. type: Array,
  28. default: function _default() {
  29. return [0, 8];
  30. }
  31. },
  32. theme: {
  33. type: String,
  34. default: 'light'
  35. },
  36. actions: {
  37. type: Array,
  38. default: function _default() {
  39. return [];
  40. }
  41. },
  42. placement: {
  43. type: String,
  44. default: 'bottom'
  45. },
  46. getContainer: {
  47. type: [String, Function],
  48. default: 'body'
  49. },
  50. closeOnClickAction: {
  51. type: Boolean,
  52. default: true
  53. }
  54. },
  55. watch: {
  56. value: 'updateLocation',
  57. placement: 'updateLocation'
  58. },
  59. mounted: function mounted() {
  60. this.updateLocation();
  61. },
  62. beforeDestroy: function beforeDestroy() {
  63. if (this.popper) {
  64. if (!_utils.isServer) {
  65. window.removeEventListener('animationend', this.updateLocation);
  66. window.removeEventListener('transitionend', this.updateLocation);
  67. }
  68. this.popper.destroy();
  69. this.popper = null;
  70. }
  71. },
  72. methods: {
  73. createPopper: function createPopper() {
  74. var popper = (0, _popperjs.createPopper)(this.$refs.wrapper, this.$refs.popover.$el, {
  75. placement: this.placement,
  76. modifiers: [{
  77. name: 'computeStyles',
  78. options: {
  79. adaptive: false,
  80. gpuAcceleration: false
  81. }
  82. }, (0, _extends2.default)({}, _popperjs.offsetModifier, {
  83. options: {
  84. offset: this.offset
  85. }
  86. })]
  87. });
  88. if (!_utils.isServer) {
  89. window.addEventListener('animationend', this.updateLocation);
  90. window.addEventListener('transitionend', this.updateLocation);
  91. }
  92. return popper;
  93. },
  94. updateLocation: function updateLocation() {
  95. var _this = this;
  96. this.$nextTick(function () {
  97. if (!_this.value) {
  98. return;
  99. }
  100. if (!_this.popper) {
  101. _this.popper = _this.createPopper();
  102. } else {
  103. _this.popper.setOptions({
  104. placement: _this.placement
  105. });
  106. }
  107. });
  108. },
  109. renderAction: function renderAction(action, index) {
  110. var _this2 = this;
  111. var h = this.$createElement;
  112. var icon = action.icon,
  113. text = action.text,
  114. disabled = action.disabled,
  115. className = action.className;
  116. return h("div", {
  117. "attrs": {
  118. "role": "menuitem"
  119. },
  120. "class": [bem('action', {
  121. disabled: disabled,
  122. 'with-icon': icon
  123. }), className],
  124. "on": {
  125. "click": function click() {
  126. return _this2.onClickAction(action, index);
  127. }
  128. }
  129. }, [icon && h(_icon.default, {
  130. "attrs": {
  131. "name": icon
  132. },
  133. "class": bem('action-icon')
  134. }), h("div", {
  135. "class": [bem('action-text'), _constant.BORDER_BOTTOM]
  136. }, [text])]);
  137. },
  138. onToggle: function onToggle(value) {
  139. this.$emit('input', value);
  140. },
  141. onClickWrapper: function onClickWrapper() {
  142. if (this.trigger === 'click') {
  143. this.onToggle(!this.value);
  144. }
  145. },
  146. onTouchstart: function onTouchstart(event) {
  147. event.stopPropagation();
  148. this.$emit('touchstart', event);
  149. },
  150. onClickAction: function onClickAction(action, index) {
  151. if (action.disabled) {
  152. return;
  153. }
  154. this.$emit('select', action, index);
  155. if (this.closeOnClickAction) {
  156. this.$emit('input', false);
  157. }
  158. },
  159. onClickOutside: function onClickOutside() {
  160. this.$emit('input', false);
  161. },
  162. onOpen: function onOpen() {
  163. this.$emit('open');
  164. },
  165. /* istanbul ignore next */
  166. onOpened: function onOpened() {
  167. this.$emit('opened');
  168. },
  169. onClose: function onClose() {
  170. this.$emit('close');
  171. },
  172. /* istanbul ignore next */
  173. onClosed: function onClosed() {
  174. this.$emit('closed');
  175. }
  176. },
  177. render: function render() {
  178. var h = arguments[0];
  179. return h("span", {
  180. "ref": "wrapper",
  181. "class": bem('wrapper'),
  182. "on": {
  183. "click": this.onClickWrapper
  184. }
  185. }, [h(_popup.default, {
  186. "ref": "popover",
  187. "attrs": {
  188. "value": this.value,
  189. "overlay": this.overlay,
  190. "position": null,
  191. "transition": "van-popover-zoom",
  192. "lockScroll": false,
  193. "getContainer": this.getContainer
  194. },
  195. "class": bem([this.theme]),
  196. "on": {
  197. "open": this.onOpen,
  198. "close": this.onClose,
  199. "input": this.onToggle,
  200. "opened": this.onOpened,
  201. "closed": this.onClosed
  202. },
  203. "nativeOn": {
  204. "touchstart": this.onTouchstart
  205. }
  206. }, [h("div", {
  207. "class": bem('arrow')
  208. }), h("div", {
  209. "class": bem('content'),
  210. "attrs": {
  211. "role": "menu"
  212. }
  213. }, [this.slots('default') || this.actions.map(this.renderAction)])]), this.slots('reference')]);
  214. }
  215. });
  216. exports.default = _default2;