refactor:collapse

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,7 @@ export default defineComponent({
       );
 
       return (
-        <div>
+        <div class={`${prefixCls.value}-expand-icon`}>
           {isValidElement(Array.isArray(expandIcon) ? icon[0] : icon)
             ? cloneElement(
                 icon,
@@ -162,23 +169,26 @@ 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(
         <div
           class={collapseClassName}
           {...getDataAndAriaProps(attrs)}
           style={attrs.style as CSSProperties}
           role={accordion ? 'tablist' : null}
         >
           {getItems()}
-        </div>
+        </div>,
       );
     };
   },

components/collapse/CollapsePanel.tsx

@@ -103,7 +103,7 @@ export default defineComponent({
                 {header}
               </span>
             ) : (
-              header
+              <span class={`${prefixClsValue}-header-text`}>{header}</span>
             )}
             {extra && <div class={`${prefixClsValue}-extra`}>{extra}</div>}
           </div>

components/collapse/commonProps.ts

@@ -27,7 +27,7 @@ const collapseProps = () => ({
   bordered: { type: Boolean, default: undefined },
   expandIcon: Function as PropType<(panelProps: PanelProps) => any>,
   openAnimation: PropTypes.object,
-  expandIconPosition: PropTypes.oneOf(tuple('left', 'right')),
+  expandIconPosition: PropTypes.oneOf(tuple('start', 'end')),
   collapsible: { type: String as PropType<CollapsibleType> },
   ghost: { type: Boolean, default: undefined },
   onChange: Function as PropType<(key: Key | Key[]) => void>,

components/collapse/demo/custom.vue

@@ -17,7 +17,11 @@ Customize the background, border and margin styles and icon for each panel.
 </docs>
 
 <template>
-  <a-collapse v-model:activeKey="activeKey" :bordered="false">
+  <a-collapse
+    v-model:activeKey="activeKey"
+    :bordered="false"
+    style="background: rgb(255, 255, 255)"
+  >
     <template #expandIcon="{ isActive }">
       <caret-right-outlined :rotate="isActive ? 90 : 0" />
     </template>

components/collapse/demo/extra.vue

@@ -34,8 +34,8 @@ More than one panel can be expanded at a time, the first panel is initialized to
   <br />
   <span>Expand Icon Position:</span>
   <a-select v-model:value="expandIconPosition">
-    <a-select-option value="left">left</a-select-option>
-    <a-select-option value="right">right</a-select-option>
+    <a-select-option value="start">start</a-select-option>
+    <a-select-option value="end">end</a-select-option>
   </a-select>
 </template>
 <script lang="ts">

components/collapse/index.en-US.md

@@ -24,7 +24,7 @@ A content area which can be collapsed and expanded.
 | collapsible | Specify whether the panels of children be collapsible or the trigger area of collapsible | `header` \| `disabled` | - | 3.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` | `start` | - | 1.5.0 |
 | ghost | Make the collapse borderless and its background transparent | boolean | false | 3.0 |
 
 ### events

components/collapse/index.zh-CN.md

@@ -25,7 +25,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg
 | collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | `header` \| `disabled` | - | 3.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` | `start` | - | 1.5.0 |
 | ghost | 使折叠面板透明且无边框 | boolean | false | 3.0 |
 
 ### 事件