index.js 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. exports.__esModule = true;
  4. exports.default = void 0;
  5. var _utils = require("../utils");
  6. var _event = require("../utils/dom/event");
  7. var _portal = require("../mixins/portal");
  8. var _relation = require("../mixins/relation");
  9. var _cell = _interopRequireDefault(require("../cell"));
  10. var _icon = _interopRequireDefault(require("../icon"));
  11. var _popup = _interopRequireDefault(require("../popup"));
  12. // Utils
  13. // Mixins
  14. // Components
  15. var _createNamespace = (0, _utils.createNamespace)('dropdown-item'),
  16. createComponent = _createNamespace[0],
  17. bem = _createNamespace[1];
  18. var _default2 = createComponent({
  19. mixins: [(0, _portal.PortalMixin)({
  20. ref: 'wrapper'
  21. }), (0, _relation.ChildrenMixin)('vanDropdownMenu')],
  22. props: {
  23. value: null,
  24. title: String,
  25. disabled: Boolean,
  26. titleClass: String,
  27. options: {
  28. type: Array,
  29. default: function _default() {
  30. return [];
  31. }
  32. },
  33. lazyRender: {
  34. type: Boolean,
  35. default: true
  36. }
  37. },
  38. data: function data() {
  39. return {
  40. transition: true,
  41. showPopup: false,
  42. showWrapper: false
  43. };
  44. },
  45. computed: {
  46. displayTitle: function displayTitle() {
  47. var _this = this;
  48. if (this.title) {
  49. return this.title;
  50. }
  51. var match = this.options.filter(function (option) {
  52. return option.value === _this.value;
  53. });
  54. return match.length ? match[0].text : '';
  55. }
  56. },
  57. watch: {
  58. showPopup: function showPopup(val) {
  59. this.bindScroll(val);
  60. }
  61. },
  62. beforeCreate: function beforeCreate() {
  63. var _this2 = this;
  64. var createEmitter = function createEmitter(eventName) {
  65. return function () {
  66. return _this2.$emit(eventName);
  67. };
  68. };
  69. this.onOpen = createEmitter('open');
  70. this.onClose = createEmitter('close');
  71. this.onOpened = createEmitter('opened');
  72. },
  73. methods: {
  74. // @exposed-api
  75. toggle: function toggle(show, options) {
  76. if (show === void 0) {
  77. show = !this.showPopup;
  78. }
  79. if (options === void 0) {
  80. options = {};
  81. }
  82. if (show === this.showPopup) {
  83. return;
  84. }
  85. this.transition = !options.immediate;
  86. this.showPopup = show;
  87. if (show) {
  88. this.parent.updateOffset();
  89. this.showWrapper = true;
  90. }
  91. },
  92. bindScroll: function bindScroll(bind) {
  93. var scroller = this.parent.scroller;
  94. var action = bind ? _event.on : _event.off;
  95. action(scroller, 'scroll', this.onScroll, true);
  96. },
  97. onScroll: function onScroll() {
  98. this.parent.updateOffset();
  99. },
  100. onClickWrapper: function onClickWrapper(event) {
  101. // prevent being identified as clicking outside and closed when use get-contaienr
  102. if (this.getContainer) {
  103. event.stopPropagation();
  104. }
  105. }
  106. },
  107. render: function render() {
  108. var _this3 = this;
  109. var h = arguments[0];
  110. var _this$parent = this.parent,
  111. zIndex = _this$parent.zIndex,
  112. offset = _this$parent.offset,
  113. overlay = _this$parent.overlay,
  114. duration = _this$parent.duration,
  115. direction = _this$parent.direction,
  116. activeColor = _this$parent.activeColor,
  117. closeOnClickOverlay = _this$parent.closeOnClickOverlay;
  118. var Options = this.options.map(function (option) {
  119. var active = option.value === _this3.value;
  120. return h(_cell.default, {
  121. "attrs": {
  122. "clickable": true,
  123. "icon": option.icon,
  124. "title": option.text
  125. },
  126. "key": option.value,
  127. "class": bem('option', {
  128. active: active
  129. }),
  130. "style": {
  131. color: active ? activeColor : ''
  132. },
  133. "on": {
  134. "click": function click() {
  135. _this3.showPopup = false;
  136. if (option.value !== _this3.value) {
  137. _this3.$emit('input', option.value);
  138. _this3.$emit('change', option.value);
  139. }
  140. }
  141. }
  142. }, [active && h(_icon.default, {
  143. "class": bem('icon'),
  144. "attrs": {
  145. "color": activeColor,
  146. "name": "success"
  147. }
  148. })]);
  149. });
  150. var style = {
  151. zIndex: zIndex
  152. };
  153. if (direction === 'down') {
  154. style.top = offset + "px";
  155. } else {
  156. style.bottom = offset + "px";
  157. }
  158. return h("div", [h("div", {
  159. "directives": [{
  160. name: "show",
  161. value: this.showWrapper
  162. }],
  163. "ref": "wrapper",
  164. "style": style,
  165. "class": bem([direction]),
  166. "on": {
  167. "click": this.onClickWrapper
  168. }
  169. }, [h(_popup.default, {
  170. "attrs": {
  171. "overlay": overlay,
  172. "position": direction === 'down' ? 'top' : 'bottom',
  173. "duration": this.transition ? duration : 0,
  174. "lazyRender": this.lazyRender,
  175. "overlayStyle": {
  176. position: 'absolute'
  177. },
  178. "closeOnClickOverlay": closeOnClickOverlay
  179. },
  180. "class": bem('content'),
  181. "on": {
  182. "open": this.onOpen,
  183. "close": this.onClose,
  184. "opened": this.onOpened,
  185. "closed": function closed() {
  186. _this3.showWrapper = false;
  187. _this3.$emit('closed');
  188. }
  189. },
  190. "model": {
  191. value: _this3.showPopup,
  192. callback: function callback($$v) {
  193. _this3.showPopup = $$v;
  194. }
  195. }
  196. }, [Options, this.slots('default')])])]);
  197. }
  198. });
  199. exports.default = _default2;