types: improve generated component typing (#8308)

src/action-bar-button/index.ts

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

src/action-bar-icon/index.ts

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

src/action-bar/index.ts

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

src/action-sheet/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _ActionSheet from './ActionSheet';
 
-const ActionSheet = installable(_ActionSheet);
+const ActionSheet = withInstall<typeof _ActionSheet>(_ActionSheet);
 
 export default ActionSheet;
 export { ActionSheet };

src/address-edit/index.ts

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

src/address-list/index.ts

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

src/area/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Area from './Area';
 
-const Area = installable(_Area);
+const Area = withInstall<typeof _Area>(_Area);
 
 export default Area;
 export { Area };

src/badge/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Badge from './Badge';
 
-const Badge = installable(_Badge);
+const Badge = withInstall<typeof _Badge>(_Badge);
 
 export default Badge;
 export { Badge };

src/button/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Button from './Button';
 
-const Button = installable(_Button);
+const Button = withInstall<typeof _Button>(_Button);
 
 export default Button;
 export { Button };

src/calendar/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Calendar from './Calendar';
 
-const Calendar = installable(_Calendar);
+const Calendar = withInstall<typeof _Calendar>(_Calendar);
 
 export default Calendar;
 export { Calendar };

src/card/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Card from './Card';
 
-const Card = installable(_Card);
+const Card = withInstall<typeof _Card>(_Card);
 
 export default Card;
 export { Card };

src/cascader/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Cascader from './Cascader';
 
-const Cascader = installable(_Cascader);
+const Cascader = withInstall<typeof _Cascader>(_Cascader);
 
 export default Cascader;
 export { Cascader };

src/cell-group/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _CellGroup from './CellGroup';
 
-const CellGroup = installable(_CellGroup);
+const CellGroup = withInstall<typeof _CellGroup>(_CellGroup);
 
 export default CellGroup;
 export { CellGroup };

src/cell/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Cell from './Cell';
 
-const Cell = installable(_Cell);
+const Cell = withInstall<typeof _Cell>(_Cell);
 
 export default Cell;
 export { Cell };

src/checkbox-group/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _CheckboxGroup from './CheckboxGroup';
 
-const CheckboxGroup = installable(_CheckboxGroup);
+const CheckboxGroup = withInstall<typeof _CheckboxGroup>(_CheckboxGroup);
 
 export default CheckboxGroup;
 export { CheckboxGroup };

src/checkbox/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Checkbox from './Checkbox';
 
-const Checkbox = installable(_Checkbox);
+const Checkbox = withInstall<typeof _Checkbox>(_Checkbox);
 
 export default Checkbox;
 export { Checkbox };

src/circle/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Circle from './Circle';
 
-const Circle = installable(_Circle);
+const Circle = withInstall<typeof _Circle>(_Circle);
 
 export default Circle;
 export { Circle };

src/col/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Col from './Col';
 
-const Col = installable(_Col);
+const Col = withInstall<typeof _Col>(_Col);
 
 export default Col;
 export { Col };

src/collapse-item/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _CollapseItem from './CollapseItem';
 
-const CollapseItem = installable(_CollapseItem);
+const CollapseItem = withInstall<typeof _CollapseItem>(_CollapseItem);
 
 export default CollapseItem;
 export { CollapseItem };

src/collapse/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Collapse from './Collapse';
 
-const Collapse = installable(_Collapse);
+const Collapse = withInstall<typeof _Collapse>(_Collapse);
 
 export default Collapse;
 export { Collapse };

src/contact-card/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _ContactCard from './ContactCard';
 
-const ContactCard = installable(_ContactCard);
+const ContactCard = withInstall<typeof _ContactCard>(_ContactCard);
 
 export default ContactCard;
 export { ContactCard };

src/contact-edit/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _ContactEdit from './ContactEdit';
 
-const ContactEdit = installable(_ContactEdit);
+const ContactEdit = withInstall<typeof _ContactEdit>(_ContactEdit);
 
 export default ContactEdit;
 export { ContactEdit };

src/contact-list/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _ContactList from './ContactList';
 
-const ContactList = installable(_ContactList);
+const ContactList = withInstall<typeof _ContactList>(_ContactList);
 
 export default ContactList;
 export { ContactList };

src/count-down/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _CountDown from './CountDown';
 
-const CountDown = installable(_CountDown);
+const CountDown = withInstall<typeof _CountDown>(_CountDown);
 
 export default CountDown;
 export { CountDown };

src/coupon-cell/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _CouponCell from './CouponCell';
 
-const CouponCell = installable(_CouponCell);
+const CouponCell = withInstall<typeof _CouponCell>(_CouponCell);
 
 export default CouponCell;
 export { CouponCell };

src/coupon-list/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _CouponList from './CouponList';
 
-const CouponList = installable(_CouponList);
+const CouponList = withInstall<typeof _CouponList>(_CouponList);
 
 export default CouponList;
 export { CouponList };

src/coupon/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Coupon from './Coupon';
 
-const Coupon = installable(_Coupon);
+const Coupon = withInstall<typeof _Coupon>(_Coupon);
 
 export default Coupon;
 export { Coupon };

src/datetime-picker/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _DatetimePicker from './DatetimePicker';
 
-const DatetimePicker = installable(_DatetimePicker);
+const DatetimePicker = withInstall<typeof _DatetimePicker>(_DatetimePicker);
 
 export default DatetimePicker;
 export { DatetimePicker };

src/dialog/index.tsx

@@ -1,5 +1,5 @@
 import { App, CSSProperties, TeleportProps } from 'vue';
-import { inBrowser, ComponentInstance, installable } from '../utils';
+import { inBrowser, ComponentInstance, withInstall } 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(installable(VanDialog));
+  app.use(withInstall<typeof VanDialog>(VanDialog));
   app.config.globalProperties.$dialog = Dialog;
 };
 
-Dialog.Component = installable(VanDialog);
+Dialog.Component = withInstall<typeof VanDialog>(VanDialog);
 
 export default Dialog;

src/divider/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Divider from './Divider';
 
-const Divider = installable(_Divider);
+const Divider = withInstall<typeof _Divider>(_Divider);
 
 export default Divider;
 export { Divider };

src/dropdown-item/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _DropdownItem from './DropdownItem';
 
-const DropdownItem = installable(_DropdownItem);
+const DropdownItem = withInstall<typeof _DropdownItem>(_DropdownItem);
 
 export default DropdownItem;
 export { DropdownItem };

src/dropdown-menu/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _DropdownMenu from './DropdownMenu';
 
-const DropdownMenu = installable(_DropdownMenu);
+const DropdownMenu = withInstall<typeof _DropdownMenu>(_DropdownMenu);
 
 export default DropdownMenu;
 export { DropdownMenu };

src/empty/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Empty from './Empty';
 
-const Empty = installable(_Empty);
+const Empty = withInstall<typeof _Empty>(_Empty);
 
 export default Empty;
 export { Empty };

src/field/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Field from './Field';
 
-const Field = installable(_Field);
+const Field = withInstall<typeof _Field>(_Field);
 
 export default Field;
 export { Field };

src/form/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Form from './Form';
 
-const Form = installable(_Form);
+const Form = withInstall<typeof _Form>(_Form);
 
 export default Form;
 export { Form };

src/grid-item/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _GridItem from './GridItem';
 
-const GridItem = installable(_GridItem);
+const GridItem = withInstall<typeof _GridItem>(_GridItem);
 
 export default GridItem;
 export { GridItem };

src/grid/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Grid from './Grid';
 
-const Grid = installable(_Grid);
+const Grid = withInstall<typeof _Grid>(_Grid);
 
 export default Grid;
 export { Grid };

src/icon/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Icon from './Icon';
 
-const Icon = installable(_Icon);
+const Icon = withInstall<typeof _Icon>(_Icon);
 
 export default Icon;
 export { Icon };

src/image-preview/index.tsx

@@ -1,5 +1,5 @@
 import { App, CSSProperties, TeleportProps } from 'vue';
-import { ComponentInstance, inBrowser, installable } from '../utils';
+import { ComponentInstance, inBrowser, withInstall } 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 = installable(VanImagePreview);
+ImagePreview.Component = withInstall<typeof VanImagePreview>(VanImagePreview);
 
 ImagePreview.install = (app: App) => {
-  app.use(installable(VanImagePreview));
+  app.use(withInstall<typeof VanImagePreview>(VanImagePreview));
 };
 
 export default ImagePreview;

src/image/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Image from './Image';
 
-const Image = installable(_Image);
+const Image = withInstall<typeof _Image>(_Image);
 
 export default Image;
 export { Image };

src/index-anchor/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _IndexAnchor from './IndexAnchor';
 
-const IndexAnchor = installable(_IndexAnchor);
+const IndexAnchor = withInstall<typeof _IndexAnchor>(_IndexAnchor);
 
 export default IndexAnchor;
 export { IndexAnchor };

src/index-bar/index.ts

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

src/list/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _List from './List';
 
-const List = installable(_List);
+const List = withInstall<typeof _List>(_List);
 
 export default List;
 export { List };

src/loading/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Loading from './Loading';
 
-const Loading = installable(_Loading);
+const Loading = withInstall<typeof _Loading>(_Loading);
 
 export default Loading;
 export { Loading };

src/nav-bar/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _NavBar from './NavBar';
 
-const NavBar = installable(_NavBar);
+const NavBar = withInstall<typeof _NavBar>(_NavBar);
 
 export default NavBar;
 export { NavBar };

src/notice-bar/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _NoticeBar from './NoticeBar';
 
-const NoticeBar = installable(_NoticeBar);
+const NoticeBar = withInstall<typeof _NoticeBar>(_NoticeBar);
 
 export default NoticeBar;
 export { NoticeBar };

src/notify/index.tsx

@@ -1,5 +1,5 @@
 import { App } from 'vue';
-import { isObject, inBrowser, ComponentInstance, installable } from '../utils';
+import { isObject, inBrowser, ComponentInstance, withInstall } 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(installable(VanNotify));
+  app.use(withInstall<typeof VanNotify>(VanNotify));
   app.config.globalProperties.$notify = Notify;
 };
 
-Notify.Component = installable(VanNotify);
+Notify.Component = withInstall<typeof VanNotify>(VanNotify);
 
 export default Notify;

src/number-keyboard/index.ts

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

src/overlay/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Overlay from './Overlay';
 
-const Overlay = installable(_Overlay);
+const Overlay = withInstall<typeof _Overlay>(_Overlay);
 
 export default Overlay;
 export { Overlay };

src/pagination/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Pagination from './Pagination';
 
-const Pagination = installable(_Pagination);
+const Pagination = withInstall<typeof _Pagination>(_Pagination);
 
 export default Pagination;
 export { Pagination };

src/password-input/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _PasswordInput from './PasswordInput';
 
-const PasswordInput = installable(_PasswordInput);
+const PasswordInput = withInstall<typeof _PasswordInput>(_PasswordInput);
 
 export default PasswordInput;
 export { PasswordInput };

src/picker/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Picker from './Picker';
 
-const Picker = installable(_Picker);
+const Picker = withInstall<typeof _Picker>(_Picker);
 
 export default Picker;
 export { Picker };

src/popover/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Popover from './Popover';
 
-const Popover = installable(_Popover);
+const Popover = withInstall<typeof _Popover>(_Popover);
 
 export default Popover;
 export { Popover };

src/popup/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Popup from './Popup';
 
-const Popup = installable(_Popup);
+const Popup = withInstall<typeof _Popup>(_Popup);
 
 export default Popup;
 export { Popup };

src/progress/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Progress from './Progress';
 
-const Progress = installable(_Progress);
+const Progress = withInstall<typeof _Progress>(_Progress);
 
 export default Progress;
 export { Progress };

src/pull-refresh/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _PullRefresh from './PullRefresh';
 
-const PullRefresh = installable(_PullRefresh);
+const PullRefresh = withInstall<typeof _PullRefresh>(_PullRefresh);
 
 export default PullRefresh;
 export { PullRefresh };

src/radio-group/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _RadioGroup from './RadioGroup';
 
-const RadioGroup = installable(_RadioGroup);
+const RadioGroup = withInstall<typeof _RadioGroup>(_RadioGroup);
 
 export default RadioGroup;
 export { RadioGroup };

src/radio/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Radio from './Radio';
 
-const Radio = installable(_Radio);
+const Radio = withInstall<typeof _Radio>(_Radio);
 
 export default Radio;
 export { Radio };

src/rate/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Rate from './Rate';
 
-const Rate = installable(_Rate);
+const Rate = withInstall<typeof _Rate>(_Rate);
 
 export default Rate;
 export { Rate };

src/row/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Row from './Row';
 
-const Row = installable(_Row);
+const Row = withInstall<typeof _Row>(_Row);
 
 export default Row;
 export { Row };

src/search/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Search from './Search';
 
-const Search = installable(_Search);
+const Search = withInstall<typeof _Search>(_Search);
 
 export default Search;
 export { Search };

src/share-sheet/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _ShareSheet from './ShareSheet';
 
-const ShareSheet = installable(_ShareSheet);
+const ShareSheet = withInstall<typeof _ShareSheet>(_ShareSheet);
 
 export default ShareSheet;
 export { ShareSheet };

src/sidebar-item/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _SidebarItem from './SidebarItem';
 
-const SidebarItem = installable(_SidebarItem);
+const SidebarItem = withInstall<typeof _SidebarItem>(_SidebarItem);
 
 export default SidebarItem;
 export { SidebarItem };

src/sidebar/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Sidebar from './Sidebar';
 
-const Sidebar = installable(_Sidebar);
+const Sidebar = withInstall<typeof _Sidebar>(_Sidebar);
 
 export default Sidebar;
 export { Sidebar };

src/skeleton/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Skeleton from './Skeleton';
 
-const Skeleton = installable(_Skeleton);
+const Skeleton = withInstall<typeof _Skeleton>(_Skeleton);
 
 export default Skeleton;
 export { Skeleton };

src/slider/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Slider from './Slider';
 
-const Slider = installable(_Slider);
+const Slider = withInstall<typeof _Slider>(_Slider);
 
 export default Slider;
 export { Slider };

src/step/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Step from './Step';
 
-const Step = installable(_Step);
+const Step = withInstall<typeof _Step>(_Step);
 
 export default Step;
 export { Step };

src/stepper/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Stepper from './Stepper';
 
-const Stepper = installable(_Stepper);
+const Stepper = withInstall<typeof _Stepper>(_Stepper);
 
 export default Stepper;
 export { Stepper };

src/steps/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Steps from './Steps';
 
-const Steps = installable(_Steps);
+const Steps = withInstall<typeof _Steps>(_Steps);
 
 export default Steps;
 export { Steps };

src/sticky/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Sticky from './Sticky';
 
-const Sticky = installable(_Sticky);
+const Sticky = withInstall<typeof _Sticky>(_Sticky);
 
 export default Sticky;
 export { Sticky };

src/submit-bar/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _SubmitBar from './SubmitBar';
 
-const SubmitBar = installable(_SubmitBar);
+const SubmitBar = withInstall<typeof _SubmitBar>(_SubmitBar);
 
 export default SubmitBar;
 export { SubmitBar };

src/swipe-cell/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _SwipeCell from './SwipeCell';
 
-const SwipeCell = installable(_SwipeCell);
+const SwipeCell = withInstall<typeof _SwipeCell>(_SwipeCell);
 
 export default SwipeCell;
 export { SwipeCell };

src/swipe-item/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _SwipeItem from './SwipeItem';
 
-const SwipeItem = installable(_SwipeItem);
+const SwipeItem = withInstall<typeof _SwipeItem>(_SwipeItem);
 
 export default SwipeItem;
 export { SwipeItem };

src/swipe/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Swipe from './Swipe';
 
-const Swipe = installable(_Swipe);
+const Swipe = withInstall<typeof _Swipe>(_Swipe);
 
 export default Swipe;
 export { Swipe };

src/switch/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Switch from './Switch';
 
-const Switch = installable(_Switch);
+const Switch = withInstall<typeof _Switch>(_Switch);
 
 export default Switch;
 export { Switch };

src/tab/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Tab from './Tab';
 
-const Tab = installable(_Tab);
+const Tab = withInstall<typeof _Tab>(_Tab);
 
 export default Tab;
 export { Tab };

src/tabbar-item/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _TabbarItem from './TabbarItem';
 
-const TabbarItem = installable(_TabbarItem);
+const TabbarItem = withInstall<typeof _TabbarItem>(_TabbarItem);
 
 export default TabbarItem;
 export { TabbarItem };

src/tabbar/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Tabbar from './Tabbar';
 
-const Tabbar = installable(_Tabbar);
+const Tabbar = withInstall<typeof _Tabbar>(_Tabbar);
 
 export default Tabbar;
 export { Tabbar };

src/tabs/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Tabs from './Tabs';
 
-const Tabs = installable(_Tabs);
+const Tabs = withInstall<typeof _Tabs>(_Tabs);
 
 export default Tabs;
 export { Tabs };

src/tag/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Tag from './Tag';
 
-const Tag = installable(_Tag);
+const Tag = withInstall<typeof _Tag>(_Tag);
 
 export default Tag;
 export { Tag };

src/toast/index.tsx

@@ -1,5 +1,5 @@
 import { ref, App, TeleportProps, getCurrentInstance } from 'vue';
-import { isObject, inBrowser, installable, ComponentInstance } from '../utils';
+import { isObject, inBrowser, withInstall, 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(installable(VanToast));
+  app.use(withInstall<typeof VanToast>(VanToast));
   app.config.globalProperties.$toast = Toast;
 };
 

src/tree-select/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _TreeSelect from './TreeSelect';
 
-const TreeSelect = installable(_TreeSelect);
+const TreeSelect = withInstall<typeof _TreeSelect>(_TreeSelect);
 
 export default TreeSelect;
 export { TreeSelect };

src/uploader/index.ts

@@ -1,7 +1,7 @@
-import { installable } from '../utils';
+import { withInstall } from '../utils';
 import _Uploader from './Uploader';
 
-const Uploader = installable(_Uploader);
+const Uploader = withInstall<typeof _Uploader>(_Uploader);
 
 export default Uploader;
 export { Uploader };

src/utils/index.ts

@@ -1,6 +1,6 @@
 export * from './base';
 export * from './create';
-export * from './installable';
+export * from './with-install';
 export * from './format/unit';
 export * from './format/number';
 export * from './format/string';

src/utils/with-install.ts

@@ -0,0 +1,17 @@
+import { App } from 'vue';
+import { camelize } from './format/string';
+
+export type WithInstall<T> = T & {
+  install(app: App): void;
+};
+
+// using any here because tsc will generate some weird results when using generics
+export function withInstall<T>(options: any): WithInstall<T> {
+  (options as Record<string, unknown>).install = (app: App) => {
+    const { name } = options as any;
+    app.component(name, options);
+    app.component(camelize(`-${name}`), options);
+  };
+
+  return options;
+}

yarn.lock

@@ -10462,9 +10462,9 @@ typedarray-to-buffer@^3.1.5:
     is-typedarray "^1.0.0"
 
 typescript@^4.1.3:
-  version "4.1.3"
+  version "4.2.3"
-  resolved "https://registry.npm.taobao.org/typescript/download/typescript-4.1.3.tgz?cache=0&sync_timestamp=1610349534592&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftypescript%2Fdownload%2Ftypescript-4.1.3.tgz#519d582bd94cba0cf8934c7d8e8467e473f53bb7"
+  resolved "https://registry.npm.taobao.org/typescript/download/typescript-4.2.3.tgz?cache=0&sync_timestamp=1615105163051&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftypescript%2Fdownload%2Ftypescript-4.2.3.tgz#39062d8019912d43726298f09493d598048c1ce3"
-  integrity sha1-UZ1YK9lMugz4k0x9joRn5HP1O7c=
+  integrity sha1-OQYtgBmRLUNyYpjwlJPVmASMHOM=
 
 uc.micro@^1.0.1, uc.micro@^1.0.5:
   version "1.0.6"