diff --git a/components/collapse/Collapse.tsx b/components/collapse/Collapse.tsx index 123d6ccdc..f91142dd5 100644 --- a/components/collapse/Collapse.tsx +++ b/components/collapse/Collapse.tsx @@ -17,6 +17,9 @@ import useConfigInject from '../config-provider/hooks/useConfigInject'; import type { CollapsePanelProps } from './CollapsePanel'; import collapseMotion from '../_util/collapseMotion'; +// CSSINJS +import useStyle from './style'; + type Key = number | string; function getActiveKeysArray(activeKey: Key | Key[]) { @@ -39,7 +42,7 @@ export default defineComponent({ destroyInactivePanel: false, bordered: true, openAnimation: collapseMotion('ant-motion-collapse', false), - expandIconPosition: 'left', + expandIconPosition: 'start', }), slots: ['expandIcon'], // emits: ['change', 'update:activeKey'], @@ -56,12 +59,16 @@ export default defineComponent({ { deep: true }, ); const { prefixCls, direction } = useConfigInject('collapse', props); + + // style + const [wrapSSR, hashId] = useStyle(prefixCls); + const iconPosition = computed(() => { const { expandIconPosition } = props; if (expandIconPosition !== undefined) { return expandIconPosition; } - return direction.value === 'rtl' ? 'right' : 'left'; + return direction.value === 'rtl' ? 'end' : 'start'; }); const renderExpandIcon = (panelProps: CollapsePanelProps) => { @@ -73,7 +80,12 @@ export default defineComponent({ ); return ( -
+
+ ['header', 'icon'].includes(props.collapsible) && onClickItem(panelProps.panelKey) + } + > {isValidElement(Array.isArray(expandIcon) ? icon[0] : icon) ? cloneElement( icon, @@ -162,15 +174,18 @@ export default defineComponent({ 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 ( + const collapseClassName = classNames( + prefixCls.value, + { + [`${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, + }, + hashId.value, + ); + return wrapSSR(
{getItems()} -
+
, ); }; }, diff --git a/components/collapse/CollapsePanel.tsx b/components/collapse/CollapsePanel.tsx index 58da6619b..24e17afc2 100644 --- a/components/collapse/CollapsePanel.tsx +++ b/components/collapse/CollapsePanel.tsx @@ -57,6 +57,7 @@ export default defineComponent({ const headerCls = classNames(`${prefixClsValue}-header`, { [headerClass]: headerClass, [`${prefixClsValue}-header-collapsible-only`]: collapsible === 'header', + [`${prefixClsValue}-icon-collapsible-only`]: collapsible === 'icon', }); const itemCls = classNames({ [`${prefixClsValue}-item`]: true, @@ -91,20 +92,19 @@ export default defineComponent({
collapsible !== 'header' && handleItemClick()} + onClick={() => !['header', 'icon'].includes(collapsible) && handleItemClick()} role={accordion ? 'tab' : 'button'} tabindex={disabled ? -1 : 0} aria-expanded={isActive} onKeypress={handleKeyPress} > {showArrow && icon} - {collapsible === 'header' ? ( - - {header} - - ) : ( - header - )} + collapsible === 'header' && handleItemClick()} + class={`${prefixClsValue}-header-text`} + > + {header} + {extra &&
{extra}
}
diff --git a/components/collapse/commonProps.ts b/components/collapse/commonProps.ts index 0924e8806..8069e0c81 100644 --- a/components/collapse/commonProps.ts +++ b/components/collapse/commonProps.ts @@ -1,9 +1,8 @@ -import type { PropType } from 'vue'; import type { Key } from '../_util/type'; -import { tuple } from '../_util/type'; +import { tuple, booleanType, someType, stringType, functionType } from '../_util/type'; import PropTypes from '../_util/vue-types'; -export type CollapsibleType = 'header' | 'disabled'; +export type CollapsibleType = 'header' | 'icon' | 'disabled'; export type ActiveKeyType = Array | string | number; @@ -20,18 +19,18 @@ export interface PanelProps { const collapseProps = () => ({ prefixCls: String, - activeKey: { type: [Array, Number, String] as PropType }, - defaultActiveKey: { type: [Array, Number, String] as PropType }, - accordion: { type: Boolean, default: undefined }, - destroyInactivePanel: { type: Boolean, default: undefined }, - bordered: { type: Boolean, default: undefined }, - expandIcon: Function as PropType<(panelProps: PanelProps) => any>, + activeKey: someType([Array, Number, String]), + defaultActiveKey: someType([Array, Number, String]), + accordion: booleanType(), + destroyInactivePanel: booleanType(), + bordered: booleanType(), + expandIcon: functionType<(panelProps: PanelProps) => any>(), openAnimation: PropTypes.object, - expandIconPosition: PropTypes.oneOf(tuple('left', 'right')), - collapsible: { type: String as PropType }, - ghost: { type: Boolean, default: undefined }, - onChange: Function as PropType<(key: Key | Key[]) => void>, - 'onUpdate:activeKey': Function as PropType<(key: Key | Key[]) => void>, + expandIconPosition: PropTypes.oneOf(tuple('start', 'end')), + collapsible: stringType(), + ghost: booleanType(), + onChange: functionType<(key: Key | Key[]) => void>(), + 'onUpdate:activeKey': functionType<(key: Key | Key[]) => void>(), }); const collapsePanelProps = () => ({ @@ -39,19 +38,19 @@ const collapsePanelProps = () => ({ prefixCls: String, header: PropTypes.any, headerClass: String, - showArrow: { type: Boolean, default: undefined }, - isActive: { type: Boolean, default: undefined }, - destroyInactivePanel: { type: Boolean, default: undefined }, + showArrow: booleanType(), + isActive: booleanType(), + destroyInactivePanel: booleanType(), /** @deprecated Use `collapsible="disabled"` instead */ - disabled: { type: Boolean, default: undefined }, - accordion: { type: Boolean, default: undefined }, - forceRender: { type: Boolean, default: undefined }, - expandIcon: Function as PropType<(panelProps: PanelProps) => any>, + disabled: booleanType(), + accordion: booleanType(), + forceRender: booleanType(), + expandIcon: functionType<(panelProps: PanelProps) => any>(), extra: PropTypes.any, panelKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - collapsible: { type: String as PropType }, + collapsible: stringType(), role: String, - onItemClick: { type: Function as PropType<(panelKey: Key) => void> }, + onItemClick: functionType<(panelKey: Key) => void>(), }); export { collapseProps, collapsePanelProps }; diff --git a/components/collapse/demo/collapsible.vue b/components/collapse/demo/collapsible.vue new file mode 100644 index 000000000..88afd8cd2 --- /dev/null +++ b/components/collapse/demo/collapsible.vue @@ -0,0 +1,55 @@ + +--- +order: 7 +title: + zh-CN: 可折叠触发区域 + en-US: Collapsible +--- + +## zh-CN + +通过 `collapsible` 属性，可以设置面板的可折叠触发区域。 + +## en-US + +Specify the trigger area of collapsible by `collapsible`. + + + + + + diff --git a/components/collapse/demo/custom.vue b/components/collapse/demo/custom.vue index 58d9fb1b9..2a04d91b3 100644 --- a/components/collapse/demo/custom.vue +++ b/components/collapse/demo/custom.vue @@ -17,7 +17,11 @@ Customize the background, border and margin styles and icon for each panel. diff --git a/components/collapse/index.en-US.md b/components/collapse/index.en-US.md index 5c4c1f113..cbc0ad240 100644 --- a/components/collapse/index.en-US.md +++ b/components/collapse/index.en-US.md @@ -2,7 +2,7 @@ category: Components type: Data Display title: Collapse -cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg +cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*B7HKR5OBe8gAAAAAAAAAAAAADrJ8AQ/original --- A content area which can be collapsed and expanded. @@ -19,12 +19,12 @@ A content area which can be collapsed and expanded. | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | | accordion | If `true`, `Collapse` renders as `Accordion` | boolean | `false` | | -| activeKey(v-model) | Key of the active panel | string\[]\|string | No default value. In `accordion` mode, it's the key of the first panel. | | +| activeKey(v-model) | Key of the active panel | string\[] \| string
number\[] \| number | No default value. In `accordion` mode, it's the key of the first panel. | | | bordered | Toggles rendering of the border around the collapse block | boolean | `true` | | -| collapsible | Specify whether the panels of children be collapsible or the trigger area of collapsible | `header` \| `disabled` | - | 3.0 | +| collapsible | Specify whether the panels of children be collapsible or the trigger area of collapsible | `header` \| `icon` \| `disabled` | - | 4.0 | | destroyInactivePanel | Destroy Inactive Panel | boolean | `false` | | | expandIcon | allow to customize collapse icon | Function(props):VNode \| v-slot:expandIcon="props" | | | -| expandIconPosition | Set expand icon position: `left`, `right` | `left` | - | 1.5.0 | +| expandIconPosition | Set expand icon position | `start` \| `end` | - | 4.0 | | ghost | Make the collapse borderless and its background transparent | boolean | false | 3.0 | ### events diff --git a/components/collapse/index.zh-CN.md b/components/collapse/index.zh-CN.md index 9216f0018..980642fca 100644 --- a/components/collapse/index.zh-CN.md +++ b/components/collapse/index.zh-CN.md @@ -3,7 +3,7 @@ category: Components type: 数据展示 title: Collapse subtitle: 折叠面板 -cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg +cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*B7HKR5OBe8gAAAAAAAAAAAAADrJ8AQ/original --- 可以折叠/展开的内容区域。 @@ -20,12 +20,12 @@ cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | | accordion | 手风琴模式 | boolean | `false` | | -| activeKey(v-model) | 当前激活 tab 面板的 key | string\[]\|string | 默认无，accordion 模式下默认第一个元素 | | +| activeKey(v-model) | 当前激活 tab 面板的 key | string\[] \| string
number\[] \| number | 默认无，accordion 模式下默认第一个元素 | | | bordered | 带边框风格的折叠面板 | boolean | `true` | | -| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | `header` \| `disabled` | - | 3.0 | +| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | `header` \| `icon` \| `disabled` | - | 4.0 | | destroyInactivePanel | 销毁折叠隐藏的面板 | boolean | `false` | | | expandIcon | 自定义切换图标 | Function(props):VNode \| slot="expandIcon" slot-scope="props"\|#expandIcon="props" | | | -| expandIconPosition | 设置图标位置： `left`, `right` | `left` | - | 1.5.0 | +| expandIconPosition | 设置图标位置 | `start` \| `end` | - | 4.0 | | ghost | 使折叠面板透明且无边框 | boolean | false | 3.0 | ### 事件 diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less deleted file mode 100644 index b92378d52..000000000 --- a/components/collapse/style/index.less +++ /dev/null @@ -1,162 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@collapse-prefix-cls: ~'@{ant-prefix}-collapse'; - -.@{collapse-prefix-cls} { - .reset-component(); - - background-color: @collapse-header-bg; - border: @border-width-base @border-style-base @border-color-base; - border-bottom: 0; - border-radius: @collapse-panel-border-radius; - - & > &-item { - border-bottom: @border-width-base @border-style-base @border-color-base; - - &:last-child { - &, - & > .@{collapse-prefix-cls}-header { - border-radius: 0 0 @collapse-panel-border-radius @collapse-panel-border-radius; - } - } - - > .@{collapse-prefix-cls}-header { - position: relative; // Compatible with old version of antd, should remove in next version - display: flex; - flex-wrap: nowrap; - align-items: flex-start; - padding: @collapse-header-padding; - color: @heading-color; - line-height: @line-height-base; - cursor: pointer; - transition: all 0.3s, visibility 0s; - - .@{collapse-prefix-cls}-arrow { - display: inline-block; - margin-right: @margin-sm; - font-size: @font-size-sm; - vertical-align: -1px; - - & svg { - transition: transform 0.24s; - } - } - - .@{collapse-prefix-cls}-extra { - margin-left: auto; - } - - &:focus { - outline: none; - } - } - - .@{collapse-prefix-cls}-header-collapsible-only { - cursor: default; - .@{collapse-prefix-cls}-header-text { - cursor: pointer; - } - } - - &.@{collapse-prefix-cls}-no-arrow { - > .@{collapse-prefix-cls}-header { - padding-left: @padding-sm; - } - } - } - - // Expand Icon right - &-icon-position-right { - & > .@{collapse-prefix-cls}-item { - > .@{collapse-prefix-cls}-header { - position: relative; - padding: @collapse-header-padding; - padding-right: @collapse-header-padding-extra; - - .@{collapse-prefix-cls}-arrow { - position: absolute; - top: 50%; - right: @padding-md; - left: auto; - margin: 0; - transform: translateY(-50%); - } - } - } - } - - &-content { - color: @text-color; - background-color: @collapse-content-bg; - border-top: @border-width-base @border-style-base @border-color-base; - - & > &-box { - padding: @collapse-content-padding; - } - - &-hidden { - display: none; - } - } - - &-item:last-child { - > .@{collapse-prefix-cls}-content { - border-radius: 0 0 @collapse-panel-border-radius @collapse-panel-border-radius; - } - } - - &-borderless { - background-color: @collapse-header-bg; - border: 0; - } - - &-borderless > &-item { - border-bottom: 1px solid @border-color-base; - } - - &-borderless > &-item:last-child, - &-borderless > &-item:last-child &-header { - border-radius: 0; - } - - // hide the last border-bottom in borderless mode - &-borderless > &-item:last-child { - border-bottom: 0; - } - - &-borderless > &-item > &-content { - background-color: transparent; - border-top: 0; - } - - &-borderless > &-item > &-content > &-content-box { - padding-top: 4px; - } - - &-ghost { - background-color: transparent; - border: 0; - > .@{collapse-prefix-cls}-item { - border-bottom: 0; - > .@{collapse-prefix-cls}-content { - background-color: transparent; - border-top: 0; - > .@{collapse-prefix-cls}-content-box { - padding-top: 12px; - padding-bottom: 12px; - } - } - } - } - - & &-item-disabled > &-header { - &, - & > .arrow { - color: @disabled-color; - cursor: not-allowed; - } - } -} - -@import './rtl'; diff --git a/components/collapse/style/index.tsx b/components/collapse/style/index.tsx index 3a3ab0de5..2ca88f3ba 100644 --- a/components/collapse/style/index.tsx +++ b/components/collapse/style/index.tsx @@ -1,2 +1,271 @@ -import '../../style/index.less'; -import './index.less'; +import { genCollapseMotion } from '../../_style/motion'; +import type { FullToken, GenerateStyle } from '../../theme/internal'; +import { genComponentStyleHook, mergeToken } from '../../theme/internal'; +import { resetComponent, resetIcon } from '../../_style'; + +export interface ComponentToken {} + +type CollapseToken = FullToken<'Collapse'> & { + collapseContentBg: string; + collapseHeaderBg: string; + collapseHeaderPadding: string; + collapsePanelBorderRadius: number; + collapseContentPaddingHorizontal: number; +}; + +export const genBaseStyle: GenerateStyle = token => { + const { + componentCls, + collapseContentBg, + padding, + collapseContentPaddingHorizontal, + collapseHeaderBg, + collapseHeaderPadding, + collapsePanelBorderRadius, + + lineWidth, + lineType, + colorBorder, + colorText, + colorTextHeading, + colorTextDisabled, + fontSize, + lineHeight, + marginSM, + paddingSM, + motionDurationSlow, + fontSizeIcon, + } = token; + + const borderBase = `${lineWidth}px ${lineType} ${colorBorder}`; + + return { + [componentCls]: { + ...resetComponent(token), + backgroundColor: collapseHeaderBg, + border: borderBase, + borderBottom: 0, + borderRadius: `${collapsePanelBorderRadius}px`, + + [`&-rtl`]: { + direction: 'rtl', + }, + + [`& > ${componentCls}-item`]: { + borderBottom: borderBase, + [`&:last-child`]: { + [` + &, + & > ${componentCls}-header`]: { + borderRadius: `0 0 ${collapsePanelBorderRadius}px ${collapsePanelBorderRadius}px`, + }, + }, + + [`> ${componentCls}-header`]: { + position: 'relative', // Compatible with old version of antd, should remove in next version + display: 'flex', + flexWrap: 'nowrap', + alignItems: 'flex-start', + padding: collapseHeaderPadding, + color: colorTextHeading, + lineHeight, + cursor: 'pointer', + transition: `all ${motionDurationSlow}, visibility 0s`, + + [`> ${componentCls}-header-text`]: { + flex: 'auto', + }, + + '&:focus': { + outline: 'none', + }, + + // >>>>> Arrow + [`${componentCls}-expand-icon`]: { + height: fontSize * lineHeight, + display: 'flex', + alignItems: 'center', + paddingInlineEnd: marginSM, + }, + + [`${componentCls}-arrow`]: { + ...resetIcon(), + fontSize: fontSizeIcon, + + svg: { + transition: `transform ${motionDurationSlow}`, + }, + }, + + // >>>>> Text + [`${componentCls}-header-text`]: { + marginInlineEnd: 'auto', + }, + }, + + [`${componentCls}-header-collapsible-only`]: { + cursor: 'default', + + [`${componentCls}-header-text`]: { + flex: 'none', + cursor: 'pointer', + }, + [`${componentCls}-expand-icon`]: { + cursor: 'pointer', + }, + }, + + [`${componentCls}-icon-collapsible-only`]: { + cursor: 'default', + + [`${componentCls}-expand-icon`]: { + cursor: 'pointer', + }, + }, + + [`&${componentCls}-no-arrow`]: { + [`> ${componentCls}-header`]: { + paddingInlineStart: paddingSM, + }, + }, + }, + + [`${componentCls}-content`]: { + color: colorText, + backgroundColor: collapseContentBg, + borderTop: borderBase, + + [`& > ${componentCls}-content-box`]: { + padding: `${padding}px ${collapseContentPaddingHorizontal}px`, + }, + + [`&-hidden`]: { + display: 'none', + }, + }, + + [`${componentCls}-item:last-child`]: { + [`> ${componentCls}-content`]: { + borderRadius: `0 0 ${collapsePanelBorderRadius}px ${collapsePanelBorderRadius}px`, + }, + }, + + [`& ${componentCls}-item-disabled > ${componentCls}-header`]: { + [` + &, + & > .arrow + `]: { + color: colorTextDisabled, + cursor: 'not-allowed', + }, + }, + + // ========================== Icon Position ========================== + [`&${componentCls}-icon-position-end`]: { + [`& > ${componentCls}-item`]: { + [`> ${componentCls}-header`]: { + [`${componentCls}-expand-icon`]: { + order: 1, + paddingInlineEnd: 0, + paddingInlineStart: marginSM, + }, + }, + }, + }, + }, + }; +}; + +const genArrowStyle: GenerateStyle = token => { + const { componentCls } = token; + + const fixedSelector = `> ${componentCls}-item > ${componentCls}-header ${componentCls}-arrow svg`; + + return { + [`${componentCls}-rtl`]: { + [fixedSelector]: { + transform: `rotate(180deg)`, + }, + }, + }; +}; + +const genBorderlessStyle: GenerateStyle = token => { + const { + componentCls, + collapseHeaderBg, + paddingXXS, + + colorBorder, + } = token; + + return { + [`${componentCls}-borderless`]: { + backgroundColor: collapseHeaderBg, + border: 0, + + [`> ${componentCls}-item`]: { + borderBottom: `1px solid ${colorBorder}`, + }, + + [` + > ${componentCls}-item:last-child, + > ${componentCls}-item:last-child ${componentCls}-header + `]: { + borderRadius: 0, + }, + + [`> ${componentCls}-item:last-child`]: { + borderBottom: 0, + }, + + [`> ${componentCls}-item > ${componentCls}-content`]: { + backgroundColor: 'transparent', + borderTop: 0, + }, + + [`> ${componentCls}-item > ${componentCls}-content > ${componentCls}-content-box`]: { + paddingTop: paddingXXS, + }, + }, + }; +}; + +const genGhostStyle: GenerateStyle = token => { + const { componentCls, paddingSM } = token; + + return { + [`${componentCls}-ghost`]: { + backgroundColor: 'transparent', + border: 0, + [`> ${componentCls}-item`]: { + borderBottom: 0, + [`> ${componentCls}-content`]: { + backgroundColor: 'transparent', + border: 0, + [`> ${componentCls}-content-box`]: { + paddingBlock: paddingSM, + }, + }, + }, + }, + }; +}; + +export default genComponentStyleHook('Collapse', token => { + const collapseToken = mergeToken(token, { + collapseContentBg: token.colorBgContainer, + collapseHeaderBg: token.colorFillAlter, + collapseHeaderPadding: `${token.paddingSM}px ${token.padding}px`, + collapsePanelBorderRadius: token.borderRadiusLG, + collapseContentPaddingHorizontal: 16, // Fixed value + }); + + return [ + genBaseStyle(collapseToken), + genBorderlessStyle(collapseToken), + genGhostStyle(collapseToken), + genArrowStyle(collapseToken), + genCollapseMotion(collapseToken), + ]; +}); diff --git a/components/collapse/style/rtl.less b/components/collapse/style/rtl.less deleted file mode 100644 index 559a922de..000000000 --- a/components/collapse/style/rtl.less +++ /dev/null @@ -1,48 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@collapse-prefix-cls: ~'@{ant-prefix}-collapse'; - -.@{collapse-prefix-cls} { - &-rtl { - direction: rtl; - } - - & > &-item { - > .@{collapse-prefix-cls}-header { - .@{collapse-prefix-cls}-rtl & { - padding: @collapse-header-padding; - padding-right: @collapse-header-padding-extra; - } - - .@{collapse-prefix-cls}-arrow { - .@{collapse-prefix-cls}-rtl& { - margin-right: 0; - margin-left: @margin-sm; - } - - & svg { - .@{collapse-prefix-cls}-rtl& { - transform: rotate(180deg); - } - } - } - - .@{collapse-prefix-cls}-extra { - .@{collapse-prefix-cls}-rtl& { - margin-right: auto; - margin-left: 0; - } - } - } - - &.@{collapse-prefix-cls}-no-arrow { - > .@{collapse-prefix-cls}-header { - .@{collapse-prefix-cls}-rtl& { - padding-right: @padding-sm; - padding-left: 0; - } - } - } - } -} diff --git a/components/style.ts b/components/style.ts index f6b7d468b..b5d103f53 100644 --- a/components/style.ts +++ b/components/style.ts @@ -18,7 +18,7 @@ import './tabs/style'; // import './dropdown/style'; // import './divider/style'; // import './card/style'; -import './collapse/style'; +// import './collapse/style'; // import './carousel/style'; // import './notification/style'; // import './message/style'; diff --git a/components/theme/interface/components.ts b/components/theme/interface/components.ts index 1a6aa29ef..bf718a28e 100644 --- a/components/theme/interface/components.ts +++ b/components/theme/interface/components.ts @@ -9,7 +9,7 @@ import type { ComponentToken as CardComponentToken } from '../../card/style'; import type { ComponentToken as CarouselComponentToken } from '../../carousel/style'; // import type { ComponentToken as CascaderComponentToken } from '../../cascader/style'; import type { ComponentToken as CheckboxComponentToken } from '../../checkbox/style'; -// import type { ComponentToken as CollapseComponentToken } from '../../collapse/style'; +import type { ComponentToken as CollapseComponentToken } from '../../collapse/style'; import type { ComponentToken as DatePickerComponentToken } from '../../date-picker/style'; import type { ComponentToken as DividerComponentToken } from '../../divider/style'; import type { ComponentToken as DropdownComponentToken } from '../../dropdown/style'; @@ -63,7 +63,7 @@ export interface ComponentTokenMap { Carousel?: CarouselComponentToken; // Cascader?: CascaderComponentToken; Checkbox?: CheckboxComponentToken; - // Collapse?: CollapseComponentToken; + Collapse?: CollapseComponentToken; Comment?: {}; DatePicker?: DatePickerComponentToken; Descriptions?: {};