✨(component): 整理 vueUtil 工具, 常用插槽解析与类型判断

package/component/src/component/dropdown/index.vue

@@ -20,7 +20,6 @@ import {
   cloneVNode,
   useAttrs,
   StyleValue,
-  PropType,
 } from "vue";
 import {
   computed,
@@ -45,9 +44,8 @@ import {
   DropdownContext,
 } from "./interface";
 import TeleportWrapper from "../_components/teleportWrapper.vue";
-import { useFirstElement, isScrollElement, getScrollElements } from "./util";
+import { useFirstElement, getScrollElements, transformPlacement } from "./util";
-import RenderFunction, { RenderFunc } from "../_components/renderFunction";
+import RenderFunction from "../_components/renderFunction";
-import { transformPlacement } from "./util";
 
 export type DropdownTrigger = "click" | "hover" | "focus" | "contextMenu";
 

package/component/src/component/dropdown/util.ts

@@ -1,27 +1,12 @@
 import { DropdownPlacement } from "./interface";
 
 import { Component, onMounted, onUpdated, ref, VNode, VNodeTypes } from "vue";
+import { isArrayChildren, isComponent, isElement } from "src/utils";
 
 export interface SlotChildren {
   value?: VNode[];
 }
 
-// Quoted from arco-vue
-// https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/_utils/vue-utils.ts
-export enum ShapeFlags {
-  ELEMENT = 1,
-  FUNCTIONAL_COMPONENT = 1 << 1,
-  STATEFUL_COMPONENT = 1 << 2,
-  COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT,
-  TEXT_CHILDREN = 1 << 3,
-  ARRAY_CHILDREN = 1 << 4,
-  SLOTS_CHILDREN = 1 << 5,
-  TELEPORT = 1 << 6,
-  SUSPENSE = 1 << 7,
-  COMPONENT_SHOULD_KEEP_ALIVE = 1 << 8,
-  COMPONENT_KEPT_ALIVE = 1 << 9,
-}
-
 export const isScrollElement = (element: HTMLElement) => {
   return (
     element.scrollHeight > element.offsetHeight ||
@@ -41,24 +26,6 @@ export const getScrollElements = (container: HTMLElement | undefined) => {
   return scrollElements;
 };
 
-export const isElement = (vn: VNode) => {
-  return Boolean(vn && vn.shapeFlag & ShapeFlags.ELEMENT);
-};
-
-export const isComponent = (
-  vn: VNode,
-  type?: VNodeTypes
-): type is Component => {
-  return Boolean(vn && vn.shapeFlag & ShapeFlags.COMPONENT);
-};
-
-export const isArrayChildren = (
-  vn: VNode,
-  children: VNode["children"]
-): children is VNode[] => {
-  return Boolean(vn && vn.shapeFlag & ShapeFlags.ARRAY_CHILDREN);
-};
-
 export const getChildrenArray = (vn: VNode): VNode[] | undefined => {
   if (isArrayChildren(vn, vn.children)) {
     return vn.children;
@@ -140,6 +107,5 @@ export const transformPlacement = (
       placementMap[separated[1]] || separated[1]
     }` as DropdownPlacement;
   }
-
   return placement;
-};
+};

package/component/src/utils/index.ts

@@ -1,3 +1,4 @@
 export * from "./domUtil";
 export * from "./withInstall";
 export * from "./arrayUtil";
+export * from "./vueUtil";

package/component/src/utils/vueUtil.ts

@@ -0,0 +1,27 @@
+import { Component, VNode, VNodeTypes } from "vue";
+
+export enum ShapeFlags {
+  ELEMENT = 1,
+  FUNCTIONAL_COMPONENT = 1 << 1,
+  STATEFUL_COMPONENT = 1 << 2,
+  COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT,
+  TEXT_CHILDREN = 1 << 3,
+  ARRAY_CHILDREN = 1 << 4,
+  SLOTS_CHILDREN = 1 << 5,
+  TELEPORT = 1 << 6,
+  SUSPENSE = 1 << 7,
+  COMPONENT_SHOULD_KEEP_ALIVE = 1 << 8,
+  COMPONENT_KEPT_ALIVE = 1 << 9,
+}
+
+export const isElement = (vn: VNode) => {
+  return Boolean(vn && vn.shapeFlag & ShapeFlags.ELEMENT);
+};
+
+export const isComponent = (vn: VNode, type?: VNodeTypes): type is Component => {
+  return Boolean(vn && vn.shapeFlag & ShapeFlags.COMPONENT);
+};
+
+export const isArrayChildren = (vn: VNode, children: VNode["children"]): children is VNode[] => {
+  return Boolean(vn && vn.shapeFlag & ShapeFlags.ARRAY_CHILDREN);
+};