From 0194150c64973da9a5c5d97c5760fe72d15cef8e Mon Sep 17 00:00:00 2001
From: Carl Chen <ccheartszzz@gmail.com>
Date: Tue, 13 Aug 2024 22:19:59 +0800
Subject: [PATCH] chore: optimize descriptions layout

---
 .../collapse-card/collapse-card.scss          | 12 +++---
 .../collapse-card/collapse-card.vue           |  2 +-
 .../src/components/collapse-card/index.ts     |  4 +-
 .../components/descriptions/descriptions.vue  | 33 +++++++++++----
 .../src/components/descriptions/helper.ts     | 40 +++++++++++--------
 .../src/components/descriptions/index.ts      |  8 +---
 6 files changed, 57 insertions(+), 42 deletions(-)

diff --git a/packages/element-plus/src/components/collapse-card/collapse-card.scss b/packages/element-plus/src/components/collapse-card/collapse-card.scss
index 74d32e4..25719fa 100644
--- a/packages/element-plus/src/components/collapse-card/collapse-card.scss
+++ b/packages/element-plus/src/components/collapse-card/collapse-card.scss
@@ -9,20 +9,20 @@
   border: 1px solid var(--collapse-card-border);
 
   @include e('active') {
-    .collapse-card__arrow > svg {
-      transform: rotate(180deg);
-    }
+    $is-at-root: false !global;
 
+    @include e('arrow') {
+      & > svg {
+        transform: rotate(180deg);
 
-    $is-at-root: false !global;
+      }
+    }
 
     @include e('title') {
       border-bottom: 1px solid var(--collapse-card-border);
     }
 
     $is-at-root: true !global;
-
-
   }
 
   @include e('title') {
diff --git a/packages/element-plus/src/components/collapse-card/collapse-card.vue b/packages/element-plus/src/components/collapse-card/collapse-card.vue
index 54b725f..892f958 100644
--- a/packages/element-plus/src/components/collapse-card/collapse-card.vue
+++ b/packages/element-plus/src/components/collapse-card/collapse-card.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { ElCollapseTransition } from 'element-plus'
 import ArrowDownIcon from './arrow-down-icon.vue'
-import type { Props } from './helper'
 import { ns } from './helper'
+import type { Props } from './helper'
 
 defineOptions({ name: 'CollapseCard' })
 
diff --git a/packages/element-plus/src/components/collapse-card/index.ts b/packages/element-plus/src/components/collapse-card/index.ts
index cfc62e3..d0ad703 100644
--- a/packages/element-plus/src/components/collapse-card/index.ts
+++ b/packages/element-plus/src/components/collapse-card/index.ts
@@ -1,5 +1,3 @@
 import './collapse-card.scss'
 
-import CollapseCard from './collapse-card.vue'
-
-export { CollapseCard }
+export { default as CollapseCard } from './collapse-card.vue'
diff --git a/packages/element-plus/src/components/descriptions/descriptions.vue b/packages/element-plus/src/components/descriptions/descriptions.vue
index ef5e762..bfa19d5 100644
--- a/packages/element-plus/src/components/descriptions/descriptions.vue
+++ b/packages/element-plus/src/components/descriptions/descriptions.vue
@@ -1,25 +1,42 @@
 <script setup lang="ts">
 import { ElDescriptions, ElDescriptionsItem } from 'element-plus'
-import { _props } from './helper'
+import { isUndef, isStr } from '@cc-heart/utils'
+import type { Props } from './helper'
 
 defineOptions({ name: 'Descriptions' })
-defineProps(_props)
+
+const props = withDefaults(defineProps<Props>(), {
+  columns: () => [],
+  border: false,
+  span: 3,
+  defaultValue: '-',
+})
+
+const internalFormatterValue = (value: string) => {
+  if ((!value && isUndef(value)) || (isStr(value) && value === '')) {
+    return props.defaultValue
+  }
+
+  return value
+}
 </script>
 
 <template>
-  <el-descriptions :column="count" :border="border">
-    <template v-for="item in descriptionItems" :key="item.field">
-      <el-descriptions-item :span="item.span" :label="item.label">
+  <ElDescriptions :column="span" :border="border">
+    <template v-for="item in columns" :key="item.field">
+      <ElDescriptionsItem :span="item.span" :label="item.label">
         <template v-if="item.labelSlot" #label>
           <slot :name="item.labelSlot.name" :data="item" />
         </template>
+
         <template v-if="item.slot">
           <slot :name="item.slot.name" :data="item" />
         </template>
+
         <template v-else>
-          {{ item.value }}
+          {{ internalFormatterValue(item.value) }}
         </template>
-      </el-descriptions-item>
+      </ElDescriptionsItem>
     </template>
-  </el-descriptions>
+  </ElDescriptions>
 </template>
diff --git a/packages/element-plus/src/components/descriptions/helper.ts b/packages/element-plus/src/components/descriptions/helper.ts
index 9a515e6..01da439 100644
--- a/packages/element-plus/src/components/descriptions/helper.ts
+++ b/packages/element-plus/src/components/descriptions/helper.ts
@@ -1,7 +1,3 @@
-import { PropType } from 'vue'
-
-export const VERSION = '0.0.1'
-
 export interface DescriptionItem {
   label: string
   field: string
@@ -11,17 +7,27 @@ export interface DescriptionItem {
   labelSlot?: { name: string }
 }
 
-export const _props = {
-  count: {
-    type: Number,
-    default: 3,
-  },
-  descriptionItems: {
-    type: Array as PropType<Array<DescriptionItem>>,
-    default: () => [],
-  },
-  border: {
-    type: Boolean,
-    default: true,
-  },
+export interface Props {
+  /**
+   * @description: Number of columns displayed in a row
+   * @default 3
+   */
+  span: number
+
+  /**
+   * @description An array of `DescriptionItem` objects defining the columns.
+   * @default []
+   */
+  columns: Array<DescriptionItem>
+  /**
+   * @description Indicates whether to show a border.
+   * @default true
+   */
+  border: boolean
+
+  /**
+   * @description The default value to use if none is provided.
+   * @default '-'
+   */
+  defaultValue: string
 }
diff --git a/packages/element-plus/src/components/descriptions/index.ts b/packages/element-plus/src/components/descriptions/index.ts
index dd450a5..6ec0ec9 100644
--- a/packages/element-plus/src/components/descriptions/index.ts
+++ b/packages/element-plus/src/components/descriptions/index.ts
@@ -1,7 +1 @@
-import { withInstall } from '@packages/vue-utils'
-import Descriptions from './descriptions.vue'
-import { VERSION } from './helper'
-
-withInstall(Descriptions, VERSION)
-
-export { Descriptions }
+export { default as Descriptions } from './descriptions.vue'