86 lines
2.9 KiB
TypeScript
86 lines
2.9 KiB
TypeScript
import { CSSProperties, defineComponent, inject, PropType } from 'vue';
|
|
import animation from '../_util/openAnimation';
|
|
import {
|
|
getOptionProps,
|
|
getComponent,
|
|
isValidElement,
|
|
getSlot,
|
|
} from '../_util/props-util';
|
|
import { cloneElement } from '../_util/vnode';
|
|
import VcCollapse from '../vc-collapse';
|
|
import RightOutlined from '@ant-design/icons-vue/RightOutlined';
|
|
import { defaultConfigProvider } from '../config-provider';
|
|
import PropTypes from '../_util/vue-types';
|
|
import { tuple, VueNode } from '../_util/type';
|
|
|
|
interface PanelProps {
|
|
isActive?: boolean;
|
|
header?: VueNode;
|
|
className?: string;
|
|
class?: string;
|
|
style?: CSSProperties;
|
|
showArrow?: boolean;
|
|
forceRender?: boolean;
|
|
disabled?: boolean;
|
|
extra?: VueNode;
|
|
}
|
|
type ActiveKeyType = Array<string | number> | string | number;
|
|
export default defineComponent({
|
|
name: 'ACollapse',
|
|
inheritAttrs: false,
|
|
props: {
|
|
prefixCls: PropTypes.string,
|
|
activeKey: {type: [Array, Number, String] as PropType<ActiveKeyType>},
|
|
defaultActiveKey: {type: [Array, Number, String] as PropType<ActiveKeyType>},
|
|
accordion: PropTypes.looseBool,
|
|
destroyInactivePanel: PropTypes.looseBool,
|
|
bordered: PropTypes.looseBool.def(true),
|
|
expandIcon: PropTypes.func,
|
|
openAnimation: PropTypes.object.def(animation),
|
|
expandIconPosition: PropTypes.oneOf(tuple('left', 'right')).def('left'),
|
|
'onUpdate:activeKey': PropTypes.func,
|
|
onChange: PropTypes.func,
|
|
},
|
|
setup() {
|
|
return {
|
|
configProvider: inject('configProvider', defaultConfigProvider),
|
|
};
|
|
},
|
|
methods: {
|
|
renderExpandIcon(panelProps: PanelProps={}, prefixCls: string) {
|
|
const expandIcon = getComponent(this, 'expandIcon', panelProps);
|
|
const icon = expandIcon || <RightOutlined rotate={panelProps.isActive ? 90 : undefined} />;
|
|
return isValidElement(Array.isArray(expandIcon) ? icon[0] : icon)
|
|
? cloneElement(icon, {
|
|
class: `${prefixCls}-arrow`,
|
|
})
|
|
: icon;
|
|
},
|
|
handleChange(activeKey: ActiveKeyType) {
|
|
this.$emit('update:activeKey', activeKey);
|
|
this.$emit('change', activeKey);
|
|
},
|
|
},
|
|
render() {
|
|
const { prefixCls: customizePrefixCls, bordered, expandIconPosition } = this;
|
|
const getPrefixCls = this.configProvider.getPrefixCls;
|
|
const prefixCls = getPrefixCls('collapse', customizePrefixCls);
|
|
const { class: className, ...restAttrs } = this.$attrs as any;
|
|
const collapseClassName = {
|
|
[className]: className,
|
|
[`${prefixCls}-borderless`]: !bordered,
|
|
[`${prefixCls}-icon-position-${expandIconPosition}`]: true,
|
|
};
|
|
const rcCollapeProps = {
|
|
...getOptionProps(this),
|
|
prefixCls,
|
|
expandIcon: (panelProps: PanelProps) => this.renderExpandIcon(panelProps, prefixCls),
|
|
class: collapseClassName,
|
|
...restAttrs,
|
|
onChange: this.handleChange,
|
|
};
|
|
|
|
return <VcCollapse {...rcCollapeProps}>{getSlot(this)}</VcCollapse>;
|
|
},
|
|
});
|