style: refactor vnode.js to ts

Author: tangjinzhou

components/_util/vnode.js renamed to components/_util/vnode.ts

@@ -1,19 +1,27 @@
 import { filterEmpty } from './props-util';
+import type { VNode, VNodeProps } from 'vue';
 import { cloneVNode } from 'vue';
 import warning from './warning';
+import type { RefObject } from './createRef';
 
-export function cloneElement(vnode, nodeProps = {}, override = true, mergeRef = false) {
+export function cloneElement<T, U>(
+  vnode: VNode<T, U> | VNode<T, U>[],
+  nodeProps: Record<string, any> &
+    Omit<VNodeProps, 'ref'> & { ref?: VNodeProps['ref'] | RefObject } = {},
+  override = true,
+  mergeRef = false,
+): VNode<T, U> {
   let ele = vnode;
   if (Array.isArray(vnode)) {
     ele = filterEmpty(vnode)[0];
   }
   if (!ele) {
     return null;
   }
-  const node = cloneVNode(ele, nodeProps, mergeRef);
+  const node = cloneVNode(ele as VNode<T, U>, nodeProps as any, mergeRef);
 
   // cloneVNode内部是合并属性，这里改成覆盖属性
-  node.props = override ? { ...node.props, ...nodeProps } : node.props;
+  node.props = (override ? { ...node.props, ...nodeProps } : node.props) as any;
   warning(typeof node.props.class !== 'object', 'class must be string');
   return node;
 }

components/menu/src/Menu.tsx

@@ -1,5 +1,5 @@
 import type { Key } from '../../_util/type';
-import type { ExtractPropTypes, PropType } from 'vue';
+import type { ExtractPropTypes, PropType, VNode } from 'vue';
 import { computed, defineComponent, ref, inject, watchEffect, watch, onMounted, unref } from 'vue';
 import shallowEqual from '../../_util/shallowequal';
 import type { StoreMenuInfo } from './hooks/useMenuContext';
@@ -357,7 +357,7 @@ export default defineComponent({
             let icon = props.expandIcon || slots.expandIcon;
             icon = typeof icon === 'function' ? icon(opt) : icon;
             return cloneElement(
-              icon,
+              icon as unknown as VNode,
               {
                 class: `${prefixCls.value}-submenu-expand-icon`,
               },

components/vc-cascader/hooks/useDisplayValues.ts

@@ -6,7 +6,7 @@ import type {
   InternalFieldNames,
 } from '../Cascader';
 import { toPathKey } from '../utils/commonUtil';
-import type { Ref } from 'vue';
+import type { Ref, VNode } from 'vue';
 import { computed } from 'vue';
 import { isValidElement } from '../../_util/props-util';
 import { cloneElement } from '../../_util/vnode';
@@ -32,7 +32,9 @@ export default (
 
         // If exist non-string value, use VueNode instead
         return mergedLabels.reduce((list, label, index) => {
-          const keyedLabel = isValidElement(label) ? cloneElement(label, { key: index }) : label;
+          const keyedLabel = isValidElement(label)
+            ? cloneElement(label as unknown as VNode, { key: index })
+            : label;
 
           if (index === 0) {
             return [keyedLabel];

components/vc-picker/panels/TimePanel/TimeBody.tsx

@@ -7,7 +7,7 @@ import type { SharedTimeProps } from '.';
 import { setTime as utilSetTime } from '../../utils/timeUtil';
 import { cloneElement } from '../../../_util/vnode';
 import type { VueNode } from '../../../_util/type';
-import type { Ref } from 'vue';
+import type { Ref, VNode } from 'vue';
 import { onBeforeUpdate, ref, watchEffect, computed, defineComponent } from 'vue';
 
 function generateUnits(
@@ -245,7 +245,7 @@ const TimeBody = defineComponent({
       ) {
         if (condition !== false) {
           columns.push({
-            node: cloneElement(node, {
+            node: cloneElement(node as unknown as VNode, {
               prefixCls: columnPrefixCls,
               value: columnValue,
               active: activeColumnIndex === columns.length,

components/vc-select/Selector/Input.tsx

@@ -175,29 +175,4 @@ const Input = defineComponent({
   },
 });
 
-// Input.props = {
-//   inputRef: PropTypes.any,
-//   prefixCls: PropTypes.string,
-//   id: PropTypes.string,
-//   inputElement: PropTypes.any,
-//   disabled: PropTypes.looseBool,
-//   autofocus: PropTypes.looseBool,
-//   autocomplete: PropTypes.string,
-//   editable: PropTypes.looseBool,
-//   accessibilityIndex: PropTypes.number,
-//   value: PropTypes.string,
-//   open: PropTypes.looseBool,
-//   tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-//   /** Pass accessibility props to input */
-//   attrs: PropTypes.object,
-//   onKeydown: PropTypes.func,
-//   onMousedown: PropTypes.func,
-//   onChange: PropTypes.func,
-//   onPaste: PropTypes.func,
-//   onCompositionstart: PropTypes.func,
-//   onCompositionend: PropTypes.func,
-//   onFocus: PropTypes.func,
-//   onBlur: PropTypes.func,
-// };
-
 export default Input;