CollapsePanel.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  3. import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, vShow as _vShow, createVNode as _createVNode } from "vue";
  4. import PanelContent from './PanelContent';
  5. import { initDefaultProps } from '../_util/props-util';
  6. import { collapsePanelProps } from './commonProps';
  7. import { defineComponent } from 'vue';
  8. import Transition from '../_util/transition';
  9. import classNames from '../_util/classNames';
  10. import devWarning from '../vc-util/devWarning';
  11. import useConfigInject from '../_util/hooks/useConfigInject';
  12. export { collapsePanelProps };
  13. export default defineComponent({
  14. compatConfig: {
  15. MODE: 3
  16. },
  17. name: 'ACollapsePanel',
  18. inheritAttrs: false,
  19. props: initDefaultProps(collapsePanelProps(), {
  20. showArrow: true,
  21. isActive: false,
  22. onItemClick: function onItemClick() {},
  23. headerClass: '',
  24. forceRender: false
  25. }),
  26. slots: ['expandIcon', 'extra', 'header'],
  27. // emits: ['itemClick'],
  28. setup: function setup(props, _ref) {
  29. var slots = _ref.slots,
  30. emit = _ref.emit,
  31. attrs = _ref.attrs;
  32. devWarning(props.disabled === undefined, 'Collapse.Panel', '`disabled` is deprecated. Please use `collapsible="disabled"` instead.');
  33. var _useConfigInject = useConfigInject('collapse', props),
  34. prefixCls = _useConfigInject.prefixCls;
  35. var handleItemClick = function handleItemClick() {
  36. emit('itemClick', props.panelKey);
  37. };
  38. var handleKeyPress = function handleKeyPress(e) {
  39. if (e.key === 'Enter' || e.keyCode === 13 || e.which === 13) {
  40. handleItemClick();
  41. }
  42. };
  43. return function () {
  44. var _slots$header, _slots$extra, _classNames, _classNames2;
  45. var _props$header = props.header,
  46. header = _props$header === void 0 ? (_slots$header = slots.header) === null || _slots$header === void 0 ? void 0 : _slots$header.call(slots) : _props$header,
  47. headerClass = props.headerClass,
  48. isActive = props.isActive,
  49. showArrow = props.showArrow,
  50. destroyInactivePanel = props.destroyInactivePanel,
  51. accordion = props.accordion,
  52. forceRender = props.forceRender,
  53. openAnimation = props.openAnimation,
  54. _props$expandIcon = props.expandIcon,
  55. expandIcon = _props$expandIcon === void 0 ? slots.expandIcon : _props$expandIcon,
  56. _props$extra = props.extra,
  57. extra = _props$extra === void 0 ? (_slots$extra = slots.extra) === null || _slots$extra === void 0 ? void 0 : _slots$extra.call(slots) : _props$extra,
  58. collapsible = props.collapsible;
  59. var disabled = collapsible === 'disabled';
  60. var prefixClsValue = prefixCls.value;
  61. var headerCls = classNames("".concat(prefixClsValue, "-header"), (_classNames = {}, _defineProperty(_classNames, headerClass, headerClass), _defineProperty(_classNames, "".concat(prefixClsValue, "-header-collapsible-only"), collapsible === 'header'), _classNames));
  62. var itemCls = classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixClsValue, "-item"), true), _defineProperty(_classNames2, "".concat(prefixClsValue, "-item-active"), isActive), _defineProperty(_classNames2, "".concat(prefixClsValue, "-item-disabled"), disabled), _defineProperty(_classNames2, "".concat(prefixClsValue, "-no-arrow"), !showArrow), _defineProperty(_classNames2, "".concat(attrs.class), !!attrs.class), _classNames2));
  63. var icon = _createVNode("i", {
  64. "class": "arrow"
  65. }, null);
  66. if (showArrow && typeof expandIcon === 'function') {
  67. icon = expandIcon(props);
  68. }
  69. var panelContent = _withDirectives(_createVNode(PanelContent, {
  70. "prefixCls": prefixClsValue,
  71. "isActive": isActive,
  72. "forceRender": forceRender,
  73. "role": accordion ? 'tabpanel' : null
  74. }, {
  75. default: slots.default
  76. }), [[_vShow, isActive]]);
  77. var transitionProps = _objectSpread({
  78. appear: false,
  79. css: false
  80. }, openAnimation);
  81. return _createVNode("div", _objectSpread(_objectSpread({}, attrs), {}, {
  82. "class": itemCls
  83. }), [_createVNode("div", {
  84. "class": headerCls,
  85. "onClick": function onClick() {
  86. return collapsible !== 'header' && handleItemClick();
  87. },
  88. "role": accordion ? 'tab' : 'button',
  89. "tabindex": disabled ? -1 : 0,
  90. "aria-expanded": isActive,
  91. "onKeypress": handleKeyPress
  92. }, [showArrow && icon, collapsible === 'header' ? _createVNode("span", {
  93. "onClick": handleItemClick,
  94. "class": "".concat(prefixClsValue, "-header-text")
  95. }, [header]) : header, extra && _createVNode("div", {
  96. "class": "".concat(prefixClsValue, "-extra")
  97. }, [extra])]), _createVNode(Transition, transitionProps, {
  98. default: function _default() {
  99. return [!destroyInactivePanel || isActive ? panelContent : null];
  100. }
  101. })]);
  102. };
  103. }
  104. });