From e278665c4b10ba08aac9e6caf6db46727ec357cf Mon Sep 17 00:00:00 2001
From: Sagi <chenshj@inspur.com>
Date: Sun, 2 Oct 2022 16:56:51 +0800
Subject: [PATCH] fix(accordion): fix expand and collapse

---
 .../according/src/according.component.tsx     | 38 -------------------
 .../components/according/src/according.css    |  4 --
 .../src/components/according-item.props.ts    |  9 -----
 .../accordion/src/accordion.component.tsx     |  2 +-
 .../src/components/according-item.scss        | 25 ------------
 .../components/accordion-item.component.tsx   | 22 +++++++----
 .../src/components/accordion-item.props.ts    |  2 +-
 .../src/components/accordion-item.scss        | 13 ++++++-
 packages/ui-vue/src/components/according.vue  | 11 ------
 packages/ui-vue/src/components/accordion.vue  |  4 +-
 10 files changed, 31 insertions(+), 99 deletions(-)
 delete mode 100644 packages/ui-vue/components/according/src/according.component.tsx
 delete mode 100644 packages/ui-vue/components/according/src/according.css
 delete mode 100644 packages/ui-vue/components/according/src/components/according-item.props.ts
 delete mode 100644 packages/ui-vue/components/accordion/src/components/according-item.scss
 delete mode 100644 packages/ui-vue/src/components/according.vue

diff --git a/packages/ui-vue/components/according/src/according.component.tsx b/packages/ui-vue/components/according/src/according.component.tsx
deleted file mode 100644
index ac19faeea3b..00000000000
--- a/packages/ui-vue/components/according/src/according.component.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { isContext } from 'vm';
-import { computed, defineComponent, SetupContext } from 'vue';
-import { AccordingProps, accordingProps } from './according.props';
-
-import './according.css';
-
-export default defineComponent({
-    name: 'FAccording',
-    props: accordingProps,
-    emits: [],
-    setup(props: AccordingProps, context: SetupContext) {
-        const accordingStyle = computed(() => ({
-            height: props.height ? `${props.height}px` : '',
-            width: props.width ? `${props.width}px` : ''
-        }));
-
-        const accordingClass = computed(() => {
-            const customClassArray = props.customClass;
-            const accordingClassObject = {
-                'farris-panel': true,
-                according: true
-            };
-            customClassArray.reduce<Record<string, unknown>>((classObject, classString) => {
-                classObject[classString] = true;
-                return classObject;
-            }, accordingClassObject);
-            return accordingClassObject;
-        });
-
-        return () => {
-            return (
-                <div class={accordingClass.value} style={accordingStyle.value}>
-                    {context.slots.default && context.slots.default()}
-                </div>
-            );
-        };
-    }
-});
diff --git a/packages/ui-vue/components/according/src/according.css b/packages/ui-vue/components/according/src/according.css
deleted file mode 100644
index 45045c22d53..00000000000
--- a/packages/ui-vue/components/according/src/according.css
+++ /dev/null
@@ -1,4 +0,0 @@
-/* 很重要 */
-.farris-panel {
-    border: 1px solid rgba(0, 0, 0, 0.125);
-}
diff --git a/packages/ui-vue/components/according/src/components/according-item.props.ts b/packages/ui-vue/components/according/src/components/according-item.props.ts
deleted file mode 100644
index 04f84dd61c3..00000000000
--- a/packages/ui-vue/components/according/src/components/according-item.props.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { ExtractPropTypes } from 'vue';
-
-export const accordingItemProps = {
-    width: { type: Number },
-    height: { type: Number },
-    title: { type: String, default: '' },
-    disable: { type: Boolean, default: false }
-};
-export type AccordingItemProps = ExtractPropTypes<typeof accordingItemProps>;
diff --git a/packages/ui-vue/components/accordion/src/accordion.component.tsx b/packages/ui-vue/components/accordion/src/accordion.component.tsx
index bea759d5a43..876c698ce8f 100644
--- a/packages/ui-vue/components/accordion/src/accordion.component.tsx
+++ b/packages/ui-vue/components/accordion/src/accordion.component.tsx
@@ -18,7 +18,7 @@ export default defineComponent({
             const customClassArray = props.customClass;
             const accordionClassObject = {
                 'farris-panel': true,
-                according: true
+                'accordion': true
             };
             customClassArray.reduce<Record<string, unknown>>((classObject, classString) => {
                 classObject[classString] = true;
diff --git a/packages/ui-vue/components/accordion/src/components/according-item.scss b/packages/ui-vue/components/accordion/src/components/according-item.scss
deleted file mode 100644
index 5574087b52b..00000000000
--- a/packages/ui-vue/components/accordion/src/components/according-item.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-.card-header {
-    cursor: pointer;
-}
-
-.panel-item-title {
-    float: left;
-}
-
-.panel-item-tool {
-    float: right;
-}
-
-.panel-item-clear {
-    clear: both;
-}
-
-.f-state-disable {
-    pointer-events: none;
-}
-
-/* 很重要 */
-.card {
-    border-left: 0;
-    border-right: 0;
-}
\ No newline at end of file
diff --git a/packages/ui-vue/components/accordion/src/components/accordion-item.component.tsx b/packages/ui-vue/components/accordion/src/components/accordion-item.component.tsx
index 8ab72bf6e42..b83b576970d 100644
--- a/packages/ui-vue/components/accordion/src/components/accordion-item.component.tsx
+++ b/packages/ui-vue/components/accordion/src/components/accordion-item.component.tsx
@@ -12,7 +12,9 @@ export default defineComponent({
         const isActive = ref(false);
         const isDisabled = ref(false);
 
-        function selectAccordionItem() {}
+        function selectAccordionItem() {
+            isActive.value = !isActive.value;
+        }
 
         function onClick($event: Event) {
             selectAccordionItem();
@@ -35,15 +37,21 @@ export default defineComponent({
 
         const headIconClass = computed(() => ({
             'f-icon': true,
-<<<<<<< HEAD:packages/ui-vue/components/accordion/src/components/accordion-item.component.tsx
             'f-accordion-collapse': !isActive.value,
             'f-accordion-expand': isActive.value
-=======
-            'f-according-collapse': !isActive.value,
-            'f-according-expand': isActive.value
->>>>>>> master:packages/ui-vue/components/according/src/components/according-item.component.tsx
         }));
 
+        const cardContainerStyle = computed(() => {
+            const styleObject = {
+                transition: 'height 0.36s ease 0s',
+                height: isActive.value ? `${props.height}px` : 0
+            };
+            if (!isActive.value) {
+                styleObject['overflow'] = 'hidden';
+            }
+            return styleObject;
+        });
+
         return () => {
             return (
                 <div class={accordionItemClass.value}>
@@ -56,7 +64,7 @@ export default defineComponent({
                         <div class="panel-item-tool">{context.slots.toolbar && context.slots.toolbar()}</div>
                         <div class="panel-item-clear"></div>
                     </div>
-                    <div>
+                    <div style={cardContainerStyle.value}>
                         <div class="card-body">{context.slots.content && context.slots.content()}</div>
                     </div>
                 </div>
diff --git a/packages/ui-vue/components/accordion/src/components/accordion-item.props.ts b/packages/ui-vue/components/accordion/src/components/accordion-item.props.ts
index 34b31438ddb..661fe2b023f 100644
--- a/packages/ui-vue/components/accordion/src/components/accordion-item.props.ts
+++ b/packages/ui-vue/components/accordion/src/components/accordion-item.props.ts
@@ -2,7 +2,7 @@ import { ExtractPropTypes } from 'vue';
 
 export const accordionItemProps = {
     width: { type: Number },
-    height: { type: Number },
+    height: { type: Number, default: 100 },
     title: { type: String, default: '' },
     disable: { type: Boolean, default: false }
 };
diff --git a/packages/ui-vue/components/accordion/src/components/accordion-item.scss b/packages/ui-vue/components/accordion/src/components/accordion-item.scss
index 5574087b52b..33e4034ffdc 100644
--- a/packages/ui-vue/components/accordion/src/components/accordion-item.scss
+++ b/packages/ui-vue/components/accordion/src/components/accordion-item.scss
@@ -22,4 +22,15 @@
 .card {
     border-left: 0;
     border-right: 0;
-}
\ No newline at end of file
+}
+
+.active {
+    height: initial;
+    transition: height 0.35s ease;
+}
+
+.inactive {
+    height: 0;
+    overflow: hidden;
+    transition: height 0.35s ease;
+}
diff --git a/packages/ui-vue/src/components/according.vue b/packages/ui-vue/src/components/according.vue
deleted file mode 100644
index 1e809b7d363..00000000000
--- a/packages/ui-vue/src/components/according.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import According from '../../components/according/src/according.component';
-import AccordingItem from '../../components/according/src/components/according-item.component';
-</script>
-
-<template>
-    <According>
-        <AccordingItem title="According Panel One"></AccordingItem>
-        <AccordingItem title="According Panel Two"></AccordingItem>
-    </According>
-</template>
diff --git a/packages/ui-vue/src/components/accordion.vue b/packages/ui-vue/src/components/accordion.vue
index b1d6c5bc7dd..3cb230ab291 100644
--- a/packages/ui-vue/src/components/accordion.vue
+++ b/packages/ui-vue/src/components/accordion.vue
@@ -5,7 +5,7 @@ import AccordionItem from '../../components/accordion/src/components/accordion-i
 
 <template>
     <Accordion>
-        <AccordionItem title="According Panel One"></AccordionItem>
-        <AccordionItem title="According Panel Two"></AccordionItem>
+        <AccordionItem title="Accordion Panel One "></AccordionItem>
+        <AccordionItem title="Accordion Panel Two "></AccordionItem>
     </Accordion>
 </template>
-- 
Gitee