dropdown-button.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  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 { computed, defineComponent } from 'vue';
  13. import Button from '../button';
  14. import Dropdown from './dropdown';
  15. import classNames from '../_util/classNames';
  16. import { initDefaultProps } from '../_util/props-util';
  17. import { dropdownButtonProps } from './props';
  18. import EllipsisOutlined from "@ant-design/icons-vue/es/icons/EllipsisOutlined";
  19. import useConfigInject from '../config-provider/hooks/useConfigInject';
  20. import useStyle from './style';
  21. const ButtonGroup = Button.Group;
  22. export default defineComponent({
  23. compatConfig: {
  24. MODE: 3
  25. },
  26. name: 'ADropdownButton',
  27. inheritAttrs: false,
  28. __ANT_BUTTON: true,
  29. props: initDefaultProps(dropdownButtonProps(), {
  30. trigger: 'hover',
  31. placement: 'bottomRight',
  32. type: 'default'
  33. }),
  34. // emits: ['click', 'visibleChange', 'update:visible'],s
  35. slots: Object,
  36. setup(props, _ref) {
  37. let {
  38. slots,
  39. attrs,
  40. emit
  41. } = _ref;
  42. const handleVisibleChange = val => {
  43. emit('update:visible', val);
  44. emit('visibleChange', val);
  45. emit('update:open', val);
  46. emit('openChange', val);
  47. };
  48. const {
  49. prefixCls,
  50. direction,
  51. getPopupContainer
  52. } = useConfigInject('dropdown', props);
  53. const buttonPrefixCls = computed(() => `${prefixCls.value}-button`);
  54. const [wrapSSR, hashId] = useStyle(prefixCls);
  55. return () => {
  56. var _a, _b;
  57. const _c = _extends(_extends({}, props), attrs),
  58. {
  59. type = 'default',
  60. disabled,
  61. danger,
  62. loading,
  63. htmlType,
  64. class: className = '',
  65. overlay = (_a = slots.overlay) === null || _a === void 0 ? void 0 : _a.call(slots),
  66. trigger,
  67. align,
  68. open,
  69. visible,
  70. onVisibleChange: _onVisibleChange,
  71. placement = direction.value === 'rtl' ? 'bottomLeft' : 'bottomRight',
  72. href,
  73. title,
  74. icon = ((_b = slots.icon) === null || _b === void 0 ? void 0 : _b.call(slots)) || _createVNode(EllipsisOutlined, null, null),
  75. mouseEnterDelay,
  76. mouseLeaveDelay,
  77. overlayClassName,
  78. overlayStyle,
  79. destroyPopupOnHide,
  80. onClick,
  81. 'onUpdate:open': _updateVisible
  82. } = _c,
  83. restProps = __rest(_c, ["type", "disabled", "danger", "loading", "htmlType", "class", "overlay", "trigger", "align", "open", "visible", "onVisibleChange", "placement", "href", "title", "icon", "mouseEnterDelay", "mouseLeaveDelay", "overlayClassName", "overlayStyle", "destroyPopupOnHide", "onClick", 'onUpdate:open']);
  84. const dropdownProps = {
  85. align,
  86. disabled,
  87. trigger: disabled ? [] : trigger,
  88. placement,
  89. getPopupContainer: getPopupContainer === null || getPopupContainer === void 0 ? void 0 : getPopupContainer.value,
  90. onOpenChange: handleVisibleChange,
  91. mouseEnterDelay,
  92. mouseLeaveDelay,
  93. open: open !== null && open !== void 0 ? open : visible,
  94. overlayClassName,
  95. overlayStyle,
  96. destroyPopupOnHide
  97. };
  98. const leftButton = _createVNode(Button, {
  99. "danger": danger,
  100. "type": type,
  101. "disabled": disabled,
  102. "loading": loading,
  103. "onClick": onClick,
  104. "htmlType": htmlType,
  105. "href": href,
  106. "title": title
  107. }, {
  108. default: slots.default
  109. });
  110. const rightButton = _createVNode(Button, {
  111. "danger": danger,
  112. "type": type,
  113. "icon": icon
  114. }, null);
  115. return wrapSSR(_createVNode(ButtonGroup, _objectSpread(_objectSpread({}, restProps), {}, {
  116. "class": classNames(buttonPrefixCls.value, className, hashId.value)
  117. }), {
  118. default: () => [slots.leftButton ? slots.leftButton({
  119. button: leftButton
  120. }) : leftButton, _createVNode(Dropdown, dropdownProps, {
  121. default: () => [slots.rightButton ? slots.rightButton({
  122. button: rightButton
  123. }) : rightButton],
  124. overlay: () => overlay
  125. })]
  126. }));
  127. };
  128. }
  129. });