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