CollapsePanel.js 4.0 KB

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