chore: prefer named exports (#8315)

* chore: prefer named exports

* chore: fix import

src/action-bar-button/ActionBarButton.tsx

@@ -8,7 +8,7 @@ import { useExpose } from '../composables/use-expose';
 import { useRoute, routeProps } from '../composables/use-route';
 
 // Components
-import Button, { ButtonType } from '../button';
+import { Button, ButtonType } from '../button';
 
 const [name, bem] = createNamespace('action-bar-button');
 

src/action-bar-button/test/index.spec.ts

@@ -1,5 +1,5 @@
 import { mount } from '../../../test';
-import ActionBarButton from '..';
+import { ActionBarButton } from '..';
 
 test('should render default slot correctly', () => {
   const wrapper = mount(ActionBarButton, {

src/action-bar-icon/ActionBarIcon.tsx

@@ -7,8 +7,8 @@ import { useParent } from '@vant/use';
 import { useRoute, routeProps } from '../composables/use-route';
 
 // Components
-import Icon from '../icon';
-import Badge from '../badge';
+import { Icon } from '../icon';
+import { Badge } from '../badge';
 
 const [name, bem] = createNamespace('action-bar-icon');
 

src/action-bar-icon/test/index.spec.ts

@@ -1,5 +1,5 @@
 import { mount } from '../../../test';
-import ActionBarIcon from '..';
+import { ActionBarIcon } from '..';
 
 test('should render default slot correctly', () => {
   const wrapper = mount(ActionBarIcon, {

src/action-bar/demo/index.vue

@@ -64,7 +64,7 @@
 
 <script lang="ts">
 import { useTranslate } from '@demo/use-translate';
-import Toast from '../../toast';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {

src/action-bar/test/index.spec.ts

@@ -1,4 +1,4 @@
-import ActionBar from '..';
+import { ActionBar } from '..';
 import { mount } from '../../../test';
 
 test('should allow to disable safe-area-inset-bottom prop', () => {

src/action-sheet/ActionSheet.tsx

@@ -4,9 +4,9 @@ import { nextTick, PropType, defineComponent } from 'vue';
 import { createNamespace, pick } from '../utils';
 
 // Components
-import Icon from '../icon';
-import Popup from '../popup';
-import Loading from '../loading';
+import { Icon } from '../icon';
+import { Popup } from '../popup';
+import { Loading } from '../loading';
 import { popupSharedProps, popupSharedPropKeys } from '../popup/shared';
 
 const [name, bem] = createNamespace('action-sheet');

src/action-sheet/demo/index.vue

@@ -55,7 +55,7 @@
 import { computed, reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { ActionSheetAction } from '..';
-import Toast from '../../toast';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {

src/action-sheet/test/index.spec.ts

@@ -1,6 +1,6 @@
 import { nextTick } from 'vue';
 import { mount } from '../../../test';
-import ActionSheet from '..';
+import { ActionSheet } from '..';
 
 test('should emit select event after clicking option', async () => {
   const wrapper = mount(ActionSheet, {

src/address-edit/AddressEdit.tsx

@@ -16,14 +16,14 @@ import { isMobile } from '../utils/validate/mobile';
 import { useExpose } from '../composables/use-expose';
 
 // Components
-import Area, { AreaList, AreaColumnOption } from '../area';
-import Cell from '../cell';
-import Field from '../field';
-import Popup from '../popup';
-import Toast from '../toast';
-import Button from '../button';
-import Dialog from '../dialog';
-import Switch from '../switch';
+import { Area, AreaList, AreaColumnOption } from '../area';
+import { Cell } from '../cell';
+import { Field } from '../field';
+import { Popup } from '../popup';
+import { Toast } from '../toast';
+import { Button } from '../button';
+import { Dialog } from '../dialog';
+import { Switch } from '../switch';
 import AddressEditDetail, { AddressEditSearchItem } from './AddressEditDetail';
 
 const [name, bem, t] = createNamespace('address-edit');

src/address-edit/AddressEditDetail.tsx

@@ -5,8 +5,8 @@ import { ComponentInstance, createNamespace } from '../utils';
 import { isAndroid } from '../utils/validate/system';
 
 // Components
-import Cell from '../cell';
-import Field from '../field';
+import { Cell } from '../cell';
+import { Field } from '../field';
 
 const [name, bem, t] = createNamespace('address-edit-detail');
 const android = isAndroid();

src/address-edit/demo/index.vue

@@ -18,8 +18,8 @@
 <script lang="ts">
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import Toast from '../../toast';
-import areaList from '../../area/demo/area';
+import { Toast } from '../../toast';
+import { areaList } from '../../area/demo/area';
 
 const i18n = {
   'zh-CN': {

src/address-edit/test/index.spec.js

@@ -1,5 +1,5 @@
-import AddressEdit from '..';
-import areaList from '../../area/demo/area-simple';
+import { AddressEdit } from '..';
+import { areaList } from '../../area/demo/area-simple';
 import { mount, later, trigger } from '../../../test';
 
 const defaultAddressInfo = {

src/address-list/AddressList.tsx

@@ -4,8 +4,8 @@ import { PropType, defineComponent } from 'vue';
 import { createNamespace } from '../utils';
 
 // Components
-import Button from '../button';
-import RadioGroup from '../radio-group';
+import { Button } from '../button';
+import { RadioGroup } from '../radio-group';
 import AddressListItem, { AddressListAddress } from './AddressListItem';
 
 const [name, bem, t] = createNamespace('address-list');
@@ -68,7 +68,7 @@ export default defineComponent({
         <AddressListItem
           v-slots={{
             bottom: slots['item-bottom'],
-            tag: slots['tag'],
+            tag: slots.tag,
           }}
           key={item.id}
           address={item}

src/address-list/AddressListItem.tsx

@@ -4,10 +4,10 @@ import { PropType, defineComponent } from 'vue';
 import { createNamespace } from '../utils';
 
 // Components
-import Tag from '../tag';
-import Icon from '../icon';
-import Cell from '../cell';
-import Radio from '../radio';
+import { Tag } from '../tag';
+import { Icon } from '../icon';
+import { Cell } from '../cell';
+import { Radio } from '../radio';
 
 const [name, bem] = createNamespace('address-item');
 

src/address-list/demo/index.vue

@@ -15,7 +15,7 @@
 <script lang="ts">
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import Toast from '../../toast';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {

src/address-list/test/index.spec.ts

@@ -1,5 +1,5 @@
 import { mount } from '../../../test';
-import AddressList from '..';
+import { AddressList } from '..';
 
 const list = [
   {

src/area/Area.tsx

@@ -19,7 +19,7 @@ import { pickerProps } from '../picker/Picker';
 import { useExpose } from '../composables/use-expose';
 
 // Components
-import Picker from '../picker';
+import { Picker } from '../picker';
 
 const [name, bem] = createNamespace('area');
 

src/area/demo/area-en.ts

@@ -1,4 +1,4 @@
-export default {
+export const areaListEn = {
   province_list: {
     110000: 'Beijing',
     330000: 'Zhejiang',

src/area/demo/area-simple.ts

@@ -1,4 +1,4 @@
-export default {
+export const areaList = {
   province_list: {
     110000: '北京市',
     120000: '天津市',

src/area/demo/area.ts

@@ -1,4 +1,4 @@
-export default {
+export const areaList = {
   province_list: {
     110000: '北京市',
     120000: '天津市',

src/area/demo/index.vue

@@ -22,8 +22,8 @@
 
 <script lang="ts">
 import { ref } from 'vue';
-import AreaList from './area';
-import AreaListEn from './area-en';
+import { areaList } from './area';
+import { areaListEn } from './area-en';
 import { useTranslate } from '@demo/use-translate';
 
 const i18n = {
@@ -32,14 +32,14 @@ const i18n = {
     title3: '配置显示列',
     title4: '配置列占位提示文字',
     columnsPlaceholder: ['请选择', '请选择', '请选择'],
-    areaList: AreaList,
+    areaList,
   },
   'en-US': {
     title2: 'Initial Value',
     title3: 'Columns Number',
     title4: 'Columns Placeholder',
     columnsPlaceholder: ['Choose', 'Choose', 'Choose'],
-    areaList: AreaListEn,
+    areaList: areaListEn,
   },
 };
 

src/area/test/index.spec.js

@@ -1,5 +1,5 @@
-import Area from '..';
-import areaList from '../demo/area-simple';
+import { Area } from '..';
+import { areaList } from '../demo/area-simple';
 import { mount, later, triggerDrag } from '../../../test';
 
 const firstOption = [

src/badge/test/index.spec.ts

@@ -1,4 +1,4 @@
-import Badge from '..';
+import { Badge } from '..';
 import { mount } from '../../../test';
 
 test('should render nothing when content is empty string', () => {

src/button/Button.tsx

@@ -11,8 +11,8 @@ import { BORDER_SURROUND } from '../utils/constant';
 import { useRoute, routeProps } from '../composables/use-route';
 
 // Components
-import Icon from '../icon';
-import Loading, { LoadingType } from '../loading';
+import { Icon } from '../icon';
+import { Loading, LoadingType } from '../loading';
 
 const [name, bem] = createNamespace('button');
 

src/button/test/index.spec.ts

@@ -1,5 +1,5 @@
 import { mount } from '../../../test';
-import Button from '..';
+import { Button } from '..';
 
 test('should emit click event', () => {
   const wrapper = mount(Button);

src/calendar/Calendar.tsx

@@ -31,9 +31,9 @@ import { useRefs } from '../composables/use-refs';
 import { useExpose } from '../composables/use-expose';
 
 // Components
-import Popup, { PopupPosition } from '../popup';
-import Button from '../button';
-import Toast from '../toast';
+import { Popup, PopupPosition } from '../popup';
+import { Button } from '../button';
+import { Toast } from '../toast';
 import CalendarMonth, { CalendarType } from './CalendarMonth';
 import CalendarHeader from './CalendarHeader';
 

src/calendar/test/index.legacy.js

@@ -1,4 +1,4 @@
-import Calendar from '..';
+import { Calendar } from '..';
 import { mount, later } from '../../../test';
 import { getNextDay } from '../utils';
 import {

src/calendar/test/index.spec.js

@@ -1,4 +1,4 @@
-import Calendar from '..';
+import { Calendar } from '..';
 import { mount } from '../../../test';
 import { getNextDay, getPrevDay } from '../utils';
 import { minDate, maxDate } from './utils';

src/calendar/test/prop.legacy.js

@@ -1,4 +1,4 @@
-import Calendar from '..';
+import { Calendar } from '..';
 import { mount, later } from '../../../test';
 import { minDate, maxDate, formatRange, formatDate } from './utils';
 

src/card/Card.tsx

@@ -4,8 +4,8 @@ import { defineComponent } from 'vue';
 import { createNamespace, isDef } from '../utils';
 
 // Components
-import Tag from '../tag';
-import Image from '../image';
+import { Tag } from '../tag';
+import { Image } from '../image';
 
 const [name, bem] = createNamespace('card');
 

src/card/test/index.spec.ts

@@ -1,4 +1,4 @@
-import Card from '..';
+import { Card } from '..';
 import { mount } from '../../../test';
 
 test('should emit click event after clicked', () => {

src/cascader/Cascader.tsx

@@ -2,9 +2,9 @@ import { nextTick, PropType, reactive, watch, defineComponent } from 'vue';
 import { createNamespace } from '../utils';
 
 // Components
-import Tab from '../tab';
-import Tabs from '../tabs';
-import Icon from '../icon';
+import { Tab } from '../tab';
+import { Tabs } from '../tabs';
+import { Icon } from '../icon';
 
 const [name, bem, t] = createNamespace('cascader');
 

src/cascader/test/index.spec.ts

@@ -1,6 +1,5 @@
-import Cascader from '..';
+import { Cascader } from '..';
 import { mount, later } from '../../../test';
-
 import options from '../demo/area-en-US';
 
 test('should emit change event when active option changed', async () => {

src/cell-group/test/index.spec.ts

@@ -1,4 +1,4 @@
-import CellGroup from '..';
+import { CellGroup } from '..';
 import { mount } from '../../../test';
 
 test('should render title slot correctly', () => {

src/cell/Cell.tsx

@@ -7,7 +7,7 @@ import { createNamespace, isDef, UnknownProp } from '../utils';
 import { useRoute, routeProps } from '../composables/use-route';
 
 // Components
-import Icon from '../icon';
+import { Icon } from '../icon';
 
 const [name, bem] = createNamespace('cell');
 

src/cell/test/index.spec.ts

@@ -1,4 +1,4 @@
-import Cell from '..';
+import { Cell } from '..';
 import { mount } from '../../../test';
 
 test('should render default slot correctly', () => {

src/checkbox-group/test/index.spec.tsx

@@ -1,7 +1,7 @@
 import { ref, nextTick } from 'vue';
 import { mount } from '../../../test';
-import Checkbox from '../../checkbox';
-import CheckboxGroup, { CheckboxGroupToggleAllOptions } from '..';
+import { Checkbox } from '../../checkbox';
+import { CheckboxGroup, CheckboxGroupToggleAllOptions } from '..';
 
 test('should emit "update:modelValue" event when checkbox is clicked', async () => {
   const wrapper = mount({

src/checkbox/Checker.tsx

@@ -1,6 +1,6 @@
 import { ref, computed, PropType, defineComponent } from 'vue';
 import { addUnit, UnknownProp } from '../utils';
-import Icon from '../icon';
+import { Icon } from '../icon';
 
 export type CheckerShape = 'square' | 'round';
 export type CheckerDirection = 'horizontal' | 'vertical';

src/checkbox/test/index.spec.ts

@@ -1,4 +1,4 @@
-import Checkbox from '..';
+import { Checkbox } from '..';
 import { mount } from '../../../test';
 
 test('should emit "update:modelValue" event when checkbox icon is clicked', async () => {

src/circle/test/index.spec.ts

@@ -1,4 +1,4 @@
-import Circle from '..';
+import { Circle } from '..';
 import { mount, later } from '../../../test';
 
 // TODO

src/col/test/index.spec.tsx

@@ -1,5 +1,5 @@
-import Col from '..';
-import Row from '../../row';
+import { Col } from '..';
+import { Row } from '../../row';
 import { mount } from '../../../test';
 
 test('should render Col correcly', () => {

src/collapse-item/CollapseItem.tsx

@@ -11,7 +11,7 @@ import { useExpose } from '../composables/use-expose';
 import { useLazyRender } from '../composables/use-lazy-render';
 
 // Components
-import Cell from '../cell';
+import { Cell } from '../cell';
 
 const [name, bem] = createNamespace('collapse-item');
 

src/collapse/test/index.spec.tsx

@@ -1,6 +1,6 @@
 import { defineComponent, ref } from 'vue';
-import Collapse from '..';
-import CollapseItem from '../../collapse-item';
+import { Collapse } from '..';
+import { CollapseItem } from '../../collapse-item';
 import { later, mount } from '../../../test';
 
 const Component = defineComponent({

src/contact-card/ContactCard.tsx

@@ -1,6 +1,6 @@
 import { PropType, defineComponent } from 'vue';
 import { createNamespace } from '../utils';
-import Cell from '../cell';
+import { Cell } from '../cell';
 
 const [name, bem, t] = createNamespace('contact-card');
 

src/contact-card/demo/index.vue

@@ -25,7 +25,7 @@
 <script lang="ts">
 import { computed } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import Toast from '../../toast';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {

src/contact-card/test/index.spec.ts

@@ -1,4 +1,4 @@
-import ContactCard from '..';
+import { ContactCard } from '..';
 import { mount } from '../../../test';
 
 test('should emit click event when clicked', () => {

src/contact-edit/ContactEdit.tsx

@@ -5,12 +5,12 @@ import { createNamespace } from '../utils';
 import { isMobile } from '../utils/validate/mobile';
 
 // Components
-import Cell from '../cell';
-import Form from '../form';
-import Field from '../field';
-import Button from '../button';
-import Dialog from '../dialog';
-import Switch from '../switch';
+import { Cell } from '../cell';
+import { Form } from '../form';
+import { Field } from '../field';
+import { Button } from '../button';
+import { Dialog } from '../dialog';
+import { Switch } from '../switch';
 
 const [name, bem, t] = createNamespace('contact-edit');
 

src/contact-edit/demo/index.vue

@@ -14,7 +14,7 @@
 <script lang="ts">
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import Toast from '../../toast';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {

src/contact-edit/test/index.spec.ts

@@ -1,5 +1,5 @@
 import { VueWrapper } from '@vue/test-utils';
-import ContactEdit, { ContactEditInfo } from '..';
+import { ContactEdit, ContactEditInfo } from '..';
 import { mount, later } from '../../../test';
 
 const contactInfo = {

src/contact-list/ContactList.tsx

@@ -5,12 +5,12 @@ import { createNamespace, UnknownProp } from '../utils';
 import { RED } from '../utils/constant';
 
 // Components
-import Tag from '../tag';
-import Icon from '../icon';
-import Cell from '../cell';
-import Radio from '../radio';
-import Button from '../button';
-import RadioGroup from '../radio-group';
+import { Tag } from '../tag';
+import { Icon } from '../icon';
+import { Cell } from '../cell';
+import { Radio } from '../radio';
+import { Button } from '../button';
+import { RadioGroup } from '../radio-group';
 
 const [name, bem, t] = createNamespace('contact-list');
 

src/contact-list/demo/index.vue

@@ -14,7 +14,7 @@
 <script lang="ts">
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import Toast from '../../toast';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {

src/contact-list/test/index.spec.ts

@@ -1,4 +1,4 @@
-import ContactList from '..';
+import { ContactList } from '..';
 import { mount } from '../../../test';
 
 const contactInfo = {

src/count-down/demo/index.vue

@@ -44,7 +44,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { ComponentInstance } from '../../utils';
-import Toast from '../../toast';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {

src/count-down/test/index.spec.js

@@ -1,5 +1,5 @@
 import { KeepAlive, nextTick } from 'vue';
-import CountDown from '..';
+import { CountDown } from '..';
 import { mount, later } from '../../../test';
 
 test('should emit finish event when finished', async () => {

src/coupon-cell/CouponCell.tsx

@@ -1,9 +1,13 @@
 import { PropType, defineComponent } from 'vue';
+
+// Utils
 import { isDef, createNamespace } from '../utils';
-import type { CouponInfo } from '../coupon';
 
 // Components
-import Cell from '../cell';
+import { Cell } from '../cell';
+
+// Types
+import type { CouponInfo } from '../coupon';
 
 const [name, bem, t] = createNamespace('coupon-cell');
 

src/coupon-cell/test/index.spec.ts

@@ -1,5 +1,5 @@
 import { mount } from '../../../test';
-import CouponCell from '../index';
+import { CouponCell } from '../index';
 
 const coupon = {
   id: 1,

src/coupon-list/CouponList.tsx

@@ -16,11 +16,11 @@ import { useWindowSize } from '@vant/use';
 import { useRefs } from '../composables/use-refs';
 
 // Components
-import Tab from '../tab';
-import Tabs from '../tabs';
-import Field from '../field';
-import Button from '../button';
-import Coupon, { CouponInfo } from '../coupon';
+import { Tab } from '../tab';
+import { Tabs } from '../tabs';
+import { Field } from '../field';
+import { Button } from '../button';
+import { Coupon, CouponInfo } from '../coupon';
 
 const [name, bem, t] = createNamespace('coupon-list');
 const EMPTY_IMAGE = 'https://img.yzcdn.cn/vant/coupon-empty.png';

src/coupon-list/demo/index.vue

@@ -27,7 +27,7 @@
 import { computed, reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { CouponInfo } from '../../coupon';
-import Toast from '../../toast';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {

src/coupon-list/test/index.spec.ts

@@ -1,5 +1,5 @@
 import { later, mount } from '../../../test';
-import CouponList from '..';
+import { CouponList } from '..';
 
 const coupon = {
   id: 1,

src/coupon/Coupon.tsx

@@ -1,7 +1,7 @@
 import { computed, PropType, defineComponent } from 'vue';
 import { padZero, createNamespace } from '../utils';
 import { RED } from '../utils/constant';
-import Checkbox from '../checkbox';
+import { Checkbox } from '../checkbox';
 
 export type CouponInfo = {
   id: string | number;

src/coupon/test/index.spec.ts

@@ -1,5 +1,5 @@
 import { mount } from '../../../test';
-import Coupon from '..';
+import { Coupon } from '..';
 
 const coupon = {
   id: 1,

src/datetime-picker/DatePicker.tsx

@@ -31,7 +31,7 @@ import {
 import { useExpose } from '../composables/use-expose';
 
 // Components
-import Picker from '../picker';
+import { Picker } from '../picker';
 
 const currentYear = new Date().getFullYear();
 const [name] = createNamespace('date-picker');

src/datetime-picker/TimePicker.tsx

@@ -21,7 +21,7 @@ import { times, sharedProps, pickerKeys } from './utils';
 import { useExpose } from '../composables/use-expose';
 
 // Components
-import Picker from '../picker';
+import { Picker } from '../picker';
 
 const [name] = createNamespace('time-picker');
 

src/datetime-picker/test/datetime-picker.legacy.js

@@ -1,4 +1,4 @@
-import DatetimePicker from '..';
+import { DatetimePicker } from '..';
 import { mount } from '../../../test';
 
 test('confirm & cancel event', () => {

src/dialog/Dialog.tsx

@@ -4,13 +4,13 @@ import { PropType, reactive, defineComponent } from 'vue';
 import { callInterceptor, Interceptor } from '../utils/interceptor';
 import { createNamespace, addUnit, pick, UnknownProp } from '../utils';
 import { BORDER_TOP, BORDER_LEFT } from '../utils/constant';
+import { popupSharedProps, popupSharedPropKeys } from '../popup/shared';
 
 // Components
-import Popup from '../popup';
-import Button from '../button';
-import ActionBar from '../action-bar';
-import ActionBarButton from '../action-bar-button';
-import { popupSharedProps, popupSharedPropKeys } from '../popup/shared';
+import { Popup } from '../popup';
+import { Button } from '../button';
+import { ActionBar } from '../action-bar';
+import { ActionBarButton } from '../action-bar-button';
 
 const [name, bem, t] = createNamespace('dialog');
 

src/dialog/demo/index.vue

@@ -30,7 +30,7 @@
 <script lang="ts">
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import Dialog from '..';
+import { Dialog } from '..';
 import type { DialogAction } from '../Dialog';
 
 const i18n = {

src/dialog/test/funciton-call.spec.js

@@ -1,6 +1,6 @@
 import { createApp } from 'vue';
 import { later } from '../../../test';
-import Dialog from '..';
+import { Dialog } from '..';
 import DialogComponent from '../Dialog';
 
 test('should update default options when calling setDefaultOptions method', () => {

src/dropdown-item/DropdownItem.tsx

@@ -19,9 +19,9 @@ import { useParent } from '@vant/use';
 import { useExpose } from '../composables/use-expose';
 
 // Components
-import Cell from '../cell';
-import Icon from '../icon';
-import Popup from '../popup';
+import { Cell } from '../cell';
+import { Icon } from '../icon';
+import { Popup } from '../popup';
 
 const [name, bem] = createNamespace('dropdown-item');
 

src/empty/test/index.spec.ts

@@ -1,4 +1,4 @@
-import Empty from '..';
+import { Empty } from '..';
 import { mount } from '../../../test';
 
 test('should render image slot correctly', () => {

src/field/Field.tsx

@@ -37,8 +37,8 @@ import { useExpose } from '../composables/use-expose';
 import { FORM_KEY, FIELD_KEY } from '../composables/use-link-field';
 
 // Components
-import Icon from '../icon';
-import Cell from '../cell';
+import { Icon } from '../icon';
+import { Cell } from '../cell';
 
 // Types
 import type {

src/field/test/index.spec.js

@@ -1,4 +1,4 @@
-import Field from '..';
+import { Field } from '..';
 import { mount } from '../../../test';
 
 test('should emit "update:modelValue" event when after inputing', () => {

src/form/demo/FieldTypeArea.vue

@@ -21,18 +21,18 @@
 import { reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { AreaColumnOption } from '../../area';
-import AreaList from '../../area/demo/area';
-import AreaListEn from '../../area/demo/area-en';
+import { areaList } from '../../area/demo/area';
+import { areaListEn } from '../../area/demo/area-en';
 
 const i18n = {
   'zh-CN': {
     picker: '地区选择',
-    areaList: AreaList,
+    areaList,
     placeholder: '点击选择省市区',
   },
   'en-US': {
     picker: 'Area Picker',
-    areaList: AreaListEn,
+    areaList: areaListEn,
     placeholder: 'Select area',
   },
 };

src/form/demo/ValidateRules.vue

@@ -42,7 +42,7 @@
 import { reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { FieldValidateError } from '../../field/types';
-import Toast from '../../toast';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {

src/grid-item/GridItem.tsx

@@ -10,8 +10,8 @@ import { useParent } from '@vant/use';
 import { useRoute, routeProps } from '../composables/use-route';
 
 // Components
-import Icon from '../icon';
-import Badge from '../badge';
+import { Icon } from '../icon';
+import { Badge } from '../badge';
 
 const [name, bem] = createNamespace('grid-item');
 

src/grid/test/index.spec.js

@@ -1,6 +1,6 @@
 import { mount } from '../../../test';
-import Grid from '..';
-import GridItem from '../../grid-item';
+import { Grid } from '..';
+import { GridItem } from '../../grid-item';
 
 test('should render square grid with gutter correctly', () => {
   const wrapper = mount({

src/icon/Icon.tsx

@@ -1,6 +1,6 @@
 import { PropType, defineComponent } from 'vue';
 import { addUnit, createNamespace } from '../utils';
-import Badge from '../badge';
+import { Badge } from '../badge';
 
 const [name, bem] = createNamespace('icon');
 

src/icon/demo/index.vue

@@ -98,7 +98,7 @@ import icons from '@vant/icons';
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { RED } from '../../utils/constant';
-import Notify from '../../notify';
+import { Notify } from '../../notify';
 
 // from https://30secondsofcode.org
 function copyToClipboard(str: string) {

src/icon/test/index.spec.js

@@ -1,4 +1,4 @@
-import Icon from '..';
+import { Icon } from '..';
 import { mount } from '../../../test';
 
 test('should render icon with builtin icon name correctly', () => {

src/image-preview/ImagePreview.tsx

@@ -23,9 +23,9 @@ import { useWindowSize } from '@vant/use';
 import { useExpose } from '../composables/use-expose';
 
 // Components
-import Icon from '../icon';
-import Swipe, { SwipeToOptions } from '../swipe';
-import Popup, { PopupCloseIconPosition } from '../popup';
+import { Icon } from '../icon';
+import { Swipe, SwipeToOptions } from '../swipe';
+import { Popup, PopupCloseIconPosition } from '../popup';
 import ImagePreviewItem from './ImagePreviewItem';
 
 const [name, bem] = createNamespace('image-preview');

src/image-preview/ImagePreviewItem.tsx

@@ -6,10 +6,10 @@ import { range, preventDefault, createNamespace } from '../utils';
 // Composables
 import { useTouch } from '../composables/use-touch';
 
-// Component
-import Image from '../image';
-import Loading from '../loading';
-import SwipeItem from '../swipe-item';
+// Components
+import { Image } from '../image';
+import { Loading } from '../loading';
+import { SwipeItem } from '../swipe-item';
 
 function getDistance(touches: TouchList) {
   return Math.sqrt(

src/image-preview/demo/index.vue

@@ -36,8 +36,8 @@
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import ImagePreview, { ImagePreviewOptions } from '..';
-import Toast from '../../toast';
+import { ImagePreview, ImagePreviewOptions } from '..';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {

src/image-preview/test/function.spec.ts

@@ -1,5 +1,5 @@
 import { createApp } from 'vue';
-import ImagePreview from '..';
+import { ImagePreview } from '..';
 import ImagePreviewComponent from '../ImagePreview';
 
 test('should expose ImagePreviewComponent in ImagePreview.Component', () => {

src/image-preview/test/index.spec.ts

@@ -1,14 +1,14 @@
+import { nextTick } from 'vue';
+import { DOMWrapper } from '@vue/test-utils/dist/domWrapper';
 import {
   mount,
   later,
+  trigger,
   triggerDrag,
   mockGetBoundingClientRect,
-  trigger,
 } from '../../../test';
+import { ImagePreview } from '..';
 import ImagePreviewComponent from '../ImagePreview';
-import ImagePreview from '..';
-import { nextTick } from 'vue';
-import { DOMWrapper } from '@vue/test-utils/dist/domWrapper';
 
 const images = [
   'https://img.yzcdn.cn/1.png',

src/image/Image.tsx

@@ -1,3 +1,4 @@
+// Utils
 import {
   ref,
   watch,
@@ -15,7 +16,9 @@ import {
   createNamespace,
   ComponentInstance,
 } from '../utils';
-import Icon from '../icon';
+
+// Components
+import { Icon } from '../icon';
 
 const [name, bem] = createNamespace('image');
 

src/image/test/index.spec.ts

@@ -1,6 +1,6 @@
 import { mount } from '../../../test';
+import { Lazyload } from '../../lazyload';
 import VanImage from '..';
-import Lazyload from '../../lazyload';
 
 const IMAGE_URL = 'https://img.com';
 

src/index-bar/test/index.spec.js

@@ -1,4 +1,4 @@
-import { nextTick, onMounted, ref } from 'vue';
+import { ref, nextTick, onMounted } from 'vue';
 import {
   mount,
   trigger,
@@ -6,8 +6,8 @@ import {
   mockScrollTop,
   mockScrollIntoView,
 } from '../../../test';
-import IndexBar from '..';
-import IndexAnchor from '../../index-anchor';
+import { IndexBar } from '..';
+import { IndexAnchor } from '../../index-anchor';
 
 test('should allow to custom anchor content', () => {
   const wrapper = mount({

src/lazyload/index.ts

@@ -1,3 +1,4 @@
 import { Lazyload } from '@vant/lazyload';
 
 export default Lazyload;
+export { Lazyload };

src/list/List.tsx

@@ -16,7 +16,7 @@ import { useRect, useScrollParent, useEventListener } from '@vant/use';
 import { useExpose } from '../composables/use-expose';
 
 // Components
-import Loading from '../loading';
+import { Loading } from '../loading';
 
 const [name, bem, t] = createNamespace('list');
 

src/list/test/index.spec.js

@@ -1,4 +1,4 @@
-import List from '..';
+import { List } from '..';
 import { mount, later, mockGetBoundingClientRect } from '../../../test';
 
 test('should emit load event when reaching bottom', async () => {

src/loading/test/index.spec.ts

@@ -1,5 +1,5 @@
 import { mount } from '../../../test';
-import Loading from '..';
+import { Loading } from '..';
 
 test('should change loading size when using size prop', () => {
   const wrapper = mount(Loading, {

src/nav-bar/NavBar.tsx

@@ -8,7 +8,7 @@ import { BORDER_BOTTOM } from '../utils/constant';
 import { usePlaceholder } from '../composables/use-placeholder';
 
 // Components
-import Icon from '../icon';
+import { Icon } from '../icon';
 
 const [name, bem] = createNamespace('nav-bar');
 

src/nav-bar/demo/index.vue

@@ -21,7 +21,7 @@
 
 <script lang="ts">
 import { useTranslate } from '@demo/use-translate';
-import Toast from '../../toast';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {

src/nav-bar/test/index.spec.ts

@@ -1,4 +1,4 @@
-import NavBar from '..';
+import { NavBar } from '..';
 import { mount, mockGetBoundingClientRect, later } from '../../../test';
 
 test('should render left slot correctly', () => {

src/notice-bar/NoticeBar.tsx

@@ -1,4 +1,6 @@
 import { ref, watch, reactive, PropType, defineComponent } from 'vue';
+
+// Utils
 import { isDef, createNamespace } from '../utils';
 
 // Composables
@@ -11,7 +13,7 @@ import {
 } from '@vant/use';
 
 // Components
-import Icon from '../icon';
+import { Icon } from '../icon';
 
 export type NoticeBarMode = 'closeable' | 'link';
 

src/notice-bar/test/index.spec.tsx

@@ -1,4 +1,4 @@
-import NoticeBar from '..';
+import { NoticeBar } from '..';
 import { mount, later } from '../../../test';
 
 test('should emit close event when close icon is clicked', () => {

src/notify/Notify.tsx

@@ -1,6 +1,6 @@
 import { PropType, defineComponent } from 'vue';
 import { createNamespace, UnknownProp } from '../utils';
-import Popup from '../popup';
+import { Popup } from '../popup';
 import { popupSharedProps } from '../popup/shared';
 
 const [name, bem] = createNamespace('notify');

src/notify/demo/index.vue

@@ -32,7 +32,7 @@
 <script lang="ts">
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import Notify from '..';
+import { Notify } from '..';
 import { NotifyType } from '../Notify';
 
 const i18n = {

src/notify/test/index.spec.js

@@ -1,8 +1,8 @@
 import { createApp } from 'vue';
-import Notify from '..';
-import NotifyComponent from '../Notify';
 import { later } from '../../../test';
 import { trigger } from '../../utils';
+import { Notify } from '..';
+import NotifyComponent from '../Notify';
 
 test('should not throw error if calling clear method before render notify', () => {
   Notify.clear();

src/number-keyboard/NumberKeyboardKey.tsx

@@ -1,7 +1,7 @@
 import { ref, PropType, defineComponent } from 'vue';
 import { createNamespace } from '../utils';
 import { useTouch } from '../composables/use-touch';
-import Loading from '../loading';
+import { Loading } from '../loading';
 
 const [name, bem] = createNamespace('key');