SelectTrigger.js 5.2 KB

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