refactor: tabs & card (#4732)

* refactor: tabs

* refactor: tabs

* fix: tabs hotreload error

* refactor: rename useRef

* feat: add leftExtra rightExtra

* refactor: tabs

* test: update tabs test

* refactor: card

* doc: update tabs demo

* refactor: add card style

* style: update vue dep

Author: tangjinzhou

components/_util/hooks/useRef.ts

@@ -0,0 +1,20 @@
+import type { Ref, ComponentPublicInstance } from 'vue';
+import { onBeforeUpdate, ref } from 'vue';
+import type { Key } from '../type';
+
+type RefType = HTMLElement | ComponentPublicInstance;
+export type RefsValue = Map<Key, RefType>;
+type UseRef = [(key: Key) => (el: RefType) => void, Ref<RefsValue>];
+const useRefs = (): UseRef => {
+  const refs = ref<RefsValue>(new Map());
+
+  const setRef = (key: Key) => (el: RefType) => {
+    refs.value.set(key, el);
+  };
+  onBeforeUpdate(() => {
+    refs.value = new Map();
+  });
+  return [setRef, refs];
+};
+
+export default useRefs;

components/_util/hooks/useRefs.ts

@@ -2,7 +2,7 @@ import type { Ref } from 'vue';
 import { ref } from 'vue';
 
 export default function useState<T, R = Ref<T>>(
-  defaultStateValue: T | (() => T),
+  defaultStateValue?: T | (() => T),
 ): [R, (val: T) => void] {
   const initValue: T =
     typeof defaultStateValue === 'function' ? (defaultStateValue as any)() : defaultStateValue;