refactor: reorganize all components (#8303)

src/tabs/Tabs.tsx

@@ -8,6 +8,7 @@ import {
   ComputedRef,
   onActivated,
   CSSProperties,
+  defineComponent,
   ComponentPublicInstance,
 } from 'vue';
 
@@ -45,9 +46,9 @@ import Sticky from '../sticky';
 import TabsTitle from './TabsTitle';
 import TabsContent from './TabsContent';
 
-const [createComponent, bem] = createNamespace('tabs');
+const [name, bem] = createNamespace('tabs');
 
-export const TABS_KEY = Symbol('Tabs');
+export const TABS_KEY = Symbol(name);
 
 export type TabType = 'line' | 'card';
 
@@ -64,7 +65,9 @@ export type TabsProvide = {
   currentName: ComputedRef<number | string | undefined>;
 };
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     color: String,
     border: Boolean,

src/tabs/TabsContent.tsx

@@ -1,10 +1,12 @@
-import { ref, watch, onMounted } from 'vue';
+import { ref, watch, onMounted, defineComponent } from 'vue';
 import { ComponentInstance, createNamespace } from '../utils';
 import Swipe from '../swipe';
 
-const [createComponent, bem] = createNamespace('tabs');
+const [name, bem] = createNamespace('tabs');
+
+export default defineComponent({
+  name,
 
-export default createComponent({
   props: {
     inited: Boolean,
     animated: Boolean,

src/tabs/TabsTitle.tsx

@@ -1,10 +1,12 @@
-import { computed, CSSProperties } from 'vue';
+import { computed, CSSProperties, defineComponent } from 'vue';
 import { createNamespace, isDef } from '../utils';
 import Badge from '../badge';
 
-const [createComponent, bem] = createNamespace('tab');
+const [name, bem] = createNamespace('tab');
+
+export default defineComponent({
+  name,
 
-export default createComponent({
   props: {
     dot: Boolean,
     type: String,

src/tabs/index.ts

@@ -0,0 +1,7 @@
+import { installable } from '../utils';
+import _Tabs from './Tabs';
+
+const Tabs = installable(_Tabs);
+
+export default Tabs;
+export { Tabs };