refactor: reorganize all components (#8303)

src/number-keyboard/NumberKeyboard.tsx

@@ -7,12 +7,13 @@ import {
   PropType,
   Transition,
   TeleportProps,
+  defineComponent,
 } from 'vue';
 import { createNamespace, getZIndexStyle, stopPropagation } from '../utils';
 import { useClickAway } from '@vant/use';
-import Key, { KeyType } from './Key';
+import NumberKeyboardKey, { KeyType } from './NumberKeyboardKey';
 
-const [createComponent, bem] = createNamespace('number-keyboard');
+const [name, bem] = createNamespace('number-keyboard');
 
 export type NumberKeyboardTheme = 'default' | 'custom';
 
@@ -23,7 +24,9 @@ type KeyConfig = {
   wider?: boolean;
 };
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     show: Boolean,
     title: String,
@@ -203,7 +206,7 @@ export default createComponent({
         }
 
         return (
-          <Key
+          <NumberKeyboardKey
             v-slots={keySlots}
             key={key.text}
             text={key.text}
@@ -221,7 +224,7 @@ export default createComponent({
         return (
           <div class={bem('sidebar')}>
             {props.showDeleteKey && (
-              <Key
+              <NumberKeyboardKey
                 v-slots={{ delete: slots.delete }}
                 large
                 text={props.deleteButtonText}
@@ -229,7 +232,7 @@ export default createComponent({
                 onPress={onPress}
               />
             )}
-            <Key
+            <NumberKeyboardKey
               large
               text={props.closeButtonText}
               type="close"

src/number-keyboard/NumberKeyboardKey.tsx

@@ -1,9 +1,9 @@
-import { ref, PropType } from 'vue';
+import { ref, PropType, defineComponent } from 'vue';
 import { createNamespace } from '../utils';
 import { useTouch } from '../composables/use-touch';
 import Loading from '../loading';
 
-const [createComponent, bem] = createNamespace('key');
+const [name, bem] = createNamespace('key');
 
 const CollapseIcon = (
   <svg class={bem('collapse-icon')} viewBox="0 0 30 24">
@@ -25,7 +25,9 @@ const DeleteIcon = (
 
 export type KeyType = '' | 'delete' | 'extra' | 'close';
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     type: String as PropType<KeyType>,
     text: [Number, String],

src/number-keyboard/index.ts

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