CollapsePanel.js 4.5 KB

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