Dropdown.js 5.2 KB

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