SelectTrigger.js 5.6 KB

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