From 6aeb2d7aab3cf03535cf071240d845b39c19cab4 Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>
Date: Tue, 15 Mar 2022 19:50:50 +0800
Subject: [PATCH] feat(components): [el-result] warn users using subTitle as
 slots (#6651)

* feat(components): [el-result] warn users using subTitle as slots

- Add deprecation warning for el-result sub-title slots
- Update documentation with a slotted sub title

* Fix useDeprecated typing issue
---
 docs/examples/result/basic-usage.vue      |  9 ++++-----
 packages/components/result/src/result.vue | 20 ++++++++++++++++----
 packages/hooks/use-deprecated/index.ts    |  5 +++--
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/docs/examples/result/basic-usage.vue b/docs/examples/result/basic-usage.vue
index 85899ac0f1..4c59effd28 100644
--- a/docs/examples/result/basic-usage.vue
+++ b/docs/examples/result/basic-usage.vue
@@ -34,11 +34,10 @@
       </el-result>
     </el-col>
     <el-col :sm="12" :lg="6">
-      <el-result
-        icon="info"
-        title="Info Tip"
-        sub-title="Please follow the instructions"
-      >
+      <el-result icon="info" title="Info Tip">
+        <template #sub-title>
+          <p>Using slot as subtitle</p>
+        </template>
         <template #extra>
           <el-button type="primary">Back</el-button>
         </template>
diff --git a/packages/components/result/src/result.vue b/packages/components/result/src/result.vue
index 4acc5401a6..b19c396e39 100644
--- a/packages/components/result/src/result.vue
+++ b/packages/components/result/src/result.vue
@@ -26,15 +26,27 @@
 </template>
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
-import { useNamespace } from '@element-plus/hooks'
+import { useNamespace, useDeprecated } from '@element-plus/hooks'
 import { resultProps, IconComponentMap, IconMap } from './result'
-
+const COMPONENT_NAME = 'ElResult'
 export default defineComponent({
-  name: 'ElResult',
+  name: COMPONENT_NAME,
   props: resultProps,
-  setup(props) {
+  setup(props, { slots }) {
     const ns = useNamespace('result')
 
+    useDeprecated(
+      {
+        scope: COMPONENT_NAME,
+        type: 'Slot',
+        from: 'subTitle',
+        replacement: 'sub-title',
+        version: '2.1.3',
+        ref: 'https://github.com/element-plus/element-plus/pull/6636/',
+      },
+      computed(() => !!slots.subTitle)
+    )
+
     const resultIcon = computed(() => {
       const icon = props.icon
       const iconClass = icon && IconMap[icon] ? IconMap[icon] : 'icon-info'
diff --git a/packages/hooks/use-deprecated/index.ts b/packages/hooks/use-deprecated/index.ts
index f9858d6e05..09921e5e94 100644
--- a/packages/hooks/use-deprecated/index.ts
+++ b/packages/hooks/use-deprecated/index.ts
@@ -9,10 +9,11 @@ type DeprecationParam = {
   scope: string
   version: string
   ref: string
+  type?: 'API' | 'Slot'
 }
 
 export const useDeprecated = (
-  { from, replacement, scope, version, ref }: DeprecationParam,
+  { from, replacement, scope, version, ref, type = 'API' }: DeprecationParam,
   condition: MaybeRef<boolean>
 ) => {
   watch(
@@ -21,7 +22,7 @@ export const useDeprecated = (
       if (val) {
         debugWarn(
           scope,
-          `API ${from} is about to be deprecated in version ${version}, please use ${replacement} instead.
+          `${type} ${from} is about to be deprecated in version ${version}, please use ${replacement} instead.
 For more detail, please visit: ${ref}
 `
         )