From e5408763982fd1ca24dfe2aa12cce7211b7fb498 Mon Sep 17 00:00:00 2001 From: neverland Date: Mon, 8 Mar 2021 11:50:37 +0800 Subject: [PATCH] refactor: reorganize all components (#8303) --- .../{index.tsx => ActionBarButton.tsx} | 10 +++--- src/action-bar-button/index.ts | 7 ++++ .../{index.tsx => ActionBarIcon.tsx} | 9 +++-- src/action-bar-icon/index.ts | 7 ++++ src/action-bar/{index.tsx => ActionBar.tsx} | 9 +++-- src/action-bar/index.ts | 7 ++++ .../{index.tsx => ActionSheet.tsx} | 8 +++-- src/action-sheet/index.ts | 8 +++++ .../{index.tsx => AddressEdit.tsx} | 28 ++++++++++----- .../{Detail.tsx => AddressEditDetail.tsx} | 8 +++-- src/address-edit/index.ts | 7 ++++ .../{index.tsx => AddressList.tsx} | 20 ++++++----- .../{Item.tsx => AddressListItem.tsx} | 12 ++++--- src/address-list/index.ts | 7 ++++ src/area/{index.tsx => Area.tsx} | 10 ++++-- src/area/index.ts | 8 +++++ src/badge/{index.tsx => Badge.tsx} | 8 +++-- src/badge/index.ts | 7 ++++ src/button/{index.tsx => Button.tsx} | 13 +++++-- src/button/index.ts | 8 +++++ src/calendar/{index.tsx => Calendar.tsx} | 30 ++++++++++------ .../{components/Day.tsx => CalendarDay.tsx} | 20 ++++++----- .../Header.tsx => CalendarHeader.tsx} | 11 +++--- .../Month.tsx => CalendarMonth.tsx} | 36 ++++++++++--------- src/calendar/demo/index.vue | 4 +-- src/calendar/index.ts | 7 ++++ src/calendar/utils.ts | 4 +-- src/card/{index.tsx => Card.tsx} | 8 +++-- src/card/index.ts | 7 ++++ src/cascader/{index.tsx => Cascader.tsx} | 8 +++-- src/cascader/index.ts | 8 +++++ src/cascader/test/index.spec.ts | 2 +- src/cell-group/{index.tsx => CellGroup.tsx} | 7 ++-- src/cell-group/index.ts | 7 ++++ src/cell/{index.tsx => Cell.tsx} | 8 +++-- src/cell/index.ts | 7 ++++ .../{index.tsx => CheckboxGroup.tsx} | 10 +++--- src/checkbox-group/index.ts | 8 +++++ src/checkbox/{index.tsx => Checkbox.tsx} | 13 ++++--- src/checkbox/Checker.tsx | 2 +- src/checkbox/index.ts | 7 ++++ src/circle/{index.tsx => Circle.tsx} | 8 +++-- src/circle/index.ts | 7 ++++ src/col/{index.tsx => Col.tsx} | 10 +++--- src/col/index.ts | 7 ++++ .../{index.tsx => CollapseItem.tsx} | 13 ++++--- src/collapse-item/index.ts | 7 ++++ src/collapse/{index.tsx => Collapse.tsx} | 10 +++--- src/collapse/index.ts | 7 ++++ src/composables/use-link-field.ts | 4 +-- src/composables/use-placeholder.tsx | 2 +- .../{index.tsx => ContactCard.tsx} | 8 +++-- src/contact-card/index.ts | 7 ++++ .../{index.tsx => ContactEdit.tsx} | 14 ++++---- src/contact-edit/index.ts | 8 +++++ src/contact-edit/test/index.spec.ts | 10 ++++-- .../{index.tsx => ContactList.tsx} | 8 +++-- src/contact-list/index.ts | 7 ++++ src/count-down/{index.tsx => CountDown.tsx} | 8 +++-- src/count-down/index.ts | 7 ++++ src/coupon-cell/{index.tsx => CouponCell.tsx} | 8 +++-- src/coupon-cell/index.ts | 7 ++++ src/coupon-list/{index.tsx => CouponList.tsx} | 16 +++++++-- src/coupon-list/index.ts | 7 ++++ src/coupon/{index.tsx => Coupon.tsx} | 8 +++-- src/coupon/index.ts | 8 +++++ src/datetime-picker/DatePicker.tsx | 16 +++++++-- .../{index.tsx => DatetimePicker.tsx} | 8 +++-- src/datetime-picker/TimePicker.tsx | 15 ++++++-- src/datetime-picker/index.ts | 7 ++++ src/datetime-picker/utils.ts | 2 +- src/dialog/Dialog.tsx | 8 +++-- src/dialog/index.tsx | 8 ++--- src/dialog/test/funciton-call.spec.js | 2 +- src/divider/{index.tsx => Divider.tsx} | 8 +++-- src/divider/index.ts | 8 +++++ .../{index.tsx => DropdownItem.tsx} | 12 +++++-- src/dropdown-item/index.ts | 8 +++++ .../{index.tsx => DropdownMenu.tsx} | 17 ++++++--- src/dropdown-menu/index.ts | 8 +++++ src/empty/{index.tsx => Empty.tsx} | 7 ++-- src/empty/index.ts | 7 ++++ src/field/{index.tsx => Field.tsx} | 10 ++++-- src/field/index.ts | 17 +++++++++ src/form/{index.tsx => Form.tsx} | 8 +++-- src/form/index.ts | 7 ++++ src/grid-item/{index.tsx => GridItem.tsx} | 10 +++--- src/grid-item/index.ts | 7 ++++ src/grid/{index.tsx => Grid.tsx} | 10 +++--- src/grid/index.ts | 7 ++++ src/icon/{index.tsx => Icon.tsx} | 8 +++-- src/icon/index.ts | 7 ++++ src/image-preview/ImagePreview.tsx | 7 ++-- src/image-preview/index.tsx | 8 ++--- src/image-preview/test/function.spec.ts | 2 +- src/image/{index.tsx => Image.tsx} | 7 ++-- src/image/index.ts | 8 +++++ .../{index.tsx => IndexAnchor.tsx} | 10 +++--- src/index-anchor/index.ts | 7 ++++ src/index-bar/{index.tsx => IndexBar.tsx} | 11 +++--- src/index-bar/index.ts | 7 ++++ src/list/{index.tsx => List.tsx} | 16 +++++++-- src/list/index.ts | 7 ++++ src/loading/{index.tsx => Loading.tsx} | 8 +++-- src/loading/index.ts | 8 +++++ src/nav-bar/{index.tsx => NavBar.tsx} | 8 +++-- src/nav-bar/index.ts | 7 ++++ src/notice-bar/{index.tsx => NoticeBar.tsx} | 8 +++-- src/notice-bar/index.ts | 7 ++++ src/notify/Notify.tsx | 8 +++-- src/notify/index.tsx | 8 ++--- .../{index.tsx => NumberKeyboard.tsx} | 15 ++++---- .../{Key.tsx => NumberKeyboardKey.tsx} | 8 +++-- src/number-keyboard/index.ts | 7 ++++ src/overlay/{index.tsx => Overlay.tsx} | 8 +++-- src/overlay/index.ts | 7 ++++ src/pagination/{index.tsx => Pagination.tsx} | 8 +++-- src/pagination/index.ts | 7 ++++ .../{index.tsx => PasswordInput.tsx} | 7 ++-- src/password-input/index.ts | 7 ++++ src/picker/{index.tsx => Picker.tsx} | 8 +++-- src/picker/PickerColumn.tsx | 10 +++--- src/picker/index.ts | 7 ++++ src/popover/{index.tsx => Popover.tsx} | 7 ++-- src/popover/index.ts | 7 ++++ src/popup/{index.tsx => Popup.tsx} | 7 ++-- src/popup/index.ts | 8 +++++ src/progress/{index.tsx => Progress.tsx} | 16 +++++++-- src/progress/index.ts | 7 ++++ .../{index.tsx => PullRefresh.tsx} | 8 +++-- src/pull-refresh/index.ts | 7 ++++ src/radio-group/{index.tsx => RadioGroup.tsx} | 10 +++--- src/radio-group/index.ts | 7 ++++ src/radio/{index.tsx => Radio.tsx} | 15 ++++++-- src/radio/index.ts | 7 ++++ src/rate/{index.tsx => Rate.tsx} | 8 +++-- src/rate/index.ts | 7 ++++ src/row/{index.tsx => Row.tsx} | 10 +++--- src/row/index.ts | 7 ++++ src/search/{index.tsx => Search.tsx} | 8 +++-- src/search/index.ts | 7 ++++ src/share-sheet/{index.tsx => ShareSheet.tsx} | 8 +++-- src/share-sheet/index.ts | 8 +++++ .../{index.tsx => SidebarItem.tsx} | 15 ++++++-- src/sidebar-item/index.ts | 7 ++++ src/sidebar/{index.tsx => Sidebar.tsx} | 9 +++-- src/sidebar/index.ts | 7 ++++ src/skeleton/{index.tsx => Skeleton.tsx} | 8 +++-- src/skeleton/index.ts | 7 ++++ src/slider/{index.tsx => Slider.tsx} | 8 +++-- src/slider/index.ts | 7 ++++ src/step/{index.tsx => Step.tsx} | 10 +++--- src/step/index.ts | 7 ++++ src/stepper/{index.tsx => Stepper.tsx} | 8 +++-- src/stepper/index.ts | 7 ++++ src/steps/{index.tsx => Steps.tsx} | 10 +++--- src/steps/index.ts | 7 ++++ src/sticky/{index.tsx => Sticky.tsx} | 15 ++++++-- src/sticky/index.ts | 7 ++++ src/submit-bar/{index.tsx => SubmitBar.tsx} | 8 +++-- src/submit-bar/index.ts | 7 ++++ src/swipe-cell/{index.tsx => SwipeCell.tsx} | 8 +++-- src/swipe-cell/index.ts | 7 ++++ src/swipe-item/{index.tsx => SwipeItem.tsx} | 21 ++++++++--- src/swipe-item/index.ts | 7 ++++ src/swipe/{index.tsx => Swipe.tsx} | 9 +++-- src/swipe/index.ts | 8 +++++ src/switch/{index.tsx => Switch.tsx} | 7 ++-- src/switch/index.ts | 7 ++++ src/tab/{index.tsx => Tab.tsx} | 19 +++++++--- src/tab/index.ts | 7 ++++ src/tabbar-item/{index.tsx => TabbarItem.tsx} | 10 +++--- src/tabbar-item/index.ts | 7 ++++ src/tabbar/{index.tsx => Tabbar.tsx} | 10 +++--- src/tabbar/index.ts | 7 ++++ src/tabs/{index.tsx => Tabs.tsx} | 9 +++-- src/tabs/TabsContent.tsx | 8 +++-- src/tabs/TabsTitle.tsx | 8 +++-- src/tabs/index.ts | 7 ++++ src/tag/{index.tsx => Tag.tsx} | 8 +++-- src/tag/index.ts | 7 ++++ src/toast/Toast.tsx | 15 ++++++-- src/toast/index.tsx | 6 ++-- src/tree-select/{index.tsx => TreeSelect.tsx} | 8 +++-- src/tree-select/index.ts | 7 ++++ src/uploader/{index.tsx => Uploader.tsx} | 12 ++++--- ...reviewItem.tsx => UploaderPreviewItem.tsx} | 2 +- src/uploader/index.ts | 7 ++++ src/uploader/utils.ts | 4 +-- src/utils/create/component.ts | 17 --------- src/utils/create/index.ts | 7 +--- src/utils/index.ts | 1 + src/utils/installable.ts | 13 +++++++ 193 files changed, 1307 insertions(+), 400 deletions(-) rename src/action-bar-button/{index.tsx => ActionBarButton.tsx} (87%) create mode 100644 src/action-bar-button/index.ts rename src/action-bar-icon/{index.tsx => ActionBarIcon.tsx} (85%) create mode 100644 src/action-bar-icon/index.ts rename src/action-bar/{index.tsx => ActionBar.tsx} (70%) create mode 100644 src/action-bar/index.ts rename src/action-sheet/{index.tsx => ActionSheet.tsx} (96%) create mode 100644 src/action-sheet/index.ts rename src/address-edit/{index.tsx => AddressEdit.tsx} (95%) rename src/address-edit/{Detail.tsx => AddressEditDetail.tsx} (95%) create mode 100644 src/address-edit/index.ts rename src/address-list/{index.tsx => AddressList.tsx} (84%) rename src/address-list/{Item.tsx => AddressListItem.tsx} (89%) create mode 100644 src/address-list/index.ts rename src/area/{index.tsx => Area.tsx} (97%) create mode 100644 src/area/index.ts rename src/badge/{index.tsx => Badge.tsx} (92%) create mode 100644 src/badge/index.ts rename src/button/{index.tsx => Button.tsx} (95%) create mode 100644 src/button/index.ts rename src/calendar/{index.tsx => Calendar.tsx} (96%) rename src/calendar/{components/Day.tsx => CalendarDay.tsx} (86%) rename src/calendar/{components/Header.tsx => CalendarHeader.tsx} (84%) rename src/calendar/{components/Month.tsx => CalendarMonth.tsx} (86%) create mode 100644 src/calendar/index.ts rename src/card/{index.tsx => Card.tsx} (96%) create mode 100644 src/card/index.ts rename src/cascader/{index.tsx => Cascader.tsx} (97%) create mode 100644 src/cascader/index.ts rename src/cell-group/{index.tsx => CellGroup.tsx} (85%) create mode 100644 src/cell-group/index.ts rename src/cell/{index.tsx => Cell.tsx} (95%) create mode 100644 src/cell/index.ts rename src/checkbox-group/{index.tsx => CheckboxGroup.tsx} (90%) create mode 100644 src/checkbox-group/index.ts rename src/checkbox/{index.tsx => Checkbox.tsx} (89%) create mode 100644 src/checkbox/index.ts rename src/circle/{index.tsx => Circle.tsx} (96%) create mode 100644 src/circle/index.ts rename src/col/{index.tsx => Col.tsx} (84%) create mode 100644 src/col/index.ts rename src/collapse-item/{index.tsx => CollapseItem.tsx} (91%) create mode 100644 src/collapse-item/index.ts rename src/collapse/{index.tsx => Collapse.tsx} (92%) create mode 100644 src/collapse/index.ts rename src/contact-card/{index.tsx => ContactCard.tsx} (88%) create mode 100644 src/contact-card/index.ts rename src/contact-edit/{index.tsx => ContactEdit.tsx} (91%) create mode 100644 src/contact-edit/index.ts rename src/contact-list/{index.tsx => ContactList.tsx} (94%) create mode 100644 src/contact-list/index.ts rename src/count-down/{index.tsx => CountDown.tsx} (89%) create mode 100644 src/count-down/index.ts rename src/coupon-cell/{index.tsx => CouponCell.tsx} (91%) create mode 100644 src/coupon-cell/index.ts rename src/coupon-list/{index.tsx => CouponList.tsx} (96%) create mode 100644 src/coupon-list/index.ts rename src/coupon/{index.tsx => Coupon.tsx} (95%) create mode 100644 src/coupon/index.ts rename src/datetime-picker/{index.tsx => DatetimePicker.tsx} (87%) create mode 100644 src/datetime-picker/index.ts rename src/divider/{index.tsx => Divider.tsx} (82%) create mode 100644 src/divider/index.ts rename src/dropdown-item/{index.tsx => DropdownItem.tsx} (95%) create mode 100644 src/dropdown-item/index.ts rename src/dropdown-menu/{index.tsx => DropdownMenu.tsx} (93%) create mode 100644 src/dropdown-menu/index.ts rename src/empty/{index.tsx => Empty.tsx} (91%) create mode 100644 src/empty/index.ts rename src/field/{index.tsx => Field.tsx} (98%) create mode 100644 src/field/index.ts rename src/form/{index.tsx => Form.tsx} (97%) create mode 100644 src/form/index.ts rename src/grid-item/{index.tsx => GridItem.tsx} (93%) create mode 100644 src/grid-item/index.ts rename src/grid/{index.tsx => Grid.tsx} (87%) create mode 100644 src/grid/index.ts rename src/icon/{index.tsx => Icon.tsx} (88%) create mode 100644 src/icon/index.ts rename src/image/{index.tsx => Image.tsx} (97%) create mode 100644 src/image/index.ts rename src/index-anchor/{index.tsx => IndexAnchor.tsx} (90%) create mode 100644 src/index-anchor/index.ts rename src/index-bar/{index.tsx => IndexBar.tsx} (97%) create mode 100644 src/index-bar/index.ts rename src/list/{index.tsx => List.tsx} (94%) create mode 100644 src/list/index.ts rename src/loading/{index.tsx => Loading.tsx} (90%) create mode 100644 src/loading/index.ts rename src/nav-bar/{index.tsx => NavBar.tsx} (94%) create mode 100644 src/nav-bar/index.ts rename src/notice-bar/{index.tsx => NoticeBar.tsx} (96%) create mode 100644 src/notice-bar/index.ts rename src/number-keyboard/{index.tsx => NumberKeyboard.tsx} (96%) rename src/number-keyboard/{Key.tsx => NumberKeyboardKey.tsx} (97%) create mode 100644 src/number-keyboard/index.ts rename src/overlay/{index.tsx => Overlay.tsx} (88%) create mode 100644 src/overlay/index.ts rename src/pagination/{index.tsx => Pagination.tsx} (96%) create mode 100644 src/pagination/index.ts rename src/password-input/{index.tsx => PasswordInput.tsx} (93%) create mode 100644 src/password-input/index.ts rename src/picker/{index.tsx => Picker.tsx} (98%) create mode 100644 src/picker/index.ts rename src/popover/{index.tsx => Popover.tsx} (97%) create mode 100644 src/popover/index.ts rename src/popup/{index.tsx => Popup.tsx} (98%) create mode 100644 src/popup/index.ts rename src/progress/{index.tsx => Progress.tsx} (91%) create mode 100644 src/progress/index.ts rename src/pull-refresh/{index.tsx => PullRefresh.tsx} (96%) create mode 100644 src/pull-refresh/index.ts rename src/radio-group/{index.tsx => RadioGroup.tsx} (85%) create mode 100644 src/radio-group/index.ts rename src/radio/{index.tsx => Radio.tsx} (78%) create mode 100644 src/radio/index.ts rename src/rate/{index.tsx => Rate.tsx} (97%) create mode 100644 src/rate/index.ts rename src/row/{index.tsx => Row.tsx} (91%) create mode 100644 src/row/index.ts rename src/search/{index.tsx => Search.tsx} (95%) create mode 100644 src/search/index.ts rename src/share-sheet/{index.tsx => ShareSheet.tsx} (96%) create mode 100644 src/share-sheet/index.ts rename src/sidebar-item/{index.tsx => SidebarItem.tsx} (83%) create mode 100644 src/sidebar-item/index.ts rename src/sidebar/{index.tsx => Sidebar.tsx} (81%) create mode 100644 src/sidebar/index.ts rename src/skeleton/{index.tsx => Skeleton.tsx} (93%) create mode 100644 src/skeleton/index.ts rename src/slider/{index.tsx => Slider.tsx} (97%) create mode 100644 src/slider/index.ts rename src/step/{index.tsx => Step.tsx} (93%) create mode 100644 src/step/index.ts rename src/stepper/{index.tsx => Stepper.tsx} (98%) create mode 100644 src/stepper/index.ts rename src/steps/{index.tsx => Steps.tsx} (87%) create mode 100644 src/steps/index.ts rename src/sticky/{index.tsx => Sticky.tsx} (94%) create mode 100644 src/sticky/index.ts rename src/submit-bar/{index.tsx => SubmitBar.tsx} (94%) create mode 100644 src/submit-bar/index.ts rename src/swipe-cell/{index.tsx => SwipeCell.tsx} (96%) create mode 100644 src/swipe-cell/index.ts rename src/swipe-item/{index.tsx => SwipeItem.tsx} (88%) create mode 100644 src/swipe-item/index.ts rename src/swipe/{index.tsx => Swipe.tsx} (98%) create mode 100644 src/swipe/index.ts rename src/switch/{index.tsx => Switch.tsx} (93%) create mode 100644 src/switch/index.ts rename src/tab/{index.tsx => Tab.tsx} (89%) create mode 100644 src/tab/index.ts rename src/tabbar-item/{index.tsx => TabbarItem.tsx} (91%) create mode 100644 src/tabbar-item/index.ts rename src/tabbar/{index.tsx => Tabbar.tsx} (92%) create mode 100644 src/tabbar/index.ts rename src/tabs/{index.tsx => Tabs.tsx} (98%) create mode 100644 src/tabs/index.ts rename src/tag/{index.tsx => Tag.tsx} (90%) create mode 100644 src/tag/index.ts rename src/tree-select/{index.tsx => TreeSelect.tsx} (96%) create mode 100644 src/tree-select/index.ts rename src/uploader/{index.tsx => Uploader.tsx} (97%) rename src/uploader/{PreviewItem.tsx => UploaderPreviewItem.tsx} (98%) create mode 100644 src/uploader/index.ts delete mode 100644 src/utils/create/component.ts create mode 100644 src/utils/installable.ts diff --git a/src/action-bar-button/index.tsx b/src/action-bar-button/ActionBarButton.tsx similarity index 87% rename from src/action-bar-button/index.tsx rename to src/action-bar-button/ActionBarButton.tsx index ca2068e0a..1ea9c26a8 100644 --- a/src/action-bar-button/index.tsx +++ b/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, diff --git a/src/action-bar-button/index.ts b/src/action-bar-button/index.ts new file mode 100644 index 000000000..0fa132d0c --- /dev/null +++ b/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 }; diff --git a/src/action-bar-icon/index.tsx b/src/action-bar-icon/ActionBarIcon.tsx similarity index 85% rename from src/action-bar-icon/index.tsx rename to src/action-bar-icon/ActionBarIcon.tsx index e92e8690e..ae035671c 100644 --- a/src/action-bar-icon/index.tsx +++ b/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, diff --git a/src/action-bar-icon/index.ts b/src/action-bar-icon/index.ts new file mode 100644 index 000000000..aa06162df --- /dev/null +++ b/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 }; diff --git a/src/action-bar/index.tsx b/src/action-bar/ActionBar.tsx similarity index 70% rename from src/action-bar/index.tsx rename to src/action-bar/ActionBar.tsx index 4063eaa03..fe1c3732b 100644 --- a/src/action-bar/index.tsx +++ b/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, diff --git a/src/action-bar/index.ts b/src/action-bar/index.ts new file mode 100644 index 000000000..e5e7d32c0 --- /dev/null +++ b/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 }; diff --git a/src/action-sheet/index.tsx b/src/action-sheet/ActionSheet.tsx similarity index 96% rename from src/action-sheet/index.tsx rename to src/action-sheet/ActionSheet.tsx index 684587cf6..4703631b6 100644 --- a/src/action-sheet/index.tsx +++ b/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, diff --git a/src/action-sheet/index.ts b/src/action-sheet/index.ts new file mode 100644 index 000000000..1f740b821 --- /dev/null +++ b/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'; diff --git a/src/address-edit/index.tsx b/src/address-edit/AddressEdit.tsx similarity index 95% rename from src/address-edit/index.tsx rename to src/address-edit/AddressEdit.tsx index 280a4e747..6d8399f31 100644 --- a/src/address-edit/index.tsx +++ b/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, isSaving: Boolean, @@ -85,7 +95,7 @@ export default createComponent({ default: 200, }, addressInfo: { - type: Object as PropType>, + type: Object as PropType>, default: () => ({ ...defaultData }), }, telValidator: { @@ -118,7 +128,7 @@ export default createComponent({ const areaRef = ref(); const state = reactive({ - data: {} as AddressInfo, + data: {} as AddressEditInfo, showAreaPopup: false, detailFocused: false, errorInfo: { @@ -359,7 +369,7 @@ export default createComponent({ state.showAreaPopup = !disableArea; }} /> - , + type: Array as PropType, default: () => [], }, disabledList: { - type: Array as PropType, + type: Array as PropType, 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 ( - { + const renderList = (list: AddressListAddress[], disabled?: boolean) => { if (list) { return list.map((item, index) => renderItem(item, index, disabled)); } diff --git a/src/address-list/Item.tsx b/src/address-list/AddressListItem.tsx similarity index 89% rename from src/address-list/Item.tsx rename to src/address-list/AddressListItem.tsx index 1bed19ad9..a304bc7f0 100644 --- a/src/address-list/Item.tsx +++ b/src/address-list/AddressListItem.tsx @@ -1,4 +1,4 @@ -import { PropType } from 'vue'; +import { PropType, defineComponent } from 'vue'; // Utils import { createNamespace } from '../utils'; @@ -9,9 +9,9 @@ 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; @@ -19,13 +19,15 @@ export type AddressListItem = { isDefault?: boolean; }; -export default createComponent({ +export default defineComponent({ + name, + props: { disabled: Boolean, switchable: Boolean, defaultTagText: String, address: { - type: Object as PropType, + type: Object as PropType, required: true, }, }, diff --git a/src/address-list/index.ts b/src/address-list/index.ts new file mode 100644 index 000000000..8a4175158 --- /dev/null +++ b/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 }; diff --git a/src/area/index.tsx b/src/area/Area.tsx similarity index 97% rename from src/area/index.tsx rename to src/area/Area.tsx index 05da58b22..d06d50265 100644 --- a/src/area/index.tsx +++ b/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, diff --git a/src/area/index.ts b/src/area/index.ts new file mode 100644 index 000000000..2d614c4f6 --- /dev/null +++ b/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'; diff --git a/src/badge/index.tsx b/src/badge/Badge.tsx similarity index 92% rename from src/badge/index.tsx rename to src/badge/Badge.tsx index 7544f90cb..723eba83a 100644 --- a/src/badge/index.tsx +++ b/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], diff --git a/src/badge/index.ts b/src/badge/index.ts new file mode 100644 index 000000000..5894f7d4f --- /dev/null +++ b/src/badge/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _Badge from './Badge'; + +const Badge = installable(_Badge); + +export default Badge; +export { Badge }; diff --git a/src/button/index.tsx b/src/button/Button.tsx similarity index 95% rename from src/button/index.tsx rename to src/button/Button.tsx index 6d43b461a..b3251db19 100644 --- a/src/button/index.tsx +++ b/src/button/Button.tsx @@ -1,4 +1,9 @@ -import { PropType, CSSProperties, ButtonHTMLAttributes } from 'vue'; +import { + PropType, + CSSProperties, + ButtonHTMLAttributes, + defineComponent, +} from 'vue'; // Utils import { createNamespace } from '../utils'; @@ -9,7 +14,7 @@ import { useRoute, routeProps } from '../composables/use-route'; import Icon from '../icon'; import Loading, { LoadingType } from '../loading'; -const [createComponent, bem] = createNamespace('button'); +const [name, bem] = createNamespace('button'); export type ButtonType = | 'default' @@ -20,7 +25,9 @@ export type ButtonType = export type ButtonSize = 'large' | 'normal' | 'small' | 'mini'; -export default createComponent({ +export default defineComponent({ + name, + props: { ...routeProps, text: String, diff --git a/src/button/index.ts b/src/button/index.ts new file mode 100644 index 000000000..47b1e9351 --- /dev/null +++ b/src/button/index.ts @@ -0,0 +1,8 @@ +import { installable } from '../utils'; +import _Button from './Button'; + +const Button = installable(_Button); + +export default Button; +export { Button }; +export type { ButtonType, ButtonSize } from './Button'; diff --git a/src/calendar/index.tsx b/src/calendar/Calendar.tsx similarity index 96% rename from src/calendar/index.tsx rename to src/calendar/Calendar.tsx index 40e55c230..a93a5c8c0 100644 --- a/src/calendar/index.tsx +++ b/src/calendar/Calendar.tsx @@ -1,4 +1,12 @@ -import { ref, watch, reactive, computed, PropType, TeleportProps } from 'vue'; +import { + ref, + watch, + reactive, + computed, + PropType, + TeleportProps, + defineComponent, +} from 'vue'; // Utils import { pick, getScrollTop, ComponentInstance } from '../utils'; @@ -6,6 +14,7 @@ import { isDate } from '../utils/validate/date'; import { t, bem, + name, copyDate, copyDates, getPrevDay, @@ -13,7 +22,6 @@ import { compareDay, calcDateNum, compareMonth, - createComponent, getDayByOffset, } from './utils'; @@ -26,20 +34,22 @@ import { useExpose } from '../composables/use-expose'; import Popup, { PopupPosition } from '../popup'; import Button from '../button'; import Toast from '../toast'; -import Month, { CalendarType } from './components/Month'; -import Header from './components/Header'; +import CalendarMonth, { CalendarType } from './CalendarMonth'; +import CalendarHeader from './CalendarHeader'; // Types -import type { DayItem } from './components/Day'; +import type { CalendarDayItem } from './CalendarDay'; + +export default defineComponent({ + name, -export default createComponent({ props: { show: Boolean, title: String, color: String, readonly: Boolean, teleport: [String, Object] as PropType, - formatter: Function as PropType<(item: DayItem) => DayItem>, + formatter: Function as PropType<(item: CalendarDayItem) => CalendarDayItem>, rowHeight: [Number, String], confirmText: String, rangePrompt: String, @@ -364,7 +374,7 @@ export default createComponent({ } }; - const onClickDay = (item: DayItem) => { + const onClickDay = (item: CalendarDayItem) => { if (props.readonly || !item.date) { return; } @@ -429,7 +439,7 @@ export default createComponent({ const renderMonth = (date: Date, index: number) => { const showMonthTitle = index !== 0 || !props.showSubtitle; return ( - (
-
, + type: Object as PropType, required: true, }, }, diff --git a/src/calendar/components/Header.tsx b/src/calendar/CalendarHeader.tsx similarity index 84% rename from src/calendar/components/Header.tsx rename to src/calendar/CalendarHeader.tsx index ff0e71b2f..a1d0c9b42 100644 --- a/src/calendar/components/Header.tsx +++ b/src/calendar/CalendarHeader.tsx @@ -1,9 +1,12 @@ -import { createNamespace } from '../../utils'; -import { t, bem } from '../utils'; +import { defineComponent } from 'vue'; +import { createNamespace } from '../utils'; +import { t, bem } from './utils'; -const [createComponent] = createNamespace('calendar-header'); +const [name] = createNamespace('calendar-header'); + +export default defineComponent({ + name, -export default createComponent({ props: { title: String, subtitle: String, diff --git a/src/calendar/components/Month.tsx b/src/calendar/CalendarMonth.tsx similarity index 86% rename from src/calendar/components/Month.tsx rename to src/calendar/CalendarMonth.tsx index 0eeabbb9b..759e7cc0d 100644 --- a/src/calendar/components/Month.tsx +++ b/src/calendar/CalendarMonth.tsx @@ -1,8 +1,8 @@ -import { ref, computed, PropType } from 'vue'; +import { ref, computed, PropType, defineComponent } from 'vue'; // Utils -import { addUnit, setScrollTop, createNamespace } from '../../utils'; -import { getMonthEndDay } from '../../datetime-picker/utils'; +import { addUnit, setScrollTop, createNamespace } from '../utils'; +import { getMonthEndDay } from '../datetime-picker/utils'; import { t, bem, @@ -10,27 +10,29 @@ import { getPrevDay, getNextDay, formatMonthTitle, -} from '../utils'; +} from './utils'; // Composables import { useToggle } from '@vant/use'; -import { useExpose } from '../../composables/use-expose'; -import { useHeight } from '../../composables/use-height'; +import { useExpose } from '../composables/use-expose'; +import { useHeight } from '../composables/use-height'; // Components -import Day, { DayItem, DayType } from './Day'; +import CalendarDay, { CalendarDayItem, CalendarDayType } from './CalendarDay'; -const [createComponent] = createNamespace('calendar-month'); +const [name] = createNamespace('calendar-month'); export type CalendarType = 'single' | 'range' | 'multiple'; -export default createComponent({ +export default defineComponent({ + name, + props: { type: String as PropType, color: String, showMark: Boolean, rowHeight: [Number, String], - formatter: Function as PropType<(item: DayItem) => DayItem>, + formatter: Function as PropType<(item: CalendarDayItem) => CalendarDayItem>, lazyRender: Boolean, currentDate: [Date, Array] as PropType, allowSameDay: Boolean, @@ -147,7 +149,7 @@ export default createComponent({ return ''; }; - const getDayType = (day: Date): DayType => { + const getDayType = (day: Date): CalendarDayType => { const { type, minDate, maxDate, currentDate } = props; if (compareDay(day, minDate) < 0 || compareDay(day, maxDate) > 0) { @@ -172,7 +174,7 @@ export default createComponent({ return ''; }; - const getBottomInfo = (dayType: DayType) => { + const getBottomInfo = (dayType: CalendarDayType) => { if (props.type === 'range') { if (dayType === 'start' || dayType === 'end') { return t(dayType); @@ -195,13 +197,13 @@ export default createComponent({ } }; - const placeholders = computed(() => { + const placeholders = computed(() => { const count = Math.ceil((totalDay.value + offset.value) / 7); return Array(count).fill({ type: 'placeholder' }); }); const days = computed(() => { - const days: DayItem[] = []; + const days: CalendarDayItem[] = []; const year = props.date.getFullYear(); const month = props.date.getMonth(); @@ -209,7 +211,7 @@ export default createComponent({ const date = new Date(year, month, day); const type = getDayType(date); - let config: DayItem = { + let config: CalendarDayItem = { date, type, text: day, @@ -226,8 +228,8 @@ export default createComponent({ return days; }); - const renderDay = (item: DayItem, index: number) => ( - ( + import { reactive, toRefs } from 'vue'; import { useTranslate } from '@demo/use-translate'; -import { DayItem } from '../components/Day'; +import { CalendarDayItem } from '../CalendarDay'; const i18n = { 'zh-CN': { @@ -223,7 +223,7 @@ export default { state.firstDayOfWeek = 0; }; - const dayFormatter = (day: DayItem) => { + const dayFormatter = (day: CalendarDayItem) => { if (!day.date) { return day; } diff --git a/src/calendar/index.ts b/src/calendar/index.ts new file mode 100644 index 000000000..a7f388127 --- /dev/null +++ b/src/calendar/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _Calendar from './Calendar'; + +const Calendar = installable(_Calendar); + +export default Calendar; +export { Calendar }; diff --git a/src/calendar/utils.ts b/src/calendar/utils.ts index dfff1e390..5b95d7791 100644 --- a/src/calendar/utils.ts +++ b/src/calendar/utils.ts @@ -1,8 +1,8 @@ import { createNamespace } from '../utils'; -const [createComponent, bem, t] = createNamespace('calendar'); +const [name, bem, t] = createNamespace('calendar'); -export { createComponent, bem, t }; +export { name, bem, t }; export function formatMonthTitle(date: Date) { return t('monthTitle', date.getFullYear(), date.getMonth() + 1); diff --git a/src/card/index.tsx b/src/card/Card.tsx similarity index 96% rename from src/card/index.tsx rename to src/card/Card.tsx index 433333748..e716e8c8a 100644 --- a/src/card/index.tsx +++ b/src/card/Card.tsx @@ -1,3 +1,5 @@ +import { defineComponent } from 'vue'; + // Utils import { createNamespace, isDef } from '../utils'; @@ -5,9 +7,11 @@ import { createNamespace, isDef } from '../utils'; import Tag from '../tag'; import Image from '../image'; -const [createComponent, bem] = createNamespace('card'); +const [name, bem] = createNamespace('card'); + +export default defineComponent({ + name, -export default createComponent({ props: { tag: String, num: [Number, String], diff --git a/src/card/index.ts b/src/card/index.ts new file mode 100644 index 000000000..f117c0b58 --- /dev/null +++ b/src/card/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _Card from './Card'; + +const Card = installable(_Card); + +export default Card; +export { Card }; diff --git a/src/cascader/index.tsx b/src/cascader/Cascader.tsx similarity index 97% rename from src/cascader/index.tsx rename to src/cascader/Cascader.tsx index abba4f118..49bca8ce0 100644 --- a/src/cascader/index.tsx +++ b/src/cascader/Cascader.tsx @@ -1,4 +1,4 @@ -import { nextTick, PropType, reactive, watch } from 'vue'; +import { nextTick, PropType, reactive, watch, defineComponent } from 'vue'; import { createNamespace } from '../utils'; // Components @@ -6,7 +6,7 @@ import Tab from '../tab'; import Tabs from '../tabs'; import Icon from '../icon'; -const [createComponent, bem, t] = createNamespace('cascader'); +const [name, bem, t] = createNamespace('cascader'); export type CascaderOption = { text?: string; @@ -27,7 +27,9 @@ type CascaderFieldNames = { children?: string; }; -export default createComponent({ +export default defineComponent({ + name, + props: { title: String, modelValue: [Number, String], diff --git a/src/cascader/index.ts b/src/cascader/index.ts new file mode 100644 index 000000000..6b93cf8cf --- /dev/null +++ b/src/cascader/index.ts @@ -0,0 +1,8 @@ +import { installable } from '../utils'; +import _Cascader from './Cascader'; + +const Cascader = installable(_Cascader); + +export default Cascader; +export { Cascader }; +export type { CascaderOption } from './Cascader'; diff --git a/src/cascader/test/index.spec.ts b/src/cascader/test/index.spec.ts index bd311ff77..aac7b8fd0 100644 --- a/src/cascader/test/index.spec.ts +++ b/src/cascader/test/index.spec.ts @@ -1,5 +1,5 @@ import Cascader from '..'; -import { mount , later } from '../../../test'; +import { mount, later } from '../../../test'; import options from '../demo/area-en-US'; diff --git a/src/cell-group/index.tsx b/src/cell-group/CellGroup.tsx similarity index 85% rename from src/cell-group/index.tsx rename to src/cell-group/CellGroup.tsx index 9e01cff32..4cfd4e490 100644 --- a/src/cell-group/index.tsx +++ b/src/cell-group/CellGroup.tsx @@ -1,9 +1,12 @@ +import { defineComponent } from 'vue'; import { createNamespace } from '../utils'; import { BORDER_TOP_BOTTOM } from '../utils/constant'; -const [createComponent, bem] = createNamespace('cell-group'); +const [name, bem] = createNamespace('cell-group'); + +export default defineComponent({ + name, -export default createComponent({ inheritAttrs: false, props: { diff --git a/src/cell-group/index.ts b/src/cell-group/index.ts new file mode 100644 index 000000000..ff453319b --- /dev/null +++ b/src/cell-group/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _CellGroup from './CellGroup'; + +const CellGroup = installable(_CellGroup); + +export default CellGroup; +export { CellGroup }; diff --git a/src/cell/index.tsx b/src/cell/Cell.tsx similarity index 95% rename from src/cell/index.tsx rename to src/cell/Cell.tsx index a73ce8c0d..ec328aef0 100644 --- a/src/cell/index.tsx +++ b/src/cell/Cell.tsx @@ -1,4 +1,4 @@ -import { PropType, CSSProperties } from 'vue'; +import { PropType, CSSProperties, defineComponent } from 'vue'; // Utils import { createNamespace, isDef, UnknownProp } from '../utils'; @@ -9,7 +9,7 @@ import { useRoute, routeProps } from '../composables/use-route'; // Components import Icon from '../icon'; -const [createComponent, bem] = createNamespace('cell'); +const [name, bem] = createNamespace('cell'); export type CellArrowDirection = 'up' | 'down' | 'left' | 'right'; @@ -38,7 +38,9 @@ export const cellProps = { }, }; -export default createComponent({ +export default defineComponent({ + name, + props: { ...cellProps, ...routeProps, diff --git a/src/cell/index.ts b/src/cell/index.ts new file mode 100644 index 000000000..4698e8667 --- /dev/null +++ b/src/cell/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _Cell from './Cell'; + +const Cell = installable(_Cell); + +export default Cell; +export { Cell }; diff --git a/src/checkbox-group/index.tsx b/src/checkbox-group/CheckboxGroup.tsx similarity index 90% rename from src/checkbox-group/index.tsx rename to src/checkbox-group/CheckboxGroup.tsx index 0ccca62d6..a8fd5e175 100644 --- a/src/checkbox-group/index.tsx +++ b/src/checkbox-group/CheckboxGroup.tsx @@ -1,13 +1,13 @@ -import { PropType, watch } from 'vue'; +import { PropType, watch, defineComponent } from 'vue'; import { createNamespace } from '../utils'; import { useChildren } from '@vant/use'; import { useExpose } from '../composables/use-expose'; import { useLinkField } from '../composables/use-link-field'; import { CheckerParent, CheckerDirection } from '../checkbox/Checker'; -const [createComponent, bem] = createNamespace('checkbox-group'); +const [name, bem] = createNamespace('checkbox-group'); -export const CHECKBOX_GROUP_KEY = Symbol('CheckboxGroup'); +export const CHECKBOX_GROUP_KEY = Symbol(name); export type CheckboxGroupToggleAllOptions = | boolean @@ -24,7 +24,9 @@ export type CheckboxGroupProvide = CheckerParent & { updateValue: (value: unknown[]) => void; }; -export default createComponent({ +export default defineComponent({ + name, + props: { max: [Number, String], disabled: Boolean, diff --git a/src/checkbox-group/index.ts b/src/checkbox-group/index.ts new file mode 100644 index 000000000..b83aad667 --- /dev/null +++ b/src/checkbox-group/index.ts @@ -0,0 +1,8 @@ +import { installable } from '../utils'; +import _CheckboxGroup from './CheckboxGroup'; + +const CheckboxGroup = installable(_CheckboxGroup); + +export default CheckboxGroup; +export { CheckboxGroup }; +export type { CheckboxGroupToggleAllOptions } from './CheckboxGroup'; diff --git a/src/checkbox/index.tsx b/src/checkbox/Checkbox.tsx similarity index 89% rename from src/checkbox/index.tsx rename to src/checkbox/Checkbox.tsx index de8341ed7..fa96224b8 100644 --- a/src/checkbox/index.tsx +++ b/src/checkbox/Checkbox.tsx @@ -1,8 +1,11 @@ -import { computed, watch } from 'vue'; +import { computed, watch, defineComponent } from 'vue'; // Utils import { createNamespace, pick } from '../utils'; -import { CHECKBOX_GROUP_KEY, CheckboxGroupProvide } from '../checkbox-group'; +import { + CHECKBOX_GROUP_KEY, + CheckboxGroupProvide, +} from '../checkbox-group/CheckboxGroup'; // Composables import { useParent } from '@vant/use'; @@ -12,9 +15,11 @@ import { useLinkField } from '../composables/use-link-field'; // Components import Checker, { checkerProps } from './Checker'; -const [createComponent, bem] = createNamespace('checkbox'); +const [name, bem] = createNamespace('checkbox'); + +export default defineComponent({ + name, -export default createComponent({ props: { ...checkerProps, bindGroup: { diff --git a/src/checkbox/Checker.tsx b/src/checkbox/Checker.tsx index a9b3dabf5..805f5ee25 100644 --- a/src/checkbox/Checker.tsx +++ b/src/checkbox/Checker.tsx @@ -1,4 +1,4 @@ -import { ref, computed, defineComponent, PropType } from 'vue'; +import { ref, computed, PropType, defineComponent } from 'vue'; import { addUnit, UnknownProp } from '../utils'; import Icon from '../icon'; diff --git a/src/checkbox/index.ts b/src/checkbox/index.ts new file mode 100644 index 000000000..befc29fb1 --- /dev/null +++ b/src/checkbox/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _Checkbox from './Checkbox'; + +const Checkbox = installable(_Checkbox); + +export default Checkbox; +export { Checkbox }; diff --git a/src/circle/index.tsx b/src/circle/Circle.tsx similarity index 96% rename from src/circle/index.tsx rename to src/circle/Circle.tsx index d4df3e205..790c2fd98 100644 --- a/src/circle/index.tsx +++ b/src/circle/Circle.tsx @@ -1,8 +1,8 @@ -import { watch, computed, PropType, CSSProperties } from 'vue'; +import { watch, computed, PropType, CSSProperties, defineComponent } from 'vue'; import { raf, cancelRaf } from '@vant/use'; import { isObject, getSizeStyle, createNamespace } from '../utils'; -const [createComponent, bem] = createNamespace('circle'); +const [name, bem] = createNamespace('circle'); let uid = 0; @@ -17,7 +17,9 @@ function getPath(clockwise: boolean, viewBoxSize: number) { } m 0, -500 a 500, 500 0 1, ${sweepFlag} 0, 1000 a 500, 500 0 1, ${sweepFlag} 0, -1000`; } -export default createComponent({ +export default defineComponent({ + name, + props: { text: String, size: [Number, String], diff --git a/src/circle/index.ts b/src/circle/index.ts new file mode 100644 index 000000000..8832ea980 --- /dev/null +++ b/src/circle/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _Circle from './Circle'; + +const Circle = installable(_Circle); + +export default Circle; +export { Circle }; diff --git a/src/col/index.tsx b/src/col/Col.tsx similarity index 84% rename from src/col/index.tsx rename to src/col/Col.tsx index fcbe888f6..aafe9b8e8 100644 --- a/src/col/index.tsx +++ b/src/col/Col.tsx @@ -1,11 +1,13 @@ -import { computed, PropType } from 'vue'; +import { computed, PropType, defineComponent } from 'vue'; import { createNamespace } from '../utils'; import { useParent } from '@vant/use'; -import { ROW_KEY, RowProvide } from '../row'; +import { ROW_KEY, RowProvide } from '../row/Row'; -const [createComponent, bem] = createNamespace('col'); +const [name, bem] = createNamespace('col'); + +export default defineComponent({ + name, -export default createComponent({ props: { offset: [Number, String], tag: { diff --git a/src/col/index.ts b/src/col/index.ts new file mode 100644 index 000000000..e0fef5032 --- /dev/null +++ b/src/col/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _Col from './Col'; + +const Col = installable(_Col); + +export default Col; +export { Col }; diff --git a/src/collapse-item/index.tsx b/src/collapse-item/CollapseItem.tsx similarity index 91% rename from src/collapse-item/index.tsx rename to src/collapse-item/CollapseItem.tsx index 44996496b..f309edec9 100644 --- a/src/collapse-item/index.tsx +++ b/src/collapse-item/CollapseItem.tsx @@ -1,7 +1,9 @@ -import { ref, watch, computed, nextTick } from 'vue'; +import { ref, watch, computed, nextTick, defineComponent } from 'vue'; // Utils +import { cellProps } from '../cell/Cell'; import { createNamespace } from '../utils'; +import { COLLAPSE_KEY, CollapseProvide } from '../collapse/Collapse'; // Composables import { raf, doubleRaf, useParent } from '@vant/use'; @@ -9,12 +11,13 @@ import { useExpose } from '../composables/use-expose'; import { useLazyRender } from '../composables/use-lazy-render'; // Components -import Cell, { cellProps } from '../cell'; -import { COLLAPSE_KEY, CollapseProvide } from '../collapse'; +import Cell from '../cell'; -const [createComponent, bem] = createNamespace('collapse-item'); +const [name, bem] = createNamespace('collapse-item'); + +export default defineComponent({ + name, -export default createComponent({ props: { ...cellProps, name: [Number, String], diff --git a/src/collapse-item/index.ts b/src/collapse-item/index.ts new file mode 100644 index 000000000..873269d80 --- /dev/null +++ b/src/collapse-item/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _CollapseItem from './CollapseItem'; + +const CollapseItem = installable(_CollapseItem); + +export default CollapseItem; +export { CollapseItem }; diff --git a/src/collapse/index.tsx b/src/collapse/Collapse.tsx similarity index 92% rename from src/collapse/index.tsx rename to src/collapse/Collapse.tsx index cbefdf1b2..5af5b0150 100644 --- a/src/collapse/index.tsx +++ b/src/collapse/Collapse.tsx @@ -1,18 +1,20 @@ -import { PropType } from 'vue'; +import { PropType, defineComponent } from 'vue'; import { createNamespace } from '../utils'; import { BORDER_TOP_BOTTOM } from '../utils/constant'; import { useChildren } from '@vant/use'; -const [createComponent, bem] = createNamespace('collapse'); +const [name, bem] = createNamespace('collapse'); -export const COLLAPSE_KEY = Symbol('Collapse'); +export const COLLAPSE_KEY = Symbol(name); export type CollapseProvide = { toggle: (name: number | string, expanded: boolean) => void; isExpanded: (name: number | string) => boolean; }; -export default createComponent({ +export default defineComponent({ + name, + props: { accordion: Boolean, modelValue: { diff --git a/src/collapse/index.ts b/src/collapse/index.ts new file mode 100644 index 000000000..d7693c0b5 --- /dev/null +++ b/src/collapse/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _Collapse from './Collapse'; + +const Collapse = installable(_Collapse); + +export default Collapse; +export { Collapse }; diff --git a/src/composables/use-link-field.ts b/src/composables/use-link-field.ts index 1c564f9ba..f95421f22 100644 --- a/src/composables/use-link-field.ts +++ b/src/composables/use-link-field.ts @@ -1,8 +1,8 @@ import { ComponentInstance } from '../utils'; import { watch, inject } from 'vue'; -export const FORM_KEY = Symbol('Form'); -export const FIELD_KEY = Symbol('Field'); +export const FORM_KEY = Symbol('van-form'); +export const FIELD_KEY = Symbol('van-field'); export function useLinkField(getValue: () => unknown) { const field = inject(FIELD_KEY, null) as ComponentInstance | null; diff --git a/src/composables/use-placeholder.tsx b/src/composables/use-placeholder.tsx index 13f58b9ab..70344d9cf 100644 --- a/src/composables/use-placeholder.tsx +++ b/src/composables/use-placeholder.tsx @@ -1,5 +1,5 @@ +import { Ref } from 'vue'; import { useHeight } from './use-height'; -import type { Ref } from 'vue'; import type { BEM } from '../utils/create/bem'; export function usePlaceholder(contentRef: Ref, bem: BEM) { diff --git a/src/contact-card/index.tsx b/src/contact-card/ContactCard.tsx similarity index 88% rename from src/contact-card/index.tsx rename to src/contact-card/ContactCard.tsx index 2c695d006..b8c9c1e12 100644 --- a/src/contact-card/index.tsx +++ b/src/contact-card/ContactCard.tsx @@ -1,12 +1,14 @@ -import { PropType } from 'vue'; +import { PropType, defineComponent } from 'vue'; import { createNamespace } from '../utils'; import Cell from '../cell'; -const [createComponent, bem, t] = createNamespace('contact-card'); +const [name, bem, t] = createNamespace('contact-card'); export type ContactCardType = 'add' | 'edit'; -export default createComponent({ +export default defineComponent({ + name, + props: { tel: String, name: String, diff --git a/src/contact-card/index.ts b/src/contact-card/index.ts new file mode 100644 index 000000000..74cd4fa3f --- /dev/null +++ b/src/contact-card/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _ContactCard from './ContactCard'; + +const ContactCard = installable(_ContactCard); + +export default ContactCard; +export { ContactCard }; diff --git a/src/contact-edit/index.tsx b/src/contact-edit/ContactEdit.tsx similarity index 91% rename from src/contact-edit/index.tsx rename to src/contact-edit/ContactEdit.tsx index 62fb15ef4..7b20e42cb 100644 --- a/src/contact-edit/index.tsx +++ b/src/contact-edit/ContactEdit.tsx @@ -1,4 +1,4 @@ -import { watch, reactive, PropType } from 'vue'; +import { watch, reactive, PropType, defineComponent } from 'vue'; // Utils import { createNamespace } from '../utils'; @@ -12,20 +12,22 @@ import Button from '../button'; import Dialog from '../dialog'; import Switch from '../switch'; -const [createComponent, bem, t] = createNamespace('contact-edit'); +const [name, bem, t] = createNamespace('contact-edit'); -export type ContactInfo = { +export type ContactEditInfo = { tel: string; name: string; isDefault?: boolean; }; -const DEFAULT_CONTACT: ContactInfo = { +const DEFAULT_CONTACT: ContactEditInfo = { tel: '', name: '', }; -export default createComponent({ +export default defineComponent({ + name, + props: { isEdit: Boolean, isSaving: Boolean, @@ -33,7 +35,7 @@ export default createComponent({ showSetDefault: Boolean, setDefaultLabel: String, contactInfo: { - type: Object as PropType, + type: Object as PropType, default: () => ({ ...DEFAULT_CONTACT }), }, telValidator: { diff --git a/src/contact-edit/index.ts b/src/contact-edit/index.ts new file mode 100644 index 000000000..176e43a6c --- /dev/null +++ b/src/contact-edit/index.ts @@ -0,0 +1,8 @@ +import { installable } from '../utils'; +import _ContactEdit from './ContactEdit'; + +const ContactEdit = installable(_ContactEdit); + +export default ContactEdit; +export { ContactEdit }; +export type { ContactEditInfo } from './ContactEdit'; diff --git a/src/contact-edit/test/index.spec.ts b/src/contact-edit/test/index.spec.ts index 27a392c82..076acda2a 100644 --- a/src/contact-edit/test/index.spec.ts +++ b/src/contact-edit/test/index.spec.ts @@ -1,5 +1,5 @@ import { VueWrapper } from '@vue/test-utils'; -import ContactEdit, { ContactInfo } from '..'; +import ContactEdit, { ContactEditInfo } from '..'; import { mount, later } from '../../../test'; const contactInfo = { @@ -49,14 +49,18 @@ test('should emit save event after submitting form', async () => { }); await submitForm(wrapper); - expect(wrapper.emitted<[ContactInfo]>('save')![0][0]).toEqual(contactInfo); + expect(wrapper.emitted<[ContactEditInfo]>('save')![0][0]).toEqual( + contactInfo + ); }); test('should watch contact info', async () => { const wrapper = mount(ContactEdit); await wrapper.setProps({ contactInfo }); await submitForm(wrapper); - expect(wrapper.emitted<[ContactInfo]>('save')![0][0]).toEqual(contactInfo); + expect(wrapper.emitted<[ContactEditInfo]>('save')![0][0]).toEqual( + contactInfo + ); }); test('should allow deleting contact', async () => { diff --git a/src/contact-list/index.tsx b/src/contact-list/ContactList.tsx similarity index 94% rename from src/contact-list/index.tsx rename to src/contact-list/ContactList.tsx index 2b0abf368..be9056ff3 100644 --- a/src/contact-list/index.tsx +++ b/src/contact-list/ContactList.tsx @@ -1,4 +1,4 @@ -import { PropType } from 'vue'; +import { PropType, defineComponent } from 'vue'; // Utils import { createNamespace, UnknownProp } from '../utils'; @@ -12,7 +12,7 @@ import Radio from '../radio'; import Button from '../button'; import RadioGroup from '../radio-group'; -const [createComponent, bem, t] = createNamespace('contact-list'); +const [name, bem, t] = createNamespace('contact-list'); export type ContactListItem = { id?: number | string; @@ -21,7 +21,9 @@ export type ContactListItem = { isDefault?: boolean; }; -export default createComponent({ +export default defineComponent({ + name, + props: { list: Array as PropType, addText: String, diff --git a/src/contact-list/index.ts b/src/contact-list/index.ts new file mode 100644 index 000000000..1ec0e70b2 --- /dev/null +++ b/src/contact-list/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _ContactList from './ContactList'; + +const ContactList = installable(_ContactList); + +export default ContactList; +export { ContactList }; diff --git a/src/count-down/index.tsx b/src/count-down/CountDown.tsx similarity index 89% rename from src/count-down/index.tsx rename to src/count-down/CountDown.tsx index 017a59612..51d679dcb 100644 --- a/src/count-down/index.tsx +++ b/src/count-down/CountDown.tsx @@ -1,4 +1,4 @@ -import { watch, computed } from 'vue'; +import { watch, computed, defineComponent } from 'vue'; // Utils import { createNamespace } from '../utils'; @@ -8,9 +8,11 @@ import { parseFormat } from './utils'; import { useCountDown } from '@vant/use'; import { useExpose } from '../composables/use-expose'; -const [createComponent, bem] = createNamespace('count-down'); +const [name, bem] = createNamespace('count-down'); + +export default defineComponent({ + name, -export default createComponent({ props: { millisecond: Boolean, time: { diff --git a/src/count-down/index.ts b/src/count-down/index.ts new file mode 100644 index 000000000..64a077dd1 --- /dev/null +++ b/src/count-down/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _CountDown from './CountDown'; + +const CountDown = installable(_CountDown); + +export default CountDown; +export { CountDown }; diff --git a/src/coupon-cell/index.tsx b/src/coupon-cell/CouponCell.tsx similarity index 91% rename from src/coupon-cell/index.tsx rename to src/coupon-cell/CouponCell.tsx index bc79396bb..7c3393675 100644 --- a/src/coupon-cell/index.tsx +++ b/src/coupon-cell/CouponCell.tsx @@ -1,11 +1,11 @@ -import { PropType } from 'vue'; +import { PropType, defineComponent } from 'vue'; import { isDef, createNamespace } from '../utils'; import type { CouponInfo } from '../coupon'; // Components import Cell from '../cell'; -const [createComponent, bem, t] = createNamespace('coupon-cell'); +const [name, bem, t] = createNamespace('coupon-cell'); function formatValue( coupons: CouponInfo[], @@ -29,7 +29,9 @@ function formatValue( return coupons.length === 0 ? t('tips') : t('count', coupons.length); } -export default createComponent({ +export default defineComponent({ + name, + props: { title: String, coupons: { diff --git a/src/coupon-cell/index.ts b/src/coupon-cell/index.ts new file mode 100644 index 000000000..d2f6fa323 --- /dev/null +++ b/src/coupon-cell/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _CouponCell from './CouponCell'; + +const CouponCell = installable(_CouponCell); + +export default CouponCell; +export { CouponCell }; diff --git a/src/coupon-list/index.tsx b/src/coupon-list/CouponList.tsx similarity index 96% rename from src/coupon-list/index.tsx rename to src/coupon-list/CouponList.tsx index 8d35f81ae..1072537fa 100644 --- a/src/coupon-list/index.tsx +++ b/src/coupon-list/CouponList.tsx @@ -1,4 +1,12 @@ -import { watch, computed, nextTick, reactive, PropType, onMounted } from 'vue'; +import { + watch, + computed, + nextTick, + reactive, + PropType, + onMounted, + defineComponent, +} from 'vue'; // Utils import { createNamespace } from '../utils'; @@ -14,10 +22,12 @@ import Field from '../field'; import Button from '../button'; import Coupon, { CouponInfo } from '../coupon'; -const [createComponent, bem, t] = createNamespace('coupon-list'); +const [name, bem, t] = createNamespace('coupon-list'); const EMPTY_IMAGE = 'https://img01.yzcdn.cn/vant/coupon-empty.png'; -export default createComponent({ +export default defineComponent({ + name, + props: { enabledTitle: String, disabledTitle: String, diff --git a/src/coupon-list/index.ts b/src/coupon-list/index.ts new file mode 100644 index 000000000..ffa79b162 --- /dev/null +++ b/src/coupon-list/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _CouponList from './CouponList'; + +const CouponList = installable(_CouponList); + +export default CouponList; +export { CouponList }; diff --git a/src/coupon/index.tsx b/src/coupon/Coupon.tsx similarity index 95% rename from src/coupon/index.tsx rename to src/coupon/Coupon.tsx index 99a41c96b..4a626c1ce 100644 --- a/src/coupon/index.tsx +++ b/src/coupon/Coupon.tsx @@ -1,4 +1,4 @@ -import { computed, PropType } from 'vue'; +import { computed, PropType, defineComponent } from 'vue'; import { padZero, createNamespace } from '../utils'; import { RED } from '../utils/constant'; import Checkbox from '../checkbox'; @@ -19,7 +19,7 @@ export type CouponInfo = { originCondition?: number; }; -const [createComponent, bem, t] = createNamespace('coupon'); +const [name, bem, t] = createNamespace('coupon'); function getDate(timeStamp: number) { const date = new Date(timeStamp * 1000); @@ -38,7 +38,9 @@ function formatAmount(amount: number) { ); } -export default createComponent({ +export default defineComponent({ + name, + props: { chosen: Boolean, disabled: Boolean, diff --git a/src/coupon/index.ts b/src/coupon/index.ts new file mode 100644 index 000000000..d653bc43f --- /dev/null +++ b/src/coupon/index.ts @@ -0,0 +1,8 @@ +import { installable } from '../utils'; +import _Coupon from './Coupon'; + +const Coupon = installable(_Coupon); + +export default Coupon; +export { Coupon }; +export type { CouponInfo } from './Coupon'; diff --git a/src/datetime-picker/DatePicker.tsx b/src/datetime-picker/DatePicker.tsx index 131a9d040..78866a74c 100644 --- a/src/datetime-picker/DatePicker.tsx +++ b/src/datetime-picker/DatePicker.tsx @@ -1,4 +1,12 @@ -import { ref, watch, computed, nextTick, onMounted, PropType } from 'vue'; +import { + ref, + watch, + computed, + nextTick, + onMounted, + PropType, + defineComponent, +} from 'vue'; // Utils import { isDate } from '../utils/validate/date'; @@ -26,9 +34,11 @@ import { useExpose } from '../composables/use-expose'; import Picker from '../picker'; const currentYear = new Date().getFullYear(); -const [createComponent] = createNamespace('date-picker'); +const [name] = createNamespace('date-picker'); + +export default defineComponent({ + name, -export default createComponent({ props: { ...sharedProps, modelValue: Date, diff --git a/src/datetime-picker/index.tsx b/src/datetime-picker/DatetimePicker.tsx similarity index 87% rename from src/datetime-picker/index.tsx rename to src/datetime-picker/DatetimePicker.tsx index 9164633d0..52b00f0ca 100644 --- a/src/datetime-picker/index.tsx +++ b/src/datetime-picker/DatetimePicker.tsx @@ -1,15 +1,17 @@ -import { ref } from 'vue'; +import { ref, defineComponent } from 'vue'; import { pick, createNamespace, ComponentInstance } from '../utils'; import { useExpose } from '../composables/use-expose'; import TimePicker from './TimePicker'; import DatePicker from './DatePicker'; -const [createComponent, bem] = createNamespace('datetime-picker'); +const [name, bem] = createNamespace('datetime-picker'); const timePickerProps = Object.keys(TimePicker.props); const datePickerProps = Object.keys(DatePicker.props); -export default createComponent({ +export default defineComponent({ + name, + props: { ...TimePicker.props, ...DatePicker.props, diff --git a/src/datetime-picker/TimePicker.tsx b/src/datetime-picker/TimePicker.tsx index 7833513ba..22bd4ba67 100644 --- a/src/datetime-picker/TimePicker.tsx +++ b/src/datetime-picker/TimePicker.tsx @@ -1,4 +1,11 @@ -import { ref, watch, computed, nextTick, onMounted } from 'vue'; +import { + ref, + watch, + computed, + nextTick, + onMounted, + defineComponent, +} from 'vue'; // Utils import { @@ -16,9 +23,11 @@ import { useExpose } from '../composables/use-expose'; // Components import Picker from '../picker'; -const [createComponent] = createNamespace('time-picker'); +const [name] = createNamespace('time-picker'); + +export default defineComponent({ + name, -export default createComponent({ props: { ...sharedProps, modelValue: String, diff --git a/src/datetime-picker/index.ts b/src/datetime-picker/index.ts new file mode 100644 index 000000000..9c26c8d67 --- /dev/null +++ b/src/datetime-picker/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _DatetimePicker from './DatetimePicker'; + +const DatetimePicker = installable(_DatetimePicker); + +export default DatetimePicker; +export { DatetimePicker }; diff --git a/src/datetime-picker/utils.ts b/src/datetime-picker/utils.ts index 3500d7b88..bda7efa1c 100644 --- a/src/datetime-picker/utils.ts +++ b/src/datetime-picker/utils.ts @@ -1,6 +1,6 @@ import { PropType } from 'vue'; import { isNaN } from '../utils/validate/number'; -import { pickerProps } from '../picker'; +import { pickerProps } from '../picker/Picker'; export type ColumnType = 'year' | 'month' | 'day' | 'hour' | 'minute'; diff --git a/src/dialog/Dialog.tsx b/src/dialog/Dialog.tsx index ae32d5010..84b555e8f 100644 --- a/src/dialog/Dialog.tsx +++ b/src/dialog/Dialog.tsx @@ -1,4 +1,4 @@ -import { PropType, reactive } from 'vue'; +import { PropType, reactive, defineComponent } from 'vue'; // Utils import { callInterceptor, Interceptor } from '../utils/interceptor'; @@ -12,7 +12,7 @@ import ActionBar from '../action-bar'; import ActionBarButton from '../action-bar-button'; import { popupSharedProps, popupSharedPropKeys } from '../popup/shared'; -const [createComponent, bem, t] = createNamespace('dialog'); +const [name, bem, t] = createNamespace('dialog'); export type DialogTheme = 'default' | 'round-button'; export type DialogAction = 'confirm' | 'cancel'; @@ -24,7 +24,9 @@ const popupKeys = [ 'closeOnPopstate', ] as const; -export default createComponent({ +export default defineComponent({ + name, + props: { ...popupSharedProps, title: String, diff --git a/src/dialog/index.tsx b/src/dialog/index.tsx index c1df01a5a..76cd2da52 100644 --- a/src/dialog/index.tsx +++ b/src/dialog/index.tsx @@ -1,5 +1,5 @@ -import { App, Plugin, CSSProperties, TeleportProps } from 'vue'; -import { inBrowser, ComponentInstance } from '../utils'; +import { App, CSSProperties, TeleportProps } from 'vue'; +import { inBrowser, ComponentInstance, installable } from '../utils'; import { Interceptor } from '../utils/interceptor'; import { mountComponent, usePopupState } from '../utils/mount-component'; import VanDialog, { @@ -120,10 +120,10 @@ Dialog.resetDefaultOptions = () => { }; Dialog.install = (app: App) => { - app.use((VanDialog as unknown) as Plugin); + app.use(installable(VanDialog)); app.config.globalProperties.$dialog = Dialog; }; -Dialog.Component = VanDialog; +Dialog.Component = installable(VanDialog); export default Dialog; diff --git a/src/dialog/test/funciton-call.spec.js b/src/dialog/test/funciton-call.spec.js index f06a327c0..fd84f5e2f 100644 --- a/src/dialog/test/funciton-call.spec.js +++ b/src/dialog/test/funciton-call.spec.js @@ -11,7 +11,7 @@ test('should update default options when calling setDefaultOptions method', () = }); test('should expose Dialog component', () => { - expect(Dialog.Component).toEqual(DialogComponent); + expect(Dialog.Component.name).toEqual('van-dialog'); }); test('should register component to app', () => { diff --git a/src/divider/index.tsx b/src/divider/Divider.tsx similarity index 82% rename from src/divider/index.tsx rename to src/divider/Divider.tsx index daacc7df5..b0c3f5fff 100644 --- a/src/divider/index.tsx +++ b/src/divider/Divider.tsx @@ -1,11 +1,13 @@ -import { PropType } from 'vue'; +import { PropType, defineComponent } from 'vue'; import { createNamespace } from '../utils'; -const [createComponent, bem] = createNamespace('divider'); +const [name, bem] = createNamespace('divider'); export type DividerContentPosition = 'left' | 'center' | 'right'; -export default createComponent({ +export default defineComponent({ + name, + props: { dashed: Boolean, hairline: { diff --git a/src/divider/index.ts b/src/divider/index.ts new file mode 100644 index 000000000..5ea175f30 --- /dev/null +++ b/src/divider/index.ts @@ -0,0 +1,8 @@ +import { installable } from '../utils'; +import _Divider from './Divider'; + +const Divider = installable(_Divider); + +export default Divider; +export { Divider }; +export type { DividerContentPosition } from './Divider'; diff --git a/src/dropdown-item/index.tsx b/src/dropdown-item/DropdownItem.tsx similarity index 95% rename from src/dropdown-item/index.tsx rename to src/dropdown-item/DropdownItem.tsx index 3434ceb1f..2e4aa3d34 100644 --- a/src/dropdown-item/index.tsx +++ b/src/dropdown-item/DropdownItem.tsx @@ -4,11 +4,15 @@ import { PropType, TeleportProps, CSSProperties, + defineComponent, } from 'vue'; // Utils import { createNamespace, getZIndexStyle, UnknownProp } from '../utils'; -import { DROPDOWN_KEY, DropdownMenuProvide } from '../dropdown-menu'; +import { + DROPDOWN_KEY, + DropdownMenuProvide, +} from '../dropdown-menu/DropdownMenu'; // Composables import { useParent } from '@vant/use'; @@ -19,7 +23,7 @@ import Cell from '../cell'; import Icon from '../icon'; import Popup from '../popup'; -const [createComponent, bem] = createNamespace('dropdown-item'); +const [name, bem] = createNamespace('dropdown-item'); export type DropdownItemOption = { text: string; @@ -27,7 +31,9 @@ export type DropdownItemOption = { value: number | string; }; -export default createComponent({ +export default defineComponent({ + name, + props: { title: String, disabled: Boolean, diff --git a/src/dropdown-item/index.ts b/src/dropdown-item/index.ts new file mode 100644 index 000000000..ec854c0e9 --- /dev/null +++ b/src/dropdown-item/index.ts @@ -0,0 +1,8 @@ +import { installable } from '../utils'; +import _DropdownItem from './DropdownItem'; + +const DropdownItem = installable(_DropdownItem); + +export default DropdownItem; +export { DropdownItem }; +export type { DropdownItemOption } from './DropdownItem'; diff --git a/src/dropdown-menu/index.tsx b/src/dropdown-menu/DropdownMenu.tsx similarity index 93% rename from src/dropdown-menu/index.tsx rename to src/dropdown-menu/DropdownMenu.tsx index a6c3068aa..7692aa6da 100644 --- a/src/dropdown-menu/index.tsx +++ b/src/dropdown-menu/DropdownMenu.tsx @@ -1,4 +1,11 @@ -import { ref, computed, PropType, CSSProperties, Ref } from 'vue'; +import { + ref, + Ref, + computed, + PropType, + CSSProperties, + defineComponent, +} from 'vue'; // Utils import { isDef, ComponentInstance, createNamespace } from '../utils'; @@ -12,9 +19,9 @@ import { useEventListener, } from '@vant/use'; -const [createComponent, bem] = createNamespace('dropdown-menu'); +const [name, bem] = createNamespace('dropdown-menu'); -export const DROPDOWN_KEY = Symbol('DropdownMenu'); +export const DROPDOWN_KEY = Symbol(name); export type DropdownMenuDirection = 'up' | 'down'; @@ -30,7 +37,9 @@ export type DropdownMenuProvide = { offset: Ref; }; -export default createComponent({ +export default defineComponent({ + name, + props: { zIndex: [Number, String], activeColor: String, diff --git a/src/dropdown-menu/index.ts b/src/dropdown-menu/index.ts new file mode 100644 index 000000000..0409af1d6 --- /dev/null +++ b/src/dropdown-menu/index.ts @@ -0,0 +1,8 @@ +import { installable } from '../utils'; +import _DropdownMenu from './DropdownMenu'; + +const DropdownMenu = installable(_DropdownMenu); + +export default DropdownMenu; +export { DropdownMenu }; +export type { DropdownMenuDirection } from './DropdownMenu'; diff --git a/src/empty/index.tsx b/src/empty/Empty.tsx similarity index 91% rename from src/empty/index.tsx rename to src/empty/Empty.tsx index e32c0335b..fdf4acff9 100644 --- a/src/empty/index.tsx +++ b/src/empty/Empty.tsx @@ -1,11 +1,14 @@ +import { defineComponent } from 'vue'; import { createNamespace, getSizeStyle } from '../utils'; import { Network } from './Network'; -const [createComponent, bem] = createNamespace('empty'); +const [name, bem] = createNamespace('empty'); const PRESET_IMAGES = ['error', 'search', 'default']; -export default createComponent({ +export default defineComponent({ + name, + props: { imageSize: [Number, String], description: String, diff --git a/src/empty/index.ts b/src/empty/index.ts new file mode 100644 index 000000000..c9b20b0b9 --- /dev/null +++ b/src/empty/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _Empty from './Empty'; + +const Empty = installable(_Empty); + +export default Empty; +export { Empty }; diff --git a/src/field/index.tsx b/src/field/Field.tsx similarity index 98% rename from src/field/index.tsx rename to src/field/Field.tsx index 4acc26980..40adfc444 100644 --- a/src/field/index.tsx +++ b/src/field/Field.tsx @@ -7,6 +7,7 @@ import { reactive, PropType, onMounted, + defineComponent, } from 'vue'; // Utils @@ -28,6 +29,7 @@ import { resizeTextarea, runRuleValidator, } from './utils'; +import { cellProps } from '../cell/Cell'; // Composables import { useParent } from '@vant/use'; @@ -36,7 +38,7 @@ import { FORM_KEY, FIELD_KEY } from '../composables/use-link-field'; // Components import Icon from '../icon'; -import Cell, { cellProps } from '../cell'; +import Cell from '../cell'; // Types import type { @@ -50,9 +52,11 @@ import type { FieldValidateTrigger, } from './types'; -const [createComponent, bem] = createNamespace('field'); +const [name, bem] = createNamespace('field'); + +export default defineComponent({ + name, -export default createComponent({ props: { ...cellProps, rows: [Number, String], diff --git a/src/field/index.ts b/src/field/index.ts new file mode 100644 index 000000000..01b7dcdd3 --- /dev/null +++ b/src/field/index.ts @@ -0,0 +1,17 @@ +import { installable } from '../utils'; +import _Field from './Field'; + +const Field = installable(_Field); + +export default Field; +export { Field }; +export type { + FieldType, + FieldRule, + FieldTextAlign, + FieldClearTrigger, + FieldFormatTrigger, + FieldValidateError, + FieldAutosizeConfig, + FieldValidateTrigger, +} from './types'; diff --git a/src/form/index.tsx b/src/form/Form.tsx similarity index 97% rename from src/form/index.tsx rename to src/form/Form.tsx index 4ae57cc31..971e774a7 100644 --- a/src/form/index.tsx +++ b/src/form/Form.tsx @@ -1,4 +1,4 @@ -import { PropType } from 'vue'; +import { PropType, defineComponent } from 'vue'; // Utils import { createNamespace, ComponentInstance } from '../utils'; @@ -15,9 +15,11 @@ import type { FieldValidateTrigger, } from '../field/types'; -const [createComponent, bem] = createNamespace('form'); +const [name, bem] = createNamespace('form'); + +export default defineComponent({ + name, -export default createComponent({ props: { colon: Boolean, disabled: Boolean, diff --git a/src/form/index.ts b/src/form/index.ts new file mode 100644 index 000000000..f8f3da32f --- /dev/null +++ b/src/form/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _Form from './Form'; + +const Form = installable(_Form); + +export default Form; +export { Form }; diff --git a/src/grid-item/index.tsx b/src/grid-item/GridItem.tsx similarity index 93% rename from src/grid-item/index.tsx rename to src/grid-item/GridItem.tsx index a47231348..b3bf0f823 100644 --- a/src/grid-item/index.tsx +++ b/src/grid-item/GridItem.tsx @@ -1,9 +1,9 @@ -import { computed, CSSProperties } from 'vue'; +import { computed, CSSProperties, defineComponent } from 'vue'; // Utils import { createNamespace, addUnit } from '../utils'; import { BORDER } from '../utils/constant'; -import { GRID_KEY, GridProvide } from '../grid'; +import { GRID_KEY, GridProvide } from '../grid/Grid'; // Composables import { useParent } from '@vant/use'; @@ -13,9 +13,11 @@ import { useRoute, routeProps } from '../composables/use-route'; import Icon from '../icon'; import Badge from '../badge'; -const [createComponent, bem] = createNamespace('grid-item'); +const [name, bem] = createNamespace('grid-item'); + +export default defineComponent({ + name, -export default createComponent({ props: { ...routeProps, dot: Boolean, diff --git a/src/grid-item/index.ts b/src/grid-item/index.ts new file mode 100644 index 000000000..2c60f41d9 --- /dev/null +++ b/src/grid-item/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _GridItem from './GridItem'; + +const GridItem = installable(_GridItem); + +export default GridItem; +export { GridItem }; diff --git a/src/grid/index.tsx b/src/grid/Grid.tsx similarity index 87% rename from src/grid/index.tsx rename to src/grid/Grid.tsx index ec56f36a9..d59201a51 100644 --- a/src/grid/index.tsx +++ b/src/grid/Grid.tsx @@ -1,11 +1,11 @@ -import { PropType } from 'vue'; +import { PropType, defineComponent } from 'vue'; import { createNamespace, addUnit } from '../utils'; import { BORDER_TOP } from '../utils/constant'; import { useChildren } from '@vant/use'; -const [createComponent, bem] = createNamespace('grid'); +const [name, bem] = createNamespace('grid'); -export const GRID_KEY = Symbol('Grid'); +export const GRID_KEY = Symbol(name); export type GridDirection = 'horizontal' | 'vertical'; @@ -22,7 +22,9 @@ export type GridProvide = { }; }; -export default createComponent({ +export default defineComponent({ + name, + props: { square: Boolean, gutter: [Number, String], diff --git a/src/grid/index.ts b/src/grid/index.ts new file mode 100644 index 000000000..3fbc76760 --- /dev/null +++ b/src/grid/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _Grid from './Grid'; + +const Grid = installable(_Grid); + +export default Grid; +export { Grid }; diff --git a/src/icon/index.tsx b/src/icon/Icon.tsx similarity index 88% rename from src/icon/index.tsx rename to src/icon/Icon.tsx index 3e65ca84e..ee84b7f27 100644 --- a/src/icon/index.tsx +++ b/src/icon/Icon.tsx @@ -1,14 +1,16 @@ -import { PropType } from 'vue'; +import { PropType, defineComponent } from 'vue'; import { addUnit, createNamespace } from '../utils'; import Badge from '../badge'; -const [createComponent, bem] = createNamespace('icon'); +const [name, bem] = createNamespace('icon'); function isImage(name?: string) { return name ? name.includes('/') : false; } -export default createComponent({ +export default defineComponent({ + name, + props: { dot: Boolean, name: String, diff --git a/src/icon/index.ts b/src/icon/index.ts new file mode 100644 index 000000000..537a3056d --- /dev/null +++ b/src/icon/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _Icon from './Icon'; + +const Icon = installable(_Icon); + +export default Icon; +export { Icon }; diff --git a/src/image-preview/ImagePreview.tsx b/src/image-preview/ImagePreview.tsx index 22999f588..bcd19b416 100644 --- a/src/image-preview/ImagePreview.tsx +++ b/src/image-preview/ImagePreview.tsx @@ -6,6 +6,7 @@ import { reactive, onMounted, CSSProperties, + defineComponent, } from 'vue'; // Utils @@ -27,14 +28,16 @@ import Swipe, { SwipeToOptions } from '../swipe'; import Popup, { PopupCloseIconPosition } from '../popup'; import ImagePreviewItem from './ImagePreviewItem'; -const [createComponent, bem] = createNamespace('image-preview'); +const [name, bem] = createNamespace('image-preview'); export type ScaleEventParams = { scale: number; index: number; }; -export default createComponent({ +export default defineComponent({ + name, + props: { show: Boolean, closeable: Boolean, diff --git a/src/image-preview/index.tsx b/src/image-preview/index.tsx index 1c4546fc1..8c16d6875 100644 --- a/src/image-preview/index.tsx +++ b/src/image-preview/index.tsx @@ -1,5 +1,5 @@ -import { App, CSSProperties, Plugin, TeleportProps } from 'vue'; -import { ComponentInstance, inBrowser } from '../utils'; +import { App, CSSProperties, TeleportProps } from 'vue'; +import { ComponentInstance, inBrowser, installable } from '../utils'; import { mountComponent, usePopupState } from '../utils/mount-component'; import { Interceptor } from '../utils/interceptor'; import { PopupCloseIconPosition } from '../popup'; @@ -97,10 +97,10 @@ const ImagePreview = ( return instance; }; -ImagePreview.Component = VanImagePreview; +ImagePreview.Component = installable(VanImagePreview); ImagePreview.install = (app: App) => { - app.use((VanImagePreview as unknown) as Plugin); + app.use(installable(VanImagePreview)); }; export default ImagePreview; diff --git a/src/image-preview/test/function.spec.ts b/src/image-preview/test/function.spec.ts index 6486f50f5..c6a274ea0 100644 --- a/src/image-preview/test/function.spec.ts +++ b/src/image-preview/test/function.spec.ts @@ -3,7 +3,7 @@ import ImagePreview from '..'; import ImagePreviewComponent from '../ImagePreview'; test('should expose ImagePreviewComponent in ImagePreview.Component', () => { - expect(ImagePreview.Component).toEqual(ImagePreviewComponent); + expect(ImagePreview.Component.name).toEqual('van-image-preview'); }); test('should register component to app', () => { diff --git a/src/image/index.tsx b/src/image/Image.tsx similarity index 97% rename from src/image/index.tsx rename to src/image/Image.tsx index dae832bef..8e80b7ea3 100644 --- a/src/image/index.tsx +++ b/src/image/Image.tsx @@ -5,6 +5,7 @@ import { PropType, CSSProperties, onBeforeUnmount, + defineComponent, getCurrentInstance, } from 'vue'; import { @@ -16,11 +17,13 @@ import { } from '../utils'; import Icon from '../icon'; -const [createComponent, bem] = createNamespace('image'); +const [name, bem] = createNamespace('image'); export type ImageFit = 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'; -export default createComponent({ +export default defineComponent({ + name, + props: { src: String, alt: String, diff --git a/src/image/index.ts b/src/image/index.ts new file mode 100644 index 000000000..f487a4662 --- /dev/null +++ b/src/image/index.ts @@ -0,0 +1,8 @@ +import { installable } from '../utils'; +import _Image from './Image'; + +const Image = installable(_Image); + +export default Image; +export { Image }; +export type { ImageFit } from './Image'; diff --git a/src/index-anchor/index.tsx b/src/index-anchor/IndexAnchor.tsx similarity index 90% rename from src/index-anchor/index.tsx rename to src/index-anchor/IndexAnchor.tsx index aa9c3798e..4478d1186 100644 --- a/src/index-anchor/index.tsx +++ b/src/index-anchor/IndexAnchor.tsx @@ -1,18 +1,20 @@ -import { ref, reactive, computed, CSSProperties } from 'vue'; +import { ref, reactive, computed, CSSProperties, defineComponent } from 'vue'; // Utils import { createNamespace, getZIndexStyle } from '../utils'; import { BORDER_BOTTOM } from '../utils/constant'; -import { INDEX_BAR_KEY, IndexBarProvide } from '../index-bar'; +import { INDEX_BAR_KEY, IndexBarProvide } from '../index-bar/IndexBar'; import { getScrollTop, getRootScrollTop } from '../utils/dom/scroll'; // Composables import { useRect, useParent } from '@vant/use'; import { useExpose } from '../composables/use-expose'; -const [createComponent, bem] = createNamespace('index-anchor'); +const [name, bem] = createNamespace('index-anchor'); + +export default defineComponent({ + name, -export default createComponent({ props: { index: [Number, String], }, diff --git a/src/index-anchor/index.ts b/src/index-anchor/index.ts new file mode 100644 index 000000000..9ea3619d4 --- /dev/null +++ b/src/index-anchor/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _IndexAnchor from './IndexAnchor'; + +const IndexAnchor = installable(_IndexAnchor); + +export default IndexAnchor; +export { IndexAnchor }; diff --git a/src/index-bar/index.tsx b/src/index-bar/IndexBar.tsx similarity index 97% rename from src/index-bar/index.tsx rename to src/index-bar/IndexBar.tsx index bb46d2bc7..4678477f7 100644 --- a/src/index-bar/index.tsx +++ b/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, diff --git a/src/index-bar/index.ts b/src/index-bar/index.ts new file mode 100644 index 000000000..5ef4e2630 --- /dev/null +++ b/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 }; diff --git a/src/list/index.tsx b/src/list/List.tsx similarity index 94% rename from src/list/index.tsx rename to src/list/List.tsx index a762a7331..7d2a783f2 100644 --- a/src/list/index.tsx +++ b/src/list/List.tsx @@ -1,4 +1,12 @@ -import { ref, watch, nextTick, onUpdated, onMounted, PropType } from 'vue'; +import { + ref, + watch, + nextTick, + PropType, + onUpdated, + onMounted, + defineComponent, +} from 'vue'; // Utils import { isHidden, createNamespace } from '../utils'; @@ -10,9 +18,11 @@ import { useExpose } from '../composables/use-expose'; // Components import Loading from '../loading'; -const [createComponent, bem, t] = createNamespace('list'); +const [name, bem, t] = createNamespace('list'); + +export default defineComponent({ + name, -export default createComponent({ props: { error: Boolean, loading: Boolean, diff --git a/src/list/index.ts b/src/list/index.ts new file mode 100644 index 000000000..223e63a7f --- /dev/null +++ b/src/list/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _List from './List'; + +const List = installable(_List); + +export default List; +export { List }; diff --git a/src/loading/index.tsx b/src/loading/Loading.tsx similarity index 90% rename from src/loading/index.tsx rename to src/loading/Loading.tsx index 2dfe9a5f1..9d361422b 100644 --- a/src/loading/index.tsx +++ b/src/loading/Loading.tsx @@ -1,7 +1,7 @@ -import { computed, PropType } from 'vue'; +import { computed, PropType, defineComponent } from 'vue'; import { createNamespace, addUnit, getSizeStyle } from '../utils'; -const [createComponent, bem] = createNamespace('loading'); +const [name, bem] = createNamespace('loading'); const SpinIcon: JSX.Element[] = Array(12).fill(); @@ -13,7 +13,9 @@ const CircularIcon = ( export type LoadingType = 'circular' | 'spinner'; -export default createComponent({ +export default defineComponent({ + name, + props: { size: [Number, String], color: String, diff --git a/src/loading/index.ts b/src/loading/index.ts new file mode 100644 index 000000000..106ff725e --- /dev/null +++ b/src/loading/index.ts @@ -0,0 +1,8 @@ +import { installable } from '../utils'; +import _Loading from './Loading'; + +const Loading = installable(_Loading); + +export default Loading; +export { Loading }; +export type { LoadingType } from './Loading'; diff --git a/src/nav-bar/index.tsx b/src/nav-bar/NavBar.tsx similarity index 94% rename from src/nav-bar/index.tsx rename to src/nav-bar/NavBar.tsx index 1dfd7f3e4..0ce9efc89 100644 --- a/src/nav-bar/index.tsx +++ b/src/nav-bar/NavBar.tsx @@ -1,4 +1,4 @@ -import { ref, CSSProperties } from 'vue'; +import { ref, CSSProperties, defineComponent } from 'vue'; // Utils import { createNamespace, getZIndexStyle } from '../utils'; @@ -10,9 +10,11 @@ import { usePlaceholder } from '../composables/use-placeholder'; // Components import Icon from '../icon'; -const [createComponent, bem] = createNamespace('nav-bar'); +const [name, bem] = createNamespace('nav-bar'); + +export default defineComponent({ + name, -export default createComponent({ props: { title: String, fixed: Boolean, diff --git a/src/nav-bar/index.ts b/src/nav-bar/index.ts new file mode 100644 index 000000000..caf79372e --- /dev/null +++ b/src/nav-bar/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _NavBar from './NavBar'; + +const NavBar = installable(_NavBar); + +export default NavBar; +export { NavBar }; diff --git a/src/notice-bar/index.tsx b/src/notice-bar/NoticeBar.tsx similarity index 96% rename from src/notice-bar/index.tsx rename to src/notice-bar/NoticeBar.tsx index 88f353b76..1e89c69cb 100644 --- a/src/notice-bar/index.tsx +++ b/src/notice-bar/NoticeBar.tsx @@ -1,4 +1,4 @@ -import { ref, watch, reactive, PropType } from 'vue'; +import { ref, watch, reactive, PropType, defineComponent } from 'vue'; import { isDef, createNamespace } from '../utils'; // Composables @@ -15,9 +15,11 @@ import Icon from '../icon'; export type NoticeBarMode = 'closeable' | 'link'; -const [createComponent, bem] = createNamespace('notice-bar'); +const [name, bem] = createNamespace('notice-bar'); + +export default defineComponent({ + name, -export default createComponent({ props: { text: String, mode: String as PropType, diff --git a/src/notice-bar/index.ts b/src/notice-bar/index.ts new file mode 100644 index 000000000..f247b9835 --- /dev/null +++ b/src/notice-bar/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _NoticeBar from './NoticeBar'; + +const NoticeBar = installable(_NoticeBar); + +export default NoticeBar; +export { NoticeBar }; diff --git a/src/notify/Notify.tsx b/src/notify/Notify.tsx index df129a32d..956884e8d 100644 --- a/src/notify/Notify.tsx +++ b/src/notify/Notify.tsx @@ -1,13 +1,15 @@ -import { PropType } from 'vue'; +import { PropType, defineComponent } from 'vue'; import { createNamespace, UnknownProp } from '../utils'; import Popup from '../popup'; import { popupSharedProps } from '../popup/shared'; -const [createComponent, bem] = createNamespace('notify'); +const [name, bem] = createNamespace('notify'); export type NotifyType = 'primary' | 'success' | 'danger' | 'warning'; -export default createComponent({ +export default defineComponent({ + name, + props: { ...popupSharedProps, color: String, diff --git a/src/notify/index.tsx b/src/notify/index.tsx index c9c964589..2f8e81ddc 100644 --- a/src/notify/index.tsx +++ b/src/notify/index.tsx @@ -1,5 +1,5 @@ -import { App, Plugin } from 'vue'; -import { isObject, inBrowser, ComponentInstance } from '../utils'; +import { App } from 'vue'; +import { isObject, inBrowser, ComponentInstance, installable } from '../utils'; import { mountComponent, usePopupState } from '../utils/mount-component'; import VanNotify, { NotifyType } from './Notify'; @@ -97,10 +97,10 @@ Notify.resetDefaultOptions = () => { }; Notify.install = (app: App) => { - app.use((VanNotify as unknown) as Plugin); + app.use(installable(VanNotify)); app.config.globalProperties.$notify = Notify; }; -Notify.Component = VanNotify; +Notify.Component = installable(VanNotify); export default Notify; diff --git a/src/number-keyboard/index.tsx b/src/number-keyboard/NumberKeyboard.tsx similarity index 96% rename from src/number-keyboard/index.tsx rename to src/number-keyboard/NumberKeyboard.tsx index 6d4da08bd..f1a0da30a 100644 --- a/src/number-keyboard/index.tsx +++ b/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 ( - {props.showDeleteKey && ( - )} - @@ -25,7 +25,9 @@ const DeleteIcon = ( export type KeyType = '' | 'delete' | 'extra' | 'close'; -export default createComponent({ +export default defineComponent({ + name, + props: { type: String as PropType, text: [Number, String], diff --git a/src/number-keyboard/index.ts b/src/number-keyboard/index.ts new file mode 100644 index 000000000..040c32e81 --- /dev/null +++ b/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 }; diff --git a/src/overlay/index.tsx b/src/overlay/Overlay.tsx similarity index 88% rename from src/overlay/index.tsx rename to src/overlay/Overlay.tsx index c48093d42..732e667fe 100644 --- a/src/overlay/index.tsx +++ b/src/overlay/Overlay.tsx @@ -1,4 +1,4 @@ -import { PropType, Transition, CSSProperties } from 'vue'; +import { PropType, Transition, CSSProperties, defineComponent } from 'vue'; import { noop, isDef, @@ -9,9 +9,11 @@ import { } from '../utils'; import { useLazyRender } from '../composables/use-lazy-render'; -const [createComponent, bem] = createNamespace('overlay'); +const [name, bem] = createNamespace('overlay'); + +export default defineComponent({ + name, -export default createComponent({ props: { show: Boolean, zIndex: [Number, String], diff --git a/src/overlay/index.ts b/src/overlay/index.ts new file mode 100644 index 000000000..e1ac434fe --- /dev/null +++ b/src/overlay/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _Overlay from './Overlay'; + +const Overlay = installable(_Overlay); + +export default Overlay; +export { Overlay }; diff --git a/src/pagination/index.tsx b/src/pagination/Pagination.tsx similarity index 96% rename from src/pagination/index.tsx rename to src/pagination/Pagination.tsx index 26c1634ac..79ea06206 100644 --- a/src/pagination/index.tsx +++ b/src/pagination/Pagination.tsx @@ -1,8 +1,8 @@ import { createNamespace } from '../utils'; import { BORDER } from '../utils/constant'; -import { computed, watch } from 'vue'; +import { computed, watch, defineComponent } from 'vue'; -const [createComponent, bem, t] = createNamespace('pagination'); +const [name, bem, t] = createNamespace('pagination'); type PageItem = { text: string | number; @@ -18,7 +18,9 @@ function makePage( return { number, text, active }; } -export default createComponent({ +export default defineComponent({ + name, + props: { prevText: String, nextText: String, diff --git a/src/pagination/index.ts b/src/pagination/index.ts new file mode 100644 index 000000000..f7b7f642f --- /dev/null +++ b/src/pagination/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _Pagination from './Pagination'; + +const Pagination = installable(_Pagination); + +export default Pagination; +export { Pagination }; diff --git a/src/password-input/index.tsx b/src/password-input/PasswordInput.tsx similarity index 93% rename from src/password-input/index.tsx rename to src/password-input/PasswordInput.tsx index ce92c74ab..ad79e5e29 100644 --- a/src/password-input/index.tsx +++ b/src/password-input/PasswordInput.tsx @@ -1,9 +1,12 @@ +import { defineComponent } from 'vue'; import { createNamespace, addUnit } from '../utils'; import { BORDER_LEFT, BORDER_SURROUND } from '../utils/constant'; -const [createComponent, bem] = createNamespace('password-input'); +const [name, bem] = createNamespace('password-input'); + +export default defineComponent({ + name, -export default createComponent({ props: { info: String, gutter: [Number, String], diff --git a/src/password-input/index.ts b/src/password-input/index.ts new file mode 100644 index 000000000..6b6575a67 --- /dev/null +++ b/src/password-input/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _PasswordInput from './PasswordInput'; + +const PasswordInput = installable(_PasswordInput); + +export default PasswordInput; +export { PasswordInput }; diff --git a/src/picker/index.tsx b/src/picker/Picker.tsx similarity index 98% rename from src/picker/index.tsx rename to src/picker/Picker.tsx index bd7cdfaec..726364549 100644 --- a/src/picker/index.tsx +++ b/src/picker/Picker.tsx @@ -1,4 +1,4 @@ -import { ref, watch, computed, PropType } from 'vue'; +import { ref, watch, computed, PropType, defineComponent } from 'vue'; // Utils import { @@ -23,7 +23,7 @@ import Column, { PickerObjectOption, } from './PickerColumn'; -const [createComponent, bem, t] = createNamespace('picker'); +const [name, bem, t] = createNamespace('picker'); export type PickerToolbarPosition = 'top' | 'bottom'; @@ -65,7 +65,9 @@ export const pickerProps = { }, }; -export default createComponent({ +export default defineComponent({ + name, + props: { ...pickerProps, columnsFieldNames: Object as PropType, diff --git a/src/picker/PickerColumn.tsx b/src/picker/PickerColumn.tsx index 334fb429d..dd1e1f480 100644 --- a/src/picker/PickerColumn.tsx +++ b/src/picker/PickerColumn.tsx @@ -1,5 +1,5 @@ /* eslint-disable no-use-before-define */ -import { ref, watch, reactive, PropType } from 'vue'; +import { ref, watch, reactive, PropType, defineComponent } from 'vue'; // Utils import { deepClone } from '../utils/deep-clone'; @@ -24,7 +24,7 @@ const DEFAULT_DURATION = 200; const MOMENTUM_LIMIT_TIME = 300; const MOMENTUM_LIMIT_DISTANCE = 15; -const [createComponent, bem] = createNamespace('picker-column'); +const [name, bem] = createNamespace('picker-column'); function getElementTranslateY(element: Element) { const style = window.getComputedStyle(element); @@ -34,7 +34,7 @@ function getElementTranslateY(element: Element) { return Number(translateY); } -export const PICKER_KEY = Symbol('Picker'); +export const PICKER_KEY = Symbol(name); export type PickerObjectOption = { text?: string; @@ -60,7 +60,9 @@ function isOptionDisabled(option: PickerOption) { return isObject(option) && option.disabled; } -export default createComponent({ +export default defineComponent({ + name, + props: { readonly: Boolean, allowHtml: Boolean, diff --git a/src/picker/index.ts b/src/picker/index.ts new file mode 100644 index 000000000..c8069cde9 --- /dev/null +++ b/src/picker/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _Picker from './Picker'; + +const Picker = installable(_Picker); + +export default Picker; +export { Picker }; diff --git a/src/popover/index.tsx b/src/popover/Popover.tsx similarity index 97% rename from src/popover/index.tsx rename to src/popover/Popover.tsx index 4ca2dd947..09578bb99 100644 --- a/src/popover/index.tsx +++ b/src/popover/Popover.tsx @@ -6,6 +6,7 @@ import { onMounted, TeleportProps, onBeforeUnmount, + defineComponent, } from 'vue'; import { Instance, createPopper, offsetModifier } from '@vant/popperjs'; @@ -20,7 +21,7 @@ import { useClickAway } from '@vant/use'; import Icon from '../icon'; import Popup from '../popup'; -const [createComponent, bem] = createNamespace('popover'); +const [name, bem] = createNamespace('popover'); export type PopoverTheme = 'light' | 'dark'; export type PopoverTrigger = 'manual' | 'click'; @@ -46,7 +47,9 @@ export type PopoverAction = { className?: string; }; -export default createComponent({ +export default defineComponent({ + name, + props: { show: Boolean, overlay: Boolean, diff --git a/src/popover/index.ts b/src/popover/index.ts new file mode 100644 index 000000000..088e313c1 --- /dev/null +++ b/src/popover/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _Popover from './Popover'; + +const Popover = installable(_Popover); + +export default Popover; +export { Popover }; diff --git a/src/popup/index.tsx b/src/popup/Popup.tsx similarity index 98% rename from src/popup/index.tsx rename to src/popup/Popup.tsx index c92c50334..a52383b62 100644 --- a/src/popup/index.tsx +++ b/src/popup/Popup.tsx @@ -9,6 +9,7 @@ import { onActivated, CSSProperties, onDeactivated, + defineComponent, } from 'vue'; // Utils @@ -33,11 +34,13 @@ export type PopupCloseIconPosition = | 'botttom-left' | 'bottom-right'; -const [createComponent, bem] = createNamespace('popup'); +const [name, bem] = createNamespace('popup'); let globalZIndex = 2000; -export default createComponent({ +export default defineComponent({ + name, + inheritAttrs: false, props: { diff --git a/src/popup/index.ts b/src/popup/index.ts new file mode 100644 index 000000000..04aa87221 --- /dev/null +++ b/src/popup/index.ts @@ -0,0 +1,8 @@ +import { installable } from '../utils'; +import _Popup from './Popup'; + +const Popup = installable(_Popup); + +export default Popup; +export { Popup }; +export type { PopupPosition, PopupCloseIconPosition } from './Popup'; diff --git a/src/progress/index.tsx b/src/progress/Progress.tsx similarity index 91% rename from src/progress/index.tsx rename to src/progress/Progress.tsx index 4bb54b15c..bf71def98 100644 --- a/src/progress/index.tsx +++ b/src/progress/Progress.tsx @@ -1,10 +1,20 @@ -import { ref, watch, computed, nextTick, reactive, onMounted } from 'vue'; +import { + ref, + watch, + computed, + nextTick, + reactive, + onMounted, + defineComponent, +} from 'vue'; import { createNamespace, addUnit } from '../utils'; import { useExpose } from '../composables/use-expose'; -const [createComponent, bem] = createNamespace('progress'); +const [name, bem] = createNamespace('progress'); + +export default defineComponent({ + name, -export default createComponent({ props: { color: String, inactive: Boolean, diff --git a/src/progress/index.ts b/src/progress/index.ts new file mode 100644 index 000000000..ff6092b35 --- /dev/null +++ b/src/progress/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _Progress from './Progress'; + +const Progress = installable(_Progress); + +export default Progress; +export { Progress }; diff --git a/src/pull-refresh/index.tsx b/src/pull-refresh/PullRefresh.tsx similarity index 96% rename from src/pull-refresh/index.tsx rename to src/pull-refresh/PullRefresh.tsx index 461864b61..c844bf1b1 100644 --- a/src/pull-refresh/index.tsx +++ b/src/pull-refresh/PullRefresh.tsx @@ -1,4 +1,4 @@ -import { ref, watch, reactive, nextTick } from 'vue'; +import { ref, watch, reactive, nextTick, defineComponent } from 'vue'; // Utils import { preventDefault, getScrollTop, createNamespace } from '../utils'; @@ -10,7 +10,7 @@ import { useTouch } from '../composables/use-touch'; // Components import Loading from '../loading'; -const [createComponent, bem, t] = createNamespace('pull-refresh'); +const [name, bem, t] = createNamespace('pull-refresh'); const DEFAULT_HEAD_HEIGHT = 50; const TEXT_STATUS = ['pulling', 'loosing', 'success']; @@ -22,7 +22,9 @@ type PullRefreshStatus = | 'pulling' | 'success'; -export default createComponent({ +export default defineComponent({ + name, + props: { disabled: Boolean, successText: String, diff --git a/src/pull-refresh/index.ts b/src/pull-refresh/index.ts new file mode 100644 index 000000000..dcfc999e6 --- /dev/null +++ b/src/pull-refresh/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _PullRefresh from './PullRefresh'; + +const PullRefresh = installable(_PullRefresh); + +export default PullRefresh; +export { PullRefresh }; diff --git a/src/radio-group/index.tsx b/src/radio-group/RadioGroup.tsx similarity index 85% rename from src/radio-group/index.tsx rename to src/radio-group/RadioGroup.tsx index 3cd9536d8..98081c533 100644 --- a/src/radio-group/index.tsx +++ b/src/radio-group/RadioGroup.tsx @@ -1,12 +1,12 @@ -import { watch } from 'vue'; +import { watch, defineComponent } from 'vue'; import { UnknownProp, createNamespace } from '../utils'; import { useChildren } from '@vant/use'; import { useLinkField } from '../composables/use-link-field'; import { CheckerParent } from '../checkbox/Checker'; -const [createComponent, bem] = createNamespace('radio-group'); +const [name, bem] = createNamespace('radio-group'); -export const RADIO_KEY = Symbol('RadioGroup'); +export const RADIO_KEY = Symbol(name); export type RadioGroupProvide = CheckerParent & { props: { @@ -15,7 +15,9 @@ export type RadioGroupProvide = CheckerParent & { updateValue: (value: unknown) => void; }; -export default createComponent({ +export default defineComponent({ + name, + props: { disabled: Boolean, iconSize: [Number, String], diff --git a/src/radio-group/index.ts b/src/radio-group/index.ts new file mode 100644 index 000000000..eced898e5 --- /dev/null +++ b/src/radio-group/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _RadioGroup from './RadioGroup'; + +const RadioGroup = installable(_RadioGroup); + +export default RadioGroup; +export { RadioGroup }; diff --git a/src/radio/index.tsx b/src/radio/Radio.tsx similarity index 78% rename from src/radio/index.tsx rename to src/radio/Radio.tsx index 297c78510..f73f70693 100644 --- a/src/radio/index.tsx +++ b/src/radio/Radio.tsx @@ -1,11 +1,20 @@ +import { defineComponent } from 'vue'; + +// Utils import { pick, createNamespace } from '../utils'; +import { RADIO_KEY, RadioGroupProvide } from '../radio-group/RadioGroup'; + +// Composables import { useParent } from '@vant/use'; + +// Components import Checker, { checkerProps } from '../checkbox/Checker'; -import { RADIO_KEY, RadioGroupProvide } from '../radio-group'; -const [createComponent, bem] = createNamespace('radio'); +const [name, bem] = createNamespace('radio'); + +export default defineComponent({ + name, -export default createComponent({ props: checkerProps, emits: ['update:modelValue'], diff --git a/src/radio/index.ts b/src/radio/index.ts new file mode 100644 index 000000000..5aa6b4097 --- /dev/null +++ b/src/radio/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _Radio from './Radio'; + +const Radio = installable(_Radio); + +export default Radio; +export { Radio }; diff --git a/src/rate/index.tsx b/src/rate/Rate.tsx similarity index 97% rename from src/rate/index.tsx rename to src/rate/Rate.tsx index 9fa524f1a..f983a9b41 100644 --- a/src/rate/index.tsx +++ b/src/rate/Rate.tsx @@ -1,4 +1,4 @@ -import { computed } from 'vue'; +import { computed, defineComponent } from 'vue'; // Utils import { addUnit, createNamespace, preventDefault } from '../utils'; @@ -11,7 +11,7 @@ import { useLinkField } from '../composables/use-link-field'; // Components import Icon from '../icon'; -const [createComponent, bem] = createNamespace('rate'); +const [name, bem] = createNamespace('rate'); type RateStatus = 'full' | 'half' | 'void'; @@ -29,7 +29,9 @@ function getRateStatus( return 'void'; } -export default createComponent({ +export default defineComponent({ + name, + props: { size: [Number, String], color: String, diff --git a/src/rate/index.ts b/src/rate/index.ts new file mode 100644 index 000000000..92dc0eb9b --- /dev/null +++ b/src/rate/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _Rate from './Rate'; + +const Rate = installable(_Rate); + +export default Rate; +export { Rate }; diff --git a/src/row/index.tsx b/src/row/Row.tsx similarity index 91% rename from src/row/index.tsx rename to src/row/Row.tsx index e4628dcdd..88e0ace79 100644 --- a/src/row/index.tsx +++ b/src/row/Row.tsx @@ -1,10 +1,10 @@ -import { computed, PropType, ComputedRef } from 'vue'; +import { computed, PropType, ComputedRef, defineComponent } from 'vue'; import { createNamespace, ComponentInstance } from '../utils'; import { useChildren } from '@vant/use'; -const [createComponent, bem] = createNamespace('row'); +const [name, bem] = createNamespace('row'); -export const ROW_KEY = Symbol('Row'); +export const ROW_KEY = Symbol(name); export type RowSpaces = { left?: number; right: number }[]; @@ -21,7 +21,9 @@ export type RowJustify = | 'space-around' | 'space-between'; -export default createComponent({ +export default defineComponent({ + name, + props: { align: String as PropType, justify: String as PropType, diff --git a/src/row/index.ts b/src/row/index.ts new file mode 100644 index 000000000..32a906e6d --- /dev/null +++ b/src/row/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _Row from './Row'; + +const Row = installable(_Row); + +export default Row; +export { Row }; diff --git a/src/search/index.tsx b/src/search/Search.tsx similarity index 95% rename from src/search/index.tsx rename to src/search/Search.tsx index e1b79950e..e6061850e 100644 --- a/src/search/index.tsx +++ b/src/search/Search.tsx @@ -1,4 +1,4 @@ -import { ref, PropType, CSSProperties } from 'vue'; +import { ref, PropType, CSSProperties, defineComponent } from 'vue'; // Utils import { @@ -17,11 +17,13 @@ import Field from '../field'; // Types import type { FieldClearTrigger } from '../field/types'; -const [createComponent, bem, t] = createNamespace('search'); +const [name, bem, t] = createNamespace('search'); export type SearchShape = 'square' | 'round'; -export default createComponent({ +export default defineComponent({ + name, + inheritAttrs: false, props: { diff --git a/src/search/index.ts b/src/search/index.ts new file mode 100644 index 000000000..dfad957a8 --- /dev/null +++ b/src/search/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _Search from './Search'; + +const Search = installable(_Search); + +export default Search; +export { Search }; diff --git a/src/share-sheet/index.tsx b/src/share-sheet/ShareSheet.tsx similarity index 96% rename from src/share-sheet/index.tsx rename to src/share-sheet/ShareSheet.tsx index d3ade3033..28b4b83c3 100644 --- a/src/share-sheet/index.tsx +++ b/src/share-sheet/ShareSheet.tsx @@ -1,4 +1,4 @@ -import { PropType } from 'vue'; +import { PropType, defineComponent } from 'vue'; // Utils import { createNamespace, pick } from '../utils'; @@ -40,9 +40,11 @@ function getIconURL(icon: string) { return icon; } -const [createComponent, bem, t] = createNamespace('share-sheet'); +const [name, bem, t] = createNamespace('share-sheet'); + +export default defineComponent({ + name, -export default createComponent({ props: { ...popupSharedProps, title: String, diff --git a/src/share-sheet/index.ts b/src/share-sheet/index.ts new file mode 100644 index 000000000..784187edd --- /dev/null +++ b/src/share-sheet/index.ts @@ -0,0 +1,8 @@ +import { installable } from '../utils'; +import _ShareSheet from './ShareSheet'; + +const ShareSheet = installable(_ShareSheet); + +export default ShareSheet; +export { ShareSheet }; +export type { ShareSheetOption, ShareSheetOptions } from './ShareSheet'; diff --git a/src/sidebar-item/index.tsx b/src/sidebar-item/SidebarItem.tsx similarity index 83% rename from src/sidebar-item/index.tsx rename to src/sidebar-item/SidebarItem.tsx index fadf6373f..09104d876 100644 --- a/src/sidebar-item/index.tsx +++ b/src/sidebar-item/SidebarItem.tsx @@ -1,12 +1,21 @@ +import { defineComponent } from 'vue'; + +// Utils import { createNamespace } from '../utils'; +import { SIDEBAR_KEY, SidebarProvide } from '../sidebar/Sidebar'; + +// Composables import { useParent } from '@vant/use'; import { useRoute, routeProps } from '../composables/use-route'; -import { SIDEBAR_KEY, SidebarProvide } from '../sidebar'; + +// Components import Badge from '../badge'; -const [createComponent, bem] = createNamespace('sidebar-item'); +const [name, bem] = createNamespace('sidebar-item'); + +export default defineComponent({ + name, -export default createComponent({ props: { ...routeProps, dot: Boolean, diff --git a/src/sidebar-item/index.ts b/src/sidebar-item/index.ts new file mode 100644 index 000000000..905467c4c --- /dev/null +++ b/src/sidebar-item/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _SidebarItem from './SidebarItem'; + +const SidebarItem = installable(_SidebarItem); + +export default SidebarItem; +export { SidebarItem }; diff --git a/src/sidebar/index.tsx b/src/sidebar/Sidebar.tsx similarity index 81% rename from src/sidebar/index.tsx rename to src/sidebar/Sidebar.tsx index b56582a56..10b31c178 100644 --- a/src/sidebar/index.tsx +++ b/src/sidebar/Sidebar.tsx @@ -1,16 +1,19 @@ +import { defineComponent } from 'vue'; import { createNamespace } from '../utils'; import { useChildren } from '@vant/use'; -const [createComponent, bem] = createNamespace('sidebar'); +const [name, bem] = createNamespace('sidebar'); -export const SIDEBAR_KEY = Symbol('Sidebar'); +export const SIDEBAR_KEY = Symbol(name); export type SidebarProvide = { getActive: () => number; setActive: (value: number) => void; }; -export default createComponent({ +export default defineComponent({ + name, + props: { modelValue: { type: [Number, String], diff --git a/src/sidebar/index.ts b/src/sidebar/index.ts new file mode 100644 index 000000000..cc77fba82 --- /dev/null +++ b/src/sidebar/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _Sidebar from './Sidebar'; + +const Sidebar = installable(_Sidebar); + +export default Sidebar; +export { Sidebar }; diff --git a/src/skeleton/index.tsx b/src/skeleton/Skeleton.tsx similarity index 93% rename from src/skeleton/index.tsx rename to src/skeleton/Skeleton.tsx index 7eac6bd8b..968bb34f2 100644 --- a/src/skeleton/index.tsx +++ b/src/skeleton/Skeleton.tsx @@ -1,11 +1,13 @@ -import { PropType } from 'vue'; +import { PropType, defineComponent } from 'vue'; import { createNamespace, addUnit, getSizeStyle } from '../utils'; -const [createComponent, bem] = createNamespace('skeleton'); +const [name, bem] = createNamespace('skeleton'); const DEFAULT_ROW_WIDTH = '100%'; const DEFAULT_LAST_ROW_WIDTH = '60%'; -export default createComponent({ +export default defineComponent({ + name, + props: { title: Boolean, round: Boolean, diff --git a/src/skeleton/index.ts b/src/skeleton/index.ts new file mode 100644 index 000000000..fedc571ba --- /dev/null +++ b/src/skeleton/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _Skeleton from './Skeleton'; + +const Skeleton = installable(_Skeleton); + +export default Skeleton; +export { Skeleton }; diff --git a/src/slider/index.tsx b/src/slider/Slider.tsx similarity index 97% rename from src/slider/index.tsx rename to src/slider/Slider.tsx index f57d5ab9a..a35dba55c 100644 --- a/src/slider/index.tsx +++ b/src/slider/Slider.tsx @@ -1,4 +1,4 @@ -import { ref, computed, PropType, CSSProperties } from 'vue'; +import { ref, computed, PropType, CSSProperties, defineComponent } from 'vue'; // Utils import { @@ -14,11 +14,13 @@ import { useRect } from '@vant/use'; import { useTouch } from '../composables/use-touch'; import { useLinkField } from '../composables/use-link-field'; -const [createComponent, bem] = createNamespace('slider'); +const [name, bem] = createNamespace('slider'); type SliderValue = number | number[]; -export default createComponent({ +export default defineComponent({ + name, + props: { range: Boolean, disabled: Boolean, diff --git a/src/slider/index.ts b/src/slider/index.ts new file mode 100644 index 000000000..8859781d8 --- /dev/null +++ b/src/slider/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _Slider from './Slider'; + +const Slider = installable(_Slider); + +export default Slider; +export { Slider }; diff --git a/src/step/index.tsx b/src/step/Step.tsx similarity index 93% rename from src/step/index.tsx rename to src/step/Step.tsx index a4e582a0b..8e43c39c0 100644 --- a/src/step/index.tsx +++ b/src/step/Step.tsx @@ -1,9 +1,9 @@ -import { computed } from 'vue'; +import { computed, defineComponent } from 'vue'; // Utils import { createNamespace } from '../utils'; import { BORDER } from '../utils/constant'; -import { STEPS_KEY, StepsProvide } from '../steps'; +import { STEPS_KEY, StepsProvide } from '../steps/Steps'; // Composables import { useParent } from '@vant/use'; @@ -11,9 +11,11 @@ import { useParent } from '@vant/use'; // Components import Icon from '../icon'; -const [createComponent, bem] = createNamespace('step'); +const [name, bem] = createNamespace('step'); + +export default defineComponent({ + name, -export default createComponent({ setup(props, { slots }) { const { parent, index } = useParent(STEPS_KEY); diff --git a/src/step/index.ts b/src/step/index.ts new file mode 100644 index 000000000..2c87b98df --- /dev/null +++ b/src/step/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _Step from './Step'; + +const Step = installable(_Step); + +export default Step; +export { Step }; diff --git a/src/stepper/index.tsx b/src/stepper/Stepper.tsx similarity index 98% rename from src/stepper/index.tsx rename to src/stepper/Stepper.tsx index 97e9080fd..5910a9f50 100644 --- a/src/stepper/index.tsx +++ b/src/stepper/Stepper.tsx @@ -1,4 +1,4 @@ -import { ref, watch, computed, PropType } from 'vue'; +import { ref, watch, computed, PropType, defineComponent } from 'vue'; // Utils import { isNaN } from '../utils/validate/number'; @@ -16,7 +16,7 @@ import { import { useLinkField } from '../composables/use-link-field'; import { Interceptor, callInterceptor } from '../utils/interceptor'; -const [createComponent, bem] = createNamespace('stepper'); +const [name, bem] = createNamespace('stepper'); const LONG_PRESS_INTERVAL = 200; const LONG_PRESS_START_TIME = 600; @@ -31,7 +31,9 @@ function add(num1: number, num2: number) { return Math.round((num1 + num2) * cardinal) / cardinal; } -export default createComponent({ +export default defineComponent({ + name, + props: { theme: String, integer: Boolean, diff --git a/src/stepper/index.ts b/src/stepper/index.ts new file mode 100644 index 000000000..101d14d58 --- /dev/null +++ b/src/stepper/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _Stepper from './Stepper'; + +const Stepper = installable(_Stepper); + +export default Stepper; +export { Stepper }; diff --git a/src/steps/index.tsx b/src/steps/Steps.tsx similarity index 87% rename from src/steps/index.tsx rename to src/steps/Steps.tsx index 95cd4f3f0..e6a4a6804 100644 --- a/src/steps/index.tsx +++ b/src/steps/Steps.tsx @@ -1,10 +1,10 @@ -import { PropType } from 'vue'; +import { PropType, defineComponent } from 'vue'; import { createNamespace } from '../utils'; import { useChildren } from '@vant/use'; -const [createComponent, bem] = createNamespace('steps'); +const [name, bem] = createNamespace('steps'); -export const STEPS_KEY = Symbol('Steps'); +export const STEPS_KEY = Symbol(name); export type StepsDirection = 'horizontal' | 'vertical'; @@ -21,7 +21,9 @@ export type StepsProvide = { onClickStep: (index: number) => void; }; -export default createComponent({ +export default defineComponent({ + name, + props: { finishIcon: String, activeColor: String, diff --git a/src/steps/index.ts b/src/steps/index.ts new file mode 100644 index 000000000..40647eee2 --- /dev/null +++ b/src/steps/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _Steps from './Steps'; + +const Steps = installable(_Steps); + +export default Steps; +export { Steps }; diff --git a/src/sticky/index.tsx b/src/sticky/Sticky.tsx similarity index 94% rename from src/sticky/index.tsx rename to src/sticky/Sticky.tsx index b31dd82de..50ee38225 100644 --- a/src/sticky/index.tsx +++ b/src/sticky/Sticky.tsx @@ -1,4 +1,11 @@ -import { ref, computed, CSSProperties, PropType, reactive } from 'vue'; +import { + ref, + computed, + PropType, + reactive, + CSSProperties, + defineComponent, +} from 'vue'; // Utils import { @@ -13,11 +20,13 @@ import { import { useRect, useEventListener, useScrollParent } from '@vant/use'; import { useVisibilityChange } from '../composables/use-visibility-change'; -const [createComponent, bem] = createNamespace('sticky'); +const [name, bem] = createNamespace('sticky'); export type StickyPosition = 'top' | 'bottom'; -export default createComponent({ +export default defineComponent({ + name, + props: { zIndex: [Number, String], container: Element, diff --git a/src/sticky/index.ts b/src/sticky/index.ts new file mode 100644 index 000000000..fc058344b --- /dev/null +++ b/src/sticky/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _Sticky from './Sticky'; + +const Sticky = installable(_Sticky); + +export default Sticky; +export { Sticky }; diff --git a/src/submit-bar/index.tsx b/src/submit-bar/SubmitBar.tsx similarity index 94% rename from src/submit-bar/index.tsx rename to src/submit-bar/SubmitBar.tsx index 97360d1cb..882c2ab35 100644 --- a/src/submit-bar/index.tsx +++ b/src/submit-bar/SubmitBar.tsx @@ -1,13 +1,15 @@ -import { PropType, CSSProperties } from 'vue'; +import { PropType, CSSProperties, defineComponent } from 'vue'; import { createNamespace } from '../utils'; // Components import Icon from '../icon'; import Button, { ButtonType } from '../button'; -const [createComponent, bem, t] = createNamespace('submit-bar'); +const [name, bem, t] = createNamespace('submit-bar'); + +export default defineComponent({ + name, -export default createComponent({ props: { tip: String, label: String, diff --git a/src/submit-bar/index.ts b/src/submit-bar/index.ts new file mode 100644 index 000000000..2f08ea1a6 --- /dev/null +++ b/src/submit-bar/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _SubmitBar from './SubmitBar'; + +const SubmitBar = installable(_SubmitBar); + +export default SubmitBar; +export { SubmitBar }; diff --git a/src/swipe-cell/index.tsx b/src/swipe-cell/SwipeCell.tsx similarity index 96% rename from src/swipe-cell/index.tsx rename to src/swipe-cell/SwipeCell.tsx index 991b08eb4..b7db1f8ff 100644 --- a/src/swipe-cell/index.tsx +++ b/src/swipe-cell/SwipeCell.tsx @@ -1,4 +1,4 @@ -import { ref, Ref, reactive, computed, PropType } from 'vue'; +import { ref, Ref, reactive, computed, PropType, defineComponent } from 'vue'; // Utils import { range, isDef, createNamespace, preventDefault } from '../utils'; @@ -9,12 +9,14 @@ import { useRect, useClickAway } from '@vant/use'; import { useTouch } from '../composables/use-touch'; import { useExpose } from '../composables/use-expose'; -const [createComponent, bem] = createNamespace('swipe-cell'); +const [name, bem] = createNamespace('swipe-cell'); export type SwipeCellSide = 'left' | 'right'; export type SwipeCellPosition = SwipeCellSide | 'cell' | 'outside'; -export default createComponent({ +export default defineComponent({ + name, + props: { disabled: Boolean, leftWidth: [Number, String], diff --git a/src/swipe-cell/index.ts b/src/swipe-cell/index.ts new file mode 100644 index 000000000..68ab7ccc7 --- /dev/null +++ b/src/swipe-cell/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _SwipeCell from './SwipeCell'; + +const SwipeCell = installable(_SwipeCell); + +export default SwipeCell; +export { SwipeCell }; diff --git a/src/swipe-item/index.tsx b/src/swipe-item/SwipeItem.tsx similarity index 88% rename from src/swipe-item/index.tsx rename to src/swipe-item/SwipeItem.tsx index 7c37527b4..c54a2a42e 100644 --- a/src/swipe-item/index.tsx +++ b/src/swipe-item/SwipeItem.tsx @@ -1,12 +1,25 @@ -import { computed, CSSProperties, nextTick, onMounted, reactive } from 'vue'; -import { SWIPE_KEY, SwipeProvide } from '../swipe'; +import { + computed, + nextTick, + reactive, + onMounted, + CSSProperties, + defineComponent, +} from 'vue'; + +// Utils import { createNamespace } from '../utils'; +import { SWIPE_KEY, SwipeProvide } from '../swipe/Swipe'; + +// Composables import { useParent } from '@vant/use'; import { useExpose } from '../composables/use-expose'; -const [createComponent, bem] = createNamespace('swipe-item'); +const [name, bem] = createNamespace('swipe-item'); + +export default defineComponent({ + name, -export default createComponent({ setup(props, { slots }) { let rendered: boolean; const state = reactive({ diff --git a/src/swipe-item/index.ts b/src/swipe-item/index.ts new file mode 100644 index 000000000..3f680067f --- /dev/null +++ b/src/swipe-item/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _SwipeItem from './SwipeItem'; + +const SwipeItem = installable(_SwipeItem); + +export default SwipeItem; +export { SwipeItem }; diff --git a/src/swipe/index.tsx b/src/swipe/Swipe.tsx similarity index 98% rename from src/swipe/index.tsx rename to src/swipe/Swipe.tsx index caf4722da..b552d1be0 100644 --- a/src/swipe/index.tsx +++ b/src/swipe/Swipe.tsx @@ -9,6 +9,7 @@ import { CSSProperties, onDeactivated, onBeforeUnmount, + defineComponent, } from 'vue'; // Utils @@ -31,9 +32,9 @@ import { import { useTouch } from '../composables/use-touch'; import { useExpose } from '../composables/use-expose'; -const [createComponent, bem] = createNamespace('swipe'); +const [name, bem] = createNamespace('swipe'); -export const SWIPE_KEY = Symbol('Swipe'); +export const SWIPE_KEY = Symbol(name); export type SwipeToOptions = { immediate?: boolean; @@ -50,7 +51,9 @@ export type SwipeProvide = { activeIndicator: ComputedRef; }; -export default createComponent({ +export default defineComponent({ + name, + props: { width: [Number, String], height: [Number, String], diff --git a/src/swipe/index.ts b/src/swipe/index.ts new file mode 100644 index 000000000..2f22d4714 --- /dev/null +++ b/src/swipe/index.ts @@ -0,0 +1,8 @@ +import { installable } from '../utils'; +import _Swipe from './Swipe'; + +const Swipe = installable(_Swipe); + +export default Swipe; +export { Swipe }; +export type { SwipeToOptions } from './Swipe'; diff --git a/src/switch/index.tsx b/src/switch/Switch.tsx similarity index 93% rename from src/switch/index.tsx rename to src/switch/Switch.tsx index a815ae073..eefc985a1 100644 --- a/src/switch/index.tsx +++ b/src/switch/Switch.tsx @@ -1,10 +1,13 @@ +import { defineComponent } from 'vue'; import { createNamespace, addUnit, UnknownProp } from '../utils'; import { useLinkField } from '../composables/use-link-field'; import Loading from '../loading'; -const [createComponent, bem] = createNamespace('switch'); +const [name, bem] = createNamespace('switch'); + +export default defineComponent({ + name, -export default createComponent({ props: { size: [Number, String], loading: Boolean, diff --git a/src/switch/index.ts b/src/switch/index.ts new file mode 100644 index 000000000..4c3fa1121 --- /dev/null +++ b/src/switch/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _Switch from './Switch'; + +const Switch = installable(_Switch); + +export default Switch; +export { Switch }; diff --git a/src/tab/index.tsx b/src/tab/Tab.tsx similarity index 89% rename from src/tab/index.tsx rename to src/tab/Tab.tsx index 25588675e..a3c6e662b 100644 --- a/src/tab/index.tsx +++ b/src/tab/Tab.tsx @@ -1,6 +1,15 @@ -import { ref, watch, nextTick, PropType, CSSProperties } from 'vue'; +import { + ref, + watch, + nextTick, + PropType, + CSSProperties, + defineComponent, +} from 'vue'; + +// Utils import { createNamespace, UnknownProp } from '../utils'; -import { TABS_KEY, TabsProvide } from '../tabs'; +import { TABS_KEY, TabsProvide } from '../tabs/Tabs'; // Composables import { useParent } from '@vant/use'; @@ -9,9 +18,11 @@ import { routeProps } from '../composables/use-route'; // Components import SwipeItem from '../swipe-item'; -const [createComponent, bem] = createNamespace('tab'); +const [name, bem] = createNamespace('tab'); + +export default defineComponent({ + name, -export default createComponent({ props: { ...routeProps, dot: Boolean, diff --git a/src/tab/index.ts b/src/tab/index.ts new file mode 100644 index 000000000..085d7422a --- /dev/null +++ b/src/tab/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _Tab from './Tab'; + +const Tab = installable(_Tab); + +export default Tab; +export { Tab }; diff --git a/src/tabbar-item/index.tsx b/src/tabbar-item/TabbarItem.tsx similarity index 91% rename from src/tabbar-item/index.tsx rename to src/tabbar-item/TabbarItem.tsx index 6f8545e4a..b56ce4f61 100644 --- a/src/tabbar-item/index.tsx +++ b/src/tabbar-item/TabbarItem.tsx @@ -1,8 +1,8 @@ -import { computed, getCurrentInstance } from 'vue'; -import { TABBAR_KEY, TabbarProvide } from '../tabbar'; +import { computed, getCurrentInstance, defineComponent } from 'vue'; // Utils import { createNamespace, isObject } from '../utils'; +import { TABBAR_KEY, TabbarProvide } from '../tabbar/Tabbar'; // Composables import { useParent } from '@vant/use'; @@ -12,9 +12,11 @@ import { routeProps, useRoute } from '../composables/use-route'; import Icon from '../icon'; import Badge from '../badge'; -const [createComponent, bem] = createNamespace('tabbar-item'); +const [name, bem] = createNamespace('tabbar-item'); + +export default defineComponent({ + name, -export default createComponent({ props: { ...routeProps, dot: Boolean, diff --git a/src/tabbar-item/index.ts b/src/tabbar-item/index.ts new file mode 100644 index 000000000..02c9ad5eb --- /dev/null +++ b/src/tabbar-item/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _TabbarItem from './TabbarItem'; + +const TabbarItem = installable(_TabbarItem); + +export default TabbarItem; +export { TabbarItem }; diff --git a/src/tabbar/index.tsx b/src/tabbar/Tabbar.tsx similarity index 92% rename from src/tabbar/index.tsx rename to src/tabbar/Tabbar.tsx index 909ce20bd..efe50f41f 100644 --- a/src/tabbar/index.tsx +++ b/src/tabbar/Tabbar.tsx @@ -1,4 +1,4 @@ -import { ref, PropType } from 'vue'; +import { ref, PropType, defineComponent } from 'vue'; // Utils import { createNamespace, getZIndexStyle } from '../utils'; @@ -9,9 +9,9 @@ import { callInterceptor, Interceptor } from '../utils/interceptor'; import { useChildren } from '@vant/use'; import { usePlaceholder } from '../composables/use-placeholder'; -const [createComponent, bem] = createNamespace('tabbar'); +const [name, bem] = createNamespace('tabbar'); -export const TABBAR_KEY = Symbol('Tabbar'); +export const TABBAR_KEY = Symbol(name); export type TabbarProvide = { props: { @@ -23,7 +23,9 @@ export type TabbarProvide = { setActive: (active: number | string) => void; }; -export default createComponent({ +export default defineComponent({ + name, + props: { route: Boolean, zIndex: [Number, String], diff --git a/src/tabbar/index.ts b/src/tabbar/index.ts new file mode 100644 index 000000000..d89f633b9 --- /dev/null +++ b/src/tabbar/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _Tabbar from './Tabbar'; + +const Tabbar = installable(_Tabbar); + +export default Tabbar; +export { Tabbar }; diff --git a/src/tabs/index.tsx b/src/tabs/Tabs.tsx similarity index 98% rename from src/tabs/index.tsx rename to src/tabs/Tabs.tsx index 8ce295367..cae93cee3 100644 --- a/src/tabs/index.tsx +++ b/src/tabs/Tabs.tsx @@ -8,6 +8,7 @@ import { ComputedRef, onActivated, CSSProperties, + defineComponent, ComponentPublicInstance, } from 'vue'; @@ -45,9 +46,9 @@ import Sticky from '../sticky'; import TabsTitle from './TabsTitle'; import TabsContent from './TabsContent'; -const [createComponent, bem] = createNamespace('tabs'); +const [name, bem] = createNamespace('tabs'); -export const TABS_KEY = Symbol('Tabs'); +export const TABS_KEY = Symbol(name); export type TabType = 'line' | 'card'; @@ -64,7 +65,9 @@ export type TabsProvide = { currentName: ComputedRef; }; -export default createComponent({ +export default defineComponent({ + name, + props: { color: String, border: Boolean, diff --git a/src/tabs/TabsContent.tsx b/src/tabs/TabsContent.tsx index 3781480ce..cad6dfb3d 100644 --- a/src/tabs/TabsContent.tsx +++ b/src/tabs/TabsContent.tsx @@ -1,10 +1,12 @@ -import { ref, watch, onMounted } from 'vue'; +import { ref, watch, onMounted, defineComponent } from 'vue'; import { ComponentInstance, createNamespace } from '../utils'; import Swipe from '../swipe'; -const [createComponent, bem] = createNamespace('tabs'); +const [name, bem] = createNamespace('tabs'); + +export default defineComponent({ + name, -export default createComponent({ props: { inited: Boolean, animated: Boolean, diff --git a/src/tabs/TabsTitle.tsx b/src/tabs/TabsTitle.tsx index fd5273445..723a3761a 100644 --- a/src/tabs/TabsTitle.tsx +++ b/src/tabs/TabsTitle.tsx @@ -1,10 +1,12 @@ -import { computed, CSSProperties } from 'vue'; +import { computed, CSSProperties, defineComponent } from 'vue'; import { createNamespace, isDef } from '../utils'; import Badge from '../badge'; -const [createComponent, bem] = createNamespace('tab'); +const [name, bem] = createNamespace('tab'); + +export default defineComponent({ + name, -export default createComponent({ props: { dot: Boolean, type: String, diff --git a/src/tabs/index.ts b/src/tabs/index.ts new file mode 100644 index 000000000..7260784ac --- /dev/null +++ b/src/tabs/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _Tabs from './Tabs'; + +const Tabs = installable(_Tabs); + +export default Tabs; +export { Tabs }; diff --git a/src/tag/index.tsx b/src/tag/Tag.tsx similarity index 90% rename from src/tag/index.tsx rename to src/tag/Tag.tsx index 1f07088f4..be8581d25 100644 --- a/src/tag/index.tsx +++ b/src/tag/Tag.tsx @@ -1,12 +1,14 @@ -import { CSSProperties, PropType, Transition } from 'vue'; +import { CSSProperties, PropType, Transition, defineComponent } from 'vue'; import { createNamespace } from '../utils'; import Icon from '../icon'; -const [createComponent, bem] = createNamespace('tag'); +const [name, bem] = createNamespace('tag'); export type TagType = 'default' | 'primary' | 'success' | 'warning' | 'danger'; -export default createComponent({ +export default defineComponent({ + name, + props: { size: String, mark: Boolean, diff --git a/src/tag/index.ts b/src/tag/index.ts new file mode 100644 index 000000000..102576304 --- /dev/null +++ b/src/tag/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _Tag from './Tag'; + +const Tag = installable(_Tag); + +export default Tag; +export { Tag }; diff --git a/src/toast/Toast.tsx b/src/toast/Toast.tsx index 5e7d12296..fd7769f91 100644 --- a/src/toast/Toast.tsx +++ b/src/toast/Toast.tsx @@ -1,4 +1,11 @@ -import { watch, PropType, onMounted, onUnmounted, CSSProperties } from 'vue'; +import { + watch, + PropType, + onMounted, + onUnmounted, + CSSProperties, + defineComponent, +} from 'vue'; // Utils import { createNamespace, isDef, UnknownProp } from '../utils'; @@ -9,12 +16,14 @@ import Icon from '../icon'; import Popup from '../popup'; import Loading, { LoadingType } from '../loading'; -const [createComponent, bem] = createNamespace('toast'); +const [name, bem] = createNamespace('toast'); export type ToastType = 'text' | 'loading' | 'success' | 'fail' | 'html'; export type ToastPosition = 'top' | 'middle' | 'bottom'; -export default createComponent({ +export default defineComponent({ + name, + props: { icon: String, show: Boolean, diff --git a/src/toast/index.tsx b/src/toast/index.tsx index 79e81baa8..259f83f2b 100644 --- a/src/toast/index.tsx +++ b/src/toast/index.tsx @@ -1,5 +1,5 @@ -import { ref, App, Plugin, TeleportProps, getCurrentInstance } from 'vue'; -import { isObject, inBrowser, ComponentInstance } from '../utils'; +import { ref, App, TeleportProps, getCurrentInstance } from 'vue'; +import { isObject, inBrowser, installable, ComponentInstance } from '../utils'; import { mountComponent, usePopupState } from '../utils/mount-component'; import VanToast, { ToastType, ToastPosition } from './Toast'; import type { LoadingType } from '../loading'; @@ -179,7 +179,7 @@ Toast.allowMultiple = (value = true) => { }; Toast.install = (app: App) => { - app.use((VanToast as unknown) as Plugin); + app.use(installable(VanToast)); app.config.globalProperties.$toast = Toast; }; diff --git a/src/tree-select/index.tsx b/src/tree-select/TreeSelect.tsx similarity index 96% rename from src/tree-select/index.tsx rename to src/tree-select/TreeSelect.tsx index 9134e1fd1..b459f9a98 100644 --- a/src/tree-select/index.tsx +++ b/src/tree-select/TreeSelect.tsx @@ -1,4 +1,4 @@ -import { PropType } from 'vue'; +import { PropType, defineComponent } from 'vue'; // Utils import { createNamespace, addUnit } from '../utils'; @@ -8,7 +8,7 @@ import Icon from '../icon'; import Sidebar from '../sidebar'; import SidebarItem from '../sidebar-item'; -const [createComponent, bem] = createNamespace('tree-select'); +const [name, bem] = createNamespace('tree-select'); export type TreeSelectChild = { id: number | string; @@ -25,7 +25,9 @@ export type TreeSelectItem = { className?: unknown; }; -export default createComponent({ +export default defineComponent({ + name, + props: { max: { type: [Number, String], diff --git a/src/tree-select/index.ts b/src/tree-select/index.ts new file mode 100644 index 000000000..afb3f0085 --- /dev/null +++ b/src/tree-select/index.ts @@ -0,0 +1,7 @@ +import { installable } from '../utils'; +import _TreeSelect from './TreeSelect'; + +const TreeSelect = installable(_TreeSelect); + +export default TreeSelect; +export { TreeSelect }; diff --git a/src/uploader/index.tsx b/src/uploader/Uploader.tsx similarity index 97% rename from src/uploader/index.tsx rename to src/uploader/Uploader.tsx index cee8c0bdc..44483588c 100644 --- a/src/uploader/index.tsx +++ b/src/uploader/Uploader.tsx @@ -1,16 +1,16 @@ -import { ref, reactive, PropType } from 'vue'; +import { ref, reactive, PropType, defineComponent } from 'vue'; // Utils import { pick, isPromise, getSizeStyle, ComponentInstance } from '../utils'; import { bem, + name, toArray, isOversize, filterFiles, isImageFile, FileListItem, readFileContent, - createComponent, UploaderResultType, } from './utils'; @@ -20,7 +20,7 @@ import { useLinkField } from '../composables/use-link-field'; // Components import Icon from '../icon'; -import PreviewItem from './PreviewItem'; +import UploaderPreviewItem from './UploaderPreviewItem'; import ImagePreview, { ImagePreviewOptions } from '../image-preview'; // Types @@ -45,7 +45,9 @@ export type UploaderAfterRead = ( } ) => void; -export default createComponent({ +export default defineComponent({ + name, + props: { capture: String, multiple: Boolean, @@ -279,7 +281,7 @@ export default createComponent({ }; return ( - { - app.component(name as string, sfc); - app.component(camelize(`-${name}`), sfc); - }; - - return defineComponent(sfc); - } as typeof defineComponent; -} diff --git a/src/utils/create/index.ts b/src/utils/create/index.ts index c2c00c6d8..ede3e298a 100644 --- a/src/utils/create/index.ts +++ b/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; } diff --git a/src/utils/index.ts b/src/utils/index.ts index b940e5293..ae5f47975 100644 --- a/src/utils/index.ts +++ b/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'; diff --git a/src/utils/installable.ts b/src/utils/installable.ts new file mode 100644 index 000000000..f5810a7e0 --- /dev/null +++ b/src/utils/installable.ts @@ -0,0 +1,13 @@ +import { App } from 'vue'; +import { camelize } from './format/string'; + +export function installable(options: T) { + return { + ...options, + install(app: App) { + const { name } = options as any; + app.component(name, options); + app.component(camelize(`-${name}`), options); + }, + }; +}