refactor(utils): refactor flattedChildren (#9748)

packages/components/descriptions/src/description.vue

@@ -27,6 +27,7 @@
 <script lang="ts" setup>
 // @ts-nocheck
 import { computed, provide, useSlots } from 'vue'
+import { flattedChildren } from '@element-plus/utils'
 import { useNamespace, useSize } from '@element-plus/hooks'
 import ElDescriptionsRow from './descriptions-row.vue'
 import { descriptionsKey } from './token'
@@ -48,19 +49,6 @@ provide(descriptionsKey, props)
 
 const descriptionKls = computed(() => [ns.b(), ns.m(descriptionsSize.value)])
 
-const flattedChildren = (children) => {
-  const temp = Array.isArray(children) ? children : [children]
-  const res = []
-  temp.forEach((child) => {
-    if (Array.isArray(child.children)) {
-      res.push(...flattedChildren(child.children))
-    } else {
-      res.push(child)
-    }
-  })
-  return res
-}
-
 const filledNode = (node, span, count, isLast = false) => {
   if (!node.props) {
     node.props = {}

packages/components/menu/src/menu.ts

@@ -17,6 +17,7 @@ import { More } from '@element-plus/icons-vue'
 import {
   buildProps,
   definePropType,
+  flattedChildren,
   isObject,
   isString,
   mutable,
@@ -29,7 +30,7 @@ import { useMenuCssVar } from './use-menu-css-var'
 
 import type { MenuItemClicked, MenuProvider, SubMenuProvider } from './types'
 import type { NavigationFailure, Router } from 'vue-router'
-import type { ExtractPropTypes, VNode, VNodeNormalizedChildren } from 'vue'
+import type { ExtractPropTypes, VNode } from 'vue'
 import type { UseResizeObserverReturn } from '@vueuse/core'
 
 export const menuProps = buildProps({
@@ -356,19 +357,6 @@ export default defineComponent({
       })
     }
 
-    const flattedChildren = (children: VNodeNormalizedChildren) => {
-      const vnodes = Array.isArray(children) ? children : [children]
-      const result: any[] = []
-      vnodes.forEach((child: any) => {
-        if (Array.isArray(child.children)) {
-          result.push(...flattedChildren(child.children))
-        } else {
-          result.push(child)
-        }
-      })
-      return result
-    }
-
     return () => {
       let slot = slots.default?.() ?? []
       const vShowMore: VNode[] = []

packages/utils/vue/vnode.ts

@@ -137,3 +137,16 @@ export const ensureOnlyChild = (children: VNodeArrayChildren | undefined) => {
   }
   return children[0]
 }
+
+export const flattedChildren = (children: VNodeNormalizedChildren) => {
+  const vNodes = isArray(children) ? children : [children]
+  const result: any[] = []
+  vNodes.forEach((child: any) => {
+    if (isArray(child.children)) {
+      result.push(...flattedChildren(child.children))
+    } else {
+      result.push(child)
+    }
+  })
+  return result
+}