SelectTrigger.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = void 0;
  7. var _vue = require("vue");
  8. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  9. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  10. var _vcTrigger = _interopRequireDefault(require("../vc-trigger"));
  11. var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));
  12. var _classNames = _interopRequireDefault(require("../_util/classNames"));
  13. var __rest = void 0 && (void 0).__rest || function (s, e) {
  14. var t = {};
  15. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  16. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  17. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  18. }
  19. return t;
  20. };
  21. const getBuiltInPlacements = dropdownMatchSelectWidth => {
  22. // Enable horizontal overflow auto-adjustment when a custom dropdown width is provided
  23. const adjustX = dropdownMatchSelectWidth === true ? 0 : 1;
  24. return {
  25. bottomLeft: {
  26. points: ['tl', 'bl'],
  27. offset: [0, 4],
  28. overflow: {
  29. adjustX,
  30. adjustY: 1
  31. }
  32. },
  33. bottomRight: {
  34. points: ['tr', 'br'],
  35. offset: [0, 4],
  36. overflow: {
  37. adjustX,
  38. adjustY: 1
  39. }
  40. },
  41. topLeft: {
  42. points: ['bl', 'tl'],
  43. offset: [0, -4],
  44. overflow: {
  45. adjustX,
  46. adjustY: 1
  47. }
  48. },
  49. topRight: {
  50. points: ['br', 'tr'],
  51. offset: [0, -4],
  52. overflow: {
  53. adjustX,
  54. adjustY: 1
  55. }
  56. }
  57. };
  58. };
  59. const SelectTrigger = (0, _vue.defineComponent)({
  60. name: 'SelectTrigger',
  61. inheritAttrs: false,
  62. props: {
  63. dropdownAlign: Object,
  64. visible: {
  65. type: Boolean,
  66. default: undefined
  67. },
  68. disabled: {
  69. type: Boolean,
  70. default: undefined
  71. },
  72. dropdownClassName: String,
  73. dropdownStyle: _vueTypes.default.object,
  74. placement: String,
  75. empty: {
  76. type: Boolean,
  77. default: undefined
  78. },
  79. prefixCls: String,
  80. popupClassName: String,
  81. animation: String,
  82. transitionName: String,
  83. getPopupContainer: Function,
  84. dropdownRender: Function,
  85. containerWidth: Number,
  86. dropdownMatchSelectWidth: _vueTypes.default.oneOfType([Number, Boolean]).def(true),
  87. popupElement: _vueTypes.default.any,
  88. direction: String,
  89. getTriggerDOMNode: Function,
  90. onPopupVisibleChange: Function,
  91. onPopupMouseEnter: Function,
  92. onPopupFocusin: Function,
  93. onPopupFocusout: Function
  94. },
  95. setup(props, _ref) {
  96. let {
  97. slots,
  98. attrs,
  99. expose
  100. } = _ref;
  101. const builtInPlacements = (0, _vue.computed)(() => {
  102. const {
  103. dropdownMatchSelectWidth
  104. } = props;
  105. return getBuiltInPlacements(dropdownMatchSelectWidth);
  106. });
  107. const popupRef = (0, _vue.ref)();
  108. expose({
  109. getPopupElement: () => {
  110. return popupRef.value;
  111. }
  112. });
  113. return () => {
  114. const _a = (0, _extends2.default)((0, _extends2.default)({}, props), attrs),
  115. {
  116. empty = false
  117. } = _a,
  118. restProps = __rest(_a, ["empty"]);
  119. const {
  120. visible,
  121. dropdownAlign,
  122. prefixCls,
  123. popupElement,
  124. dropdownClassName,
  125. dropdownStyle,
  126. direction = 'ltr',
  127. placement,
  128. dropdownMatchSelectWidth,
  129. containerWidth,
  130. dropdownRender,
  131. animation,
  132. transitionName,
  133. getPopupContainer,
  134. getTriggerDOMNode,
  135. onPopupVisibleChange,
  136. onPopupMouseEnter,
  137. onPopupFocusin,
  138. onPopupFocusout
  139. } = restProps;
  140. const dropdownPrefixCls = `${prefixCls}-dropdown`;
  141. let popupNode = popupElement;
  142. if (dropdownRender) {
  143. popupNode = dropdownRender({
  144. menuNode: popupElement,
  145. props
  146. });
  147. }
  148. const mergedTransitionName = animation ? `${dropdownPrefixCls}-${animation}` : transitionName;
  149. const popupStyle = (0, _extends2.default)({
  150. minWidth: `${containerWidth}px`
  151. }, dropdownStyle);
  152. if (typeof dropdownMatchSelectWidth === 'number') {
  153. popupStyle.width = `${dropdownMatchSelectWidth}px`;
  154. } else if (dropdownMatchSelectWidth) {
  155. popupStyle.width = `${containerWidth}px`;
  156. }
  157. return (0, _vue.createVNode)(_vcTrigger.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
  158. "showAction": onPopupVisibleChange ? ['click'] : [],
  159. "hideAction": onPopupVisibleChange ? ['click'] : [],
  160. "popupPlacement": placement || (direction === 'rtl' ? 'bottomRight' : 'bottomLeft'),
  161. "builtinPlacements": builtInPlacements.value,
  162. "prefixCls": dropdownPrefixCls,
  163. "popupTransitionName": mergedTransitionName,
  164. "popupAlign": dropdownAlign,
  165. "popupVisible": visible,
  166. "getPopupContainer": getPopupContainer,
  167. "popupClassName": (0, _classNames.default)(dropdownClassName, {
  168. [`${dropdownPrefixCls}-empty`]: empty
  169. }),
  170. "popupStyle": popupStyle,
  171. "getTriggerDOMNode": getTriggerDOMNode,
  172. "onPopupVisibleChange": onPopupVisibleChange
  173. }), {
  174. default: slots.default,
  175. popup: () => (0, _vue.createVNode)("div", {
  176. "ref": popupRef,
  177. "onMouseenter": onPopupMouseEnter,
  178. "onFocusin": onPopupFocusin,
  179. "onFocusout": onPopupFocusout
  180. }, [popupNode])
  181. });
  182. };
  183. }
  184. });
  185. var _default = exports.default = SelectTrigger;