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

@@ -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>

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'

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}
 `
         )