2021-09-25 08:51:32 +00:00
|
|
|
import {
|
|
|
|
isEmptyElement,
|
|
|
|
initDefaultProps,
|
|
|
|
flattenChildren,
|
|
|
|
isValidElement,
|
|
|
|
} from '../_util/props-util';
|
2019-03-15 03:20:37 +00:00
|
|
|
import { cloneElement } from '../_util/vnode';
|
2021-09-25 08:51:32 +00:00
|
|
|
import type { CollapsibleType } from './commonProps';
|
|
|
|
import { collapseProps } from './commonProps';
|
|
|
|
import { getDataAndAriaProps } from '../_util/util';
|
2022-05-21 02:56:28 +00:00
|
|
|
import type { CSSProperties, ExtractPropTypes } from 'vue';
|
2021-09-25 08:51:32 +00:00
|
|
|
import { computed, defineComponent, ref, watch } from 'vue';
|
2020-03-25 06:52:12 +00:00
|
|
|
import RightOutlined from '@ant-design/icons-vue/RightOutlined';
|
2021-09-25 08:51:32 +00:00
|
|
|
import firstNotUndefined from '../_util/firstNotUndefined';
|
|
|
|
import classNames from '../_util/classNames';
|
|
|
|
import useConfigInject from '../_util/hooks/useConfigInject';
|
|
|
|
import type { CollapsePanelProps } from './CollapsePanel';
|
2022-03-12 01:56:32 +00:00
|
|
|
import collapseMotion from '../_util/collapseMotion';
|
2023-05-18 13:22:58 +00:00
|
|
|
import type { CustomSlotsType } from '../_util/type';
|
2021-06-23 13:47:53 +00:00
|
|
|
|
2021-09-25 08:51:32 +00:00
|
|
|
type Key = number | string;
|
2021-06-23 13:47:53 +00:00
|
|
|
|
2021-09-25 08:51:32 +00:00
|
|
|
function getActiveKeysArray(activeKey: Key | Key[]) {
|
|
|
|
let currentActiveKey = activeKey;
|
|
|
|
if (!Array.isArray(currentActiveKey)) {
|
|
|
|
const activeKeyType = typeof currentActiveKey;
|
|
|
|
currentActiveKey =
|
|
|
|
activeKeyType === 'number' || activeKeyType === 'string' ? [currentActiveKey] : [];
|
|
|
|
}
|
|
|
|
return currentActiveKey.map(key => String(key));
|
|
|
|
}
|
|
|
|
export { collapseProps };
|
|
|
|
export type CollapseProps = Partial<ExtractPropTypes<ReturnType<typeof collapseProps>>>;
|
2020-10-14 09:57:38 +00:00
|
|
|
export default defineComponent({
|
2022-09-26 13:33:41 +00:00
|
|
|
compatConfig: { MODE: 3 },
|
2018-04-08 13:17:20 +00:00
|
|
|
name: 'ACollapse',
|
2020-07-16 08:24:44 +00:00
|
|
|
inheritAttrs: false,
|
2021-09-25 08:51:32 +00:00
|
|
|
props: initDefaultProps(collapseProps(), {
|
|
|
|
accordion: false,
|
|
|
|
destroyInactivePanel: false,
|
|
|
|
bordered: true,
|
2022-03-12 01:56:32 +00:00
|
|
|
openAnimation: collapseMotion('ant-motion-collapse', false),
|
2021-09-25 08:51:32 +00:00
|
|
|
expandIconPosition: 'left',
|
|
|
|
}),
|
2023-05-18 13:22:58 +00:00
|
|
|
slots: Object as CustomSlotsType<{
|
|
|
|
default?: any;
|
|
|
|
expandIcon?: CollapsePanelProps;
|
|
|
|
}>,
|
2021-09-25 08:51:32 +00:00
|
|
|
setup(props, { attrs, slots, emit }) {
|
|
|
|
const stateActiveKey = ref<Key[]>(
|
|
|
|
getActiveKeysArray(firstNotUndefined([props.activeKey, props.defaultActiveKey])),
|
|
|
|
);
|
|
|
|
|
|
|
|
watch(
|
|
|
|
() => props.activeKey,
|
|
|
|
() => {
|
|
|
|
stateActiveKey.value = getActiveKeysArray(props.activeKey);
|
|
|
|
},
|
2021-12-04 01:21:05 +00:00
|
|
|
{ deep: true },
|
2021-09-25 08:51:32 +00:00
|
|
|
);
|
|
|
|
const { prefixCls, direction } = useConfigInject('collapse', props);
|
|
|
|
const iconPosition = computed(() => {
|
|
|
|
const { expandIconPosition } = props;
|
|
|
|
if (expandIconPosition !== undefined) {
|
|
|
|
return expandIconPosition;
|
|
|
|
}
|
|
|
|
return direction.value === 'rtl' ? 'right' : 'left';
|
|
|
|
});
|
|
|
|
|
|
|
|
const renderExpandIcon = (panelProps: CollapsePanelProps) => {
|
|
|
|
const { expandIcon = slots.expandIcon } = props;
|
|
|
|
const icon = expandIcon ? (
|
|
|
|
expandIcon(panelProps)
|
|
|
|
) : (
|
|
|
|
<RightOutlined rotate={panelProps.isActive ? 90 : undefined} />
|
|
|
|
);
|
|
|
|
|
2022-03-12 01:56:32 +00:00
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
{isValidElement(Array.isArray(expandIcon) ? icon[0] : icon)
|
|
|
|
? cloneElement(
|
|
|
|
icon,
|
|
|
|
{
|
|
|
|
class: `${prefixCls.value}-arrow`,
|
|
|
|
},
|
|
|
|
false,
|
|
|
|
)
|
|
|
|
: icon}
|
|
|
|
</div>
|
|
|
|
);
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2021-09-25 08:51:32 +00:00
|
|
|
const setActiveKey = (activeKey: Key[]) => {
|
|
|
|
if (props.activeKey === undefined) {
|
|
|
|
stateActiveKey.value = activeKey;
|
|
|
|
}
|
|
|
|
const newKey = props.accordion ? activeKey[0] : activeKey;
|
|
|
|
emit('update:activeKey', newKey);
|
|
|
|
emit('change', newKey);
|
|
|
|
};
|
|
|
|
const onClickItem = (key: Key) => {
|
|
|
|
let activeKey = stateActiveKey.value;
|
|
|
|
if (props.accordion) {
|
|
|
|
activeKey = activeKey[0] === key ? [] : [key];
|
|
|
|
} else {
|
|
|
|
activeKey = [...activeKey];
|
|
|
|
const index = activeKey.indexOf(key);
|
|
|
|
const isActive = index > -1;
|
|
|
|
if (isActive) {
|
|
|
|
// remove active state
|
|
|
|
activeKey.splice(index, 1);
|
|
|
|
} else {
|
|
|
|
activeKey.push(key);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
setActiveKey(activeKey);
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2020-07-15 07:27:35 +00:00
|
|
|
|
2021-09-25 08:51:32 +00:00
|
|
|
const getNewChild = (child, index) => {
|
|
|
|
if (isEmptyElement(child)) return;
|
|
|
|
const activeKey = stateActiveKey.value;
|
|
|
|
const { accordion, destroyInactivePanel, collapsible, openAnimation } = props;
|
|
|
|
|
|
|
|
// If there is no key provide, use the panel order as default key
|
|
|
|
const key = String(child.key ?? index);
|
|
|
|
const {
|
|
|
|
header = child.children?.header?.(),
|
|
|
|
headerClass,
|
|
|
|
collapsible: childCollapsible,
|
|
|
|
disabled,
|
|
|
|
} = child.props || {};
|
|
|
|
let isActive = false;
|
|
|
|
|
|
|
|
if (accordion) {
|
|
|
|
isActive = activeKey[0] === key;
|
|
|
|
} else {
|
|
|
|
isActive = activeKey.indexOf(key) > -1;
|
|
|
|
}
|
|
|
|
|
|
|
|
let mergeCollapsible: CollapsibleType = childCollapsible ?? collapsible;
|
|
|
|
// legacy 2.x
|
|
|
|
if (disabled || disabled === '') {
|
|
|
|
mergeCollapsible = 'disabled';
|
|
|
|
}
|
|
|
|
const newProps = {
|
|
|
|
key,
|
|
|
|
panelKey: key,
|
|
|
|
header,
|
|
|
|
headerClass,
|
|
|
|
isActive,
|
|
|
|
prefixCls: prefixCls.value,
|
|
|
|
destroyInactivePanel,
|
|
|
|
openAnimation,
|
|
|
|
accordion,
|
|
|
|
onItemClick: mergeCollapsible === 'disabled' ? null : onClickItem,
|
|
|
|
expandIcon: renderExpandIcon,
|
|
|
|
collapsible: mergeCollapsible,
|
|
|
|
};
|
|
|
|
|
|
|
|
return cloneElement(child, newProps);
|
|
|
|
};
|
|
|
|
|
|
|
|
const getItems = () => {
|
|
|
|
return flattenChildren(slots.default?.()).map(getNewChild);
|
|
|
|
};
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
const { accordion, bordered, ghost } = props;
|
|
|
|
const collapseClassName = classNames({
|
|
|
|
[prefixCls.value]: true,
|
|
|
|
[`${prefixCls.value}-borderless`]: !bordered,
|
|
|
|
[`${prefixCls.value}-icon-position-${iconPosition.value}`]: true,
|
|
|
|
[`${prefixCls.value}-rtl`]: direction.value === 'rtl',
|
|
|
|
[`${prefixCls.value}-ghost`]: !!ghost,
|
|
|
|
[attrs.class as string]: !!attrs.class,
|
|
|
|
});
|
|
|
|
return (
|
|
|
|
<div
|
|
|
|
class={collapseClassName}
|
|
|
|
{...getDataAndAriaProps(attrs)}
|
2022-05-21 02:56:28 +00:00
|
|
|
style={attrs.style as CSSProperties}
|
2021-09-25 08:51:32 +00:00
|
|
|
role={accordion ? 'tablist' : null}
|
|
|
|
>
|
|
|
|
{getItems()}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
2018-02-01 10:18:05 +00:00
|
|
|
},
|
2020-10-14 09:57:38 +00:00
|
|
|
});
|