refactor: reorganize all components (#8303)

src/utils/create/component.ts

@@ -1,17 +0,0 @@
-/**
- * Create a basic component with common options
- */
-import { App, defineComponent, ComponentOptionsWithObjectProps } from 'vue';
-import { camelize } from '../format/string';
-
-export function createComponent(name: string) {
-  return function (sfc: ComponentOptionsWithObjectProps) {
-    sfc.name = name;
-    sfc.install = (app: App) => {
-      app.component(name as string, sfc);
-      app.component(camelize(`-${name}`), sfc);
-    };
-
-    return defineComponent(sfc);
-  } as typeof defineComponent;
-}

src/utils/create/index.ts

@@ -1,12 +1,7 @@
 import { createBEM } from './bem';
-import { createComponent } from './component';
 import { createTranslate } from './translate';
 
 export function createNamespace(name: string) {
   name = 'van-' + name;
-  return [
-    createComponent(name),
-    createBEM(name),
-    createTranslate(name),
-  ] as const;
+  return [name, createBEM(name), createTranslate(name)] as const;
 }

src/utils/index.ts

@@ -1,5 +1,6 @@
 export * from './base';
 export * from './create';
+export * from './installable';
 export * from './format/unit';
 export * from './format/number';
 export * from './format/string';

src/utils/installable.ts

@@ -0,0 +1,13 @@
+import { App } from 'vue';
+import { camelize } from './format/string';
+
+export function installable<T>(options: T) {
+  return {
+    ...options,
+    install(app: App) {
+      const { name } = options as any;
+      app.component(name, options);
+      app.component(camelize(`-${name}`), options);
+    },
+  };
+}