refactor: reorganize all components (youzan#8303)

Author: chenjiahan

src/action-bar-button/index.tsx renamed to src/action-bar-button/ActionBarButton.tsx

@@ -1,6 +1,6 @@
-import { computed, PropType } from 'vue';
+import { computed, PropType, defineComponent } from 'vue';
 import { createNamespace } from '../utils';
-import { ACTION_BAR_KEY } from '../action-bar';
+import { ACTION_BAR_KEY } from '../action-bar/ActionBar';
 
 // Composables
 import { useParent } from '@vant/use';
@@ -10,9 +10,11 @@ import { useRoute, routeProps } from '../composables/use-route';
 // Components
 import Button, { ButtonType } from '../button';
 
-const [createComponent, bem] = createNamespace('action-bar-button');
+const [name, bem] = createNamespace('action-bar-button');
+
+export default defineComponent({
+  name,
 
-export default createComponent({
   props: {
     ...routeProps,
     type: String as PropType<ButtonType>,

src/action-bar-button/index.ts

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

src/action-bar-icon/index.tsx renamed to src/action-bar-icon/ActionBarIcon.tsx

@@ -1,5 +1,6 @@
+import { defineComponent } from 'vue';
 import { createNamespace, UnknownProp } from '../utils';
-import { ACTION_BAR_KEY } from '../action-bar';
+import { ACTION_BAR_KEY } from '../action-bar/ActionBar';
 
 // Composables
 import { useParent } from '@vant/use';
@@ -9,9 +10,11 @@ import { useRoute, routeProps } from '../composables/use-route';
 import Icon from '../icon';
 import Badge from '../badge';
 
-const [createComponent, bem] = createNamespace('action-bar-icon');
+const [name, bem] = createNamespace('action-bar-icon');
+
+export default defineComponent({
+  name,
 
-export default createComponent({
   props: {
     ...routeProps,
     dot: Boolean,

src/action-bar-icon/index.ts

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

src/action-bar/index.tsx renamed to src/action-bar/ActionBar.tsx

@@ -1,11 +1,14 @@
+import { defineComponent } from 'vue';
 import { createNamespace } from '../utils';
 import { useChildren } from '@vant/use';
 
-const [createComponent, bem] = createNamespace('action-bar');
+const [name, bem] = createNamespace('action-bar');
 
-export const ACTION_BAR_KEY = Symbol('ActionBar');
+export const ACTION_BAR_KEY = Symbol(name);
+
+export default defineComponent({
+  name,
 
-export default createComponent({
   props: {
     safeAreaInsetBottom: {
       type: Boolean,

src/action-bar/index.ts

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

src/action-sheet/index.tsx renamed to src/action-sheet/ActionSheet.tsx

@@ -1,4 +1,4 @@
-import { nextTick, PropType } from 'vue';
+import { nextTick, PropType, defineComponent } from 'vue';
 
 // Utils
 import { createNamespace, pick } from '../utils';
@@ -9,7 +9,7 @@ import Popup from '../popup';
 import Loading from '../loading';
 import { popupSharedProps, popupSharedPropKeys } from '../popup/shared';
 
-const [createComponent, bem] = createNamespace('action-sheet');
+const [name, bem] = createNamespace('action-sheet');
 
 export type ActionSheetAction = {
   name?: string;
@@ -21,7 +21,9 @@ export type ActionSheetAction = {
   className?: unknown;
 };
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     ...popupSharedProps,
     title: String,

src/action-sheet/index.ts

@@ -0,0 +1,8 @@
+import { installable } from '../utils';
+import _ActionSheet from './ActionSheet';
+
+const ActionSheet = installable(_ActionSheet);
+
+export default ActionSheet;
+export { ActionSheet };
+export type { ActionSheetAction } from './ActionSheet';

src/address-edit/index.tsx renamed to src/address-edit/AddressEdit.tsx

@@ -1,4 +1,12 @@
-import { ref, watch, computed, nextTick, reactive, PropType } from 'vue';
+import {
+  ref,
+  watch,
+  computed,
+  nextTick,
+  reactive,
+  PropType,
+  defineComponent,
+} from 'vue';
 
 // Utils
 import { ComponentInstance, createNamespace, isObject } from '../utils';
@@ -16,11 +24,11 @@ import Toast from '../toast';
 import Button from '../button';
 import Dialog from '../dialog';
 import Switch from '../switch';
-import Detail, { AddressEditSearchItem } from './Detail';
+import AddressEditDetail, { AddressEditSearchItem } from './AddressEditDetail';
 
-const [createComponent, bem, t] = createNamespace('address-edit');
+const [name, bem, t] = createNamespace('address-edit');
 
-export type AddressInfo = {
+export type AddressEditInfo = {
   tel: string;
   name: string;
   city: string;
@@ -33,7 +41,7 @@ export type AddressInfo = {
   addressDetail: string;
 };
 
-const defaultData: AddressInfo = {
+const defaultData: AddressEditInfo = {
   name: '',
   tel: '',
   city: '',
@@ -50,7 +58,9 @@ function isPostal(value: string) {
   return /^\d{6}$/.test(value);
 }
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     areaList: Object as PropType<AreaList>,
     isSaving: Boolean,
@@ -85,7 +95,7 @@ export default createComponent({
       default: 200,
     },
     addressInfo: {
-      type: Object as PropType<Partial<AddressInfo>>,
+      type: Object as PropType<Partial<AddressEditInfo>>,
       default: () => ({ ...defaultData }),
     },
     telValidator: {
@@ -118,7 +128,7 @@ export default createComponent({
     const areaRef = ref<ComponentInstance>();
 
     const state = reactive({
-      data: {} as AddressInfo,
+      data: {} as AddressEditInfo,
       showAreaPopup: false,
       detailFocused: false,
       errorInfo: {
@@ -359,7 +369,7 @@ export default createComponent({
                 state.showAreaPopup = !disableArea;
               }}
             />
-            <Detail
+            <AddressEditDetail
               show={props.showDetail}
               value={data.addressDetail}
               focused={state.detailFocused}

src/address-edit/Detail.tsx renamed to src/address-edit/AddressEditDetail.tsx

@@ -1,4 +1,4 @@
-import { PropType, ref } from 'vue';
+import { PropType, ref, defineComponent } from 'vue';
 
 // Utils
 import { ComponentInstance, createNamespace } from '../utils';
@@ -8,15 +8,17 @@ import { isAndroid } from '../utils/validate/system';
 import Cell from '../cell';
 import Field from '../field';
 
-const [createComponent, bem, t] = createNamespace('address-edit-detail');
+const [name, bem, t] = createNamespace('address-edit-detail');
 const android = isAndroid();
 
 export type AddressEditSearchItem = {
   name: string;
   address: string;
 };
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     show: Boolean,
     value: String,

src/address-edit/index.ts

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

src/address-list/index.tsx renamed to src/address-list/AddressList.tsx

@@ -1,27 +1,29 @@
-import { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 
 // Utils
 import { createNamespace } from '../utils';
 
 // Components
 import Button from '../button';
 import RadioGroup from '../radio-group';
-import AddressItem, { AddressListItem } from './Item';
+import AddressListItem, { AddressListAddress } from './AddressListItem';
 
-const [createComponent, bem, t] = createNamespace('address-list');
+const [name, bem, t] = createNamespace('address-list');
+
+export default defineComponent({
+  name,
 
-export default createComponent({
   props: {
     modelValue: [Number, String],
     disabledText: String,
     addButtonText: String,
     defaultTagText: String,
     list: {
-      type: Array as PropType<AddressListItem[]>,
+      type: Array as PropType<AddressListAddress[]>,
       default: () => [],
     },
     disabledList: {
-      type: Array as PropType<AddressListItem[]>,
+      type: Array as PropType<AddressListAddress[]>,
       default: () => [],
     },
     switchable: {
@@ -42,7 +44,7 @@ export default createComponent({
 
   setup(props, { slots, emit }) {
     const renderItem = (
-      item: AddressListItem,
+      item: AddressListAddress,
       index: number,
       disabled?: boolean
     ) => {
@@ -63,7 +65,7 @@ export default createComponent({
       };
 
       return (
-        <AddressItem
+        <AddressListItem
           v-slots={{
             bottom: slots['item-bottom'],
           }}
@@ -79,7 +81,7 @@ export default createComponent({
       );
     };
 
-    const renderList = (list: AddressListItem[], disabled?: boolean) => {
+    const renderList = (list: AddressListAddress[], disabled?: boolean) => {
       if (list) {
         return list.map((item, index) => renderItem(item, index, disabled));
       }

src/address-list/Item.tsx renamed to src/address-list/AddressListItem.tsx

@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 
 // Utils
 import { createNamespace } from '../utils';
@@ -9,23 +9,25 @@ import Icon from '../icon';
 import Cell from '../cell';
 import Radio from '../radio';
 
-const [createComponent, bem] = createNamespace('address-item');
+const [name, bem] = createNamespace('address-item');
 
-export type AddressListItem = {
+export type AddressListAddress = {
   id: number | string;
   tel: number | string;
   name: string;
   address: string;
   isDefault?: boolean;
 };
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     disabled: Boolean,
     switchable: Boolean,
     defaultTagText: String,
     address: {
-      type: Object as PropType<AddressListItem>,
+      type: Object as PropType<AddressListAddress>,
       required: true,
     },
   },

src/address-list/index.ts

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

src/area/index.tsx renamed to src/area/Area.tsx

@@ -7,19 +7,21 @@ import {
   nextTick,
   PropType,
   onMounted,
+  defineComponent,
 } from 'vue';
 
 // Utils
 import { deepClone } from '../utils/deep-clone';
 import { pick, createNamespace, ComponentInstance } from '../utils';
+import { pickerProps } from '../picker/Picker';
 
 // Composables
 import { useExpose } from '../composables/use-expose';
 
 // Components
-import Picker, { pickerProps } from '../picker';
+import Picker from '../picker';
 
-const [createComponent, bem] = createNamespace('area');
+const [name, bem] = createNamespace('area');
 
 const EMPTY_CODE = '000000';
 
@@ -40,7 +42,9 @@ export type AreaColumnOption = {
 
 type ColumnType = 'province' | 'county' | 'city';
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     ...pickerProps,
     value: String,

src/area/index.ts

@@ -0,0 +1,8 @@
+import { installable } from '../utils';
+import _Area from './Area';
+
+const Area = installable(_Area);
+
+export default Area;
+export { Area };
+export type { AreaList, AreaColumnOption } from './Area';

src/badge/index.tsx renamed to src/badge/Badge.tsx

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