Dropdown.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  3. import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
  4. var _excluded = ["prefixCls", "arrow", "showAction", "overlayStyle", "trigger", "placement", "align", "getPopupContainer", "transitionName", "animation", "overlayClassName"];
  5. import { resolveDirective as _resolveDirective, createVNode as _createVNode, Fragment as _Fragment } from "vue";
  6. import { computed, defineComponent, ref, watch } from 'vue';
  7. import PropTypes from '../_util/vue-types';
  8. import Trigger from '../vc-trigger';
  9. import placements from './placements';
  10. import { cloneElement } from '../_util/vnode';
  11. import classNames from '../_util/classNames';
  12. export default defineComponent({
  13. compatConfig: {
  14. MODE: 3
  15. },
  16. props: {
  17. minOverlayWidthMatchTrigger: {
  18. type: Boolean,
  19. default: undefined
  20. },
  21. arrow: {
  22. type: Boolean,
  23. default: false
  24. },
  25. prefixCls: PropTypes.string.def('rc-dropdown'),
  26. transitionName: String,
  27. overlayClassName: PropTypes.string.def(''),
  28. openClassName: String,
  29. animation: PropTypes.any,
  30. align: PropTypes.object,
  31. overlayStyle: {
  32. type: Object,
  33. default: undefined
  34. },
  35. placement: PropTypes.string.def('bottomLeft'),
  36. overlay: PropTypes.any,
  37. trigger: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]).def('hover'),
  38. alignPoint: {
  39. type: Boolean,
  40. default: undefined
  41. },
  42. showAction: PropTypes.array,
  43. hideAction: PropTypes.array,
  44. getPopupContainer: Function,
  45. visible: {
  46. type: Boolean,
  47. default: undefined
  48. },
  49. defaultVisible: {
  50. type: Boolean,
  51. default: false
  52. },
  53. mouseEnterDelay: PropTypes.number.def(0.15),
  54. mouseLeaveDelay: PropTypes.number.def(0.1)
  55. },
  56. emits: ['visibleChange', 'overlayClick'],
  57. slots: ['overlay'],
  58. setup: function setup(props, _ref) {
  59. var slots = _ref.slots,
  60. emit = _ref.emit,
  61. expose = _ref.expose;
  62. var triggerVisible = ref(!!props.visible);
  63. watch(function () {
  64. return props.visible;
  65. }, function (val) {
  66. if (val !== undefined) {
  67. triggerVisible.value = val;
  68. }
  69. });
  70. var triggerRef = ref();
  71. expose({
  72. triggerRef: triggerRef
  73. });
  74. var onClick = function onClick(e) {
  75. if (props.visible === undefined) {
  76. triggerVisible.value = false;
  77. }
  78. emit('overlayClick', e);
  79. };
  80. var onVisibleChange = function onVisibleChange(visible) {
  81. if (props.visible === undefined) {
  82. triggerVisible.value = visible;
  83. }
  84. emit('visibleChange', visible);
  85. };
  86. var getMenuElement = function getMenuElement() {
  87. var _slots$overlay;
  88. var overlayElement = (_slots$overlay = slots.overlay) === null || _slots$overlay === void 0 ? void 0 : _slots$overlay.call(slots);
  89. var extraOverlayProps = {
  90. prefixCls: "".concat(props.prefixCls, "-menu"),
  91. onClick: onClick,
  92. getPopupContainer: function getPopupContainer() {
  93. return triggerRef.value.getPopupDomNode();
  94. }
  95. };
  96. return _createVNode(_Fragment, null, [props.arrow && _createVNode("div", {
  97. "class": "".concat(props.prefixCls, "-arrow")
  98. }, null), cloneElement(overlayElement, extraOverlayProps, false)]);
  99. };
  100. var minOverlayWidthMatchTrigger = computed(function () {
  101. var _props$minOverlayWidt = props.minOverlayWidthMatchTrigger,
  102. matchTrigger = _props$minOverlayWidt === void 0 ? !props.alignPoint : _props$minOverlayWidt;
  103. return matchTrigger;
  104. });
  105. var renderChildren = function renderChildren() {
  106. var _slots$default;
  107. var children = (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots);
  108. return triggerVisible.value && children ? cloneElement(children[0], {
  109. class: props.openClassName || "".concat(props.prefixCls, "-open")
  110. }, false) : children;
  111. };
  112. var triggerHideAction = computed(function () {
  113. if (!props.hideAction && props.trigger.indexOf('contextmenu') !== -1) {
  114. return ['click'];
  115. }
  116. return props.hideAction;
  117. });
  118. return function () {
  119. var prefixCls = props.prefixCls,
  120. arrow = props.arrow,
  121. showAction = props.showAction,
  122. overlayStyle = props.overlayStyle,
  123. trigger = props.trigger,
  124. placement = props.placement,
  125. align = props.align,
  126. getPopupContainer = props.getPopupContainer,
  127. transitionName = props.transitionName,
  128. animation = props.animation,
  129. overlayClassName = props.overlayClassName,
  130. otherProps = _objectWithoutProperties(props, _excluded);
  131. return _createVNode(Trigger, _objectSpread(_objectSpread({}, otherProps), {}, {
  132. "prefixCls": prefixCls,
  133. "ref": triggerRef,
  134. "popupClassName": classNames(overlayClassName, _defineProperty({}, "".concat(prefixCls, "-show-arrow"), arrow)),
  135. "popupStyle": overlayStyle,
  136. "builtinPlacements": placements,
  137. "action": trigger,
  138. "showAction": showAction,
  139. "hideAction": triggerHideAction.value || [],
  140. "popupPlacement": placement,
  141. "popupAlign": align,
  142. "popupTransitionName": transitionName,
  143. "popupAnimation": animation,
  144. "popupVisible": triggerVisible.value,
  145. "stretch": minOverlayWidthMatchTrigger.value ? 'minWidth' : '',
  146. "onPopupVisibleChange": onVisibleChange,
  147. "getPopupContainer": getPopupContainer
  148. }), {
  149. popup: getMenuElement,
  150. default: renderChildren
  151. });
  152. };
  153. }
  154. });