refactor: reorganize all components (#8303)

src/index-bar/IndexBar.tsx

@@ -6,6 +6,7 @@ import {
   PropType,
   onMounted,
   CSSProperties,
+  defineComponent,
 } from 'vue';
 
 // Utils
@@ -30,8 +31,6 @@ import {
 import { useTouch } from '../composables/use-touch';
 import { useExpose } from '../composables/use-expose';
 
-export const INDEX_BAR_KEY = Symbol('IndexBar');
-
 export type IndexBarProvide = {
   props: {
     sticky: boolean;
@@ -49,9 +48,13 @@ function genAlphabet() {
   return indexList;
 }
 
-const [createComponent, bem] = createNamespace('index-bar');
+const [name, bem] = createNamespace('index-bar');
+
+export const INDEX_BAR_KEY = Symbol(name);
+
+export default defineComponent({
+  name,
 
-export default createComponent({
   props: {
     zIndex: [Number, String],
     highlightColor: String,

src/index-bar/index.ts

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