fix(components): sub components no install issue (element-plus#3615)

- Add noop install for all sub components for supress the warning

packages/components/breadcrumb/index.ts

@@ -1,12 +1,12 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
 
 import Breadcrumb from './src/breadcrumb.vue'
 import BreadcrumbItem from './src/breadcrumb-item.vue'
 
 export const ElBreadcrumb = withInstall(Breadcrumb, {
   BreadcrumbItem,
 })
-export const ElBreadcrumbItem = BreadcrumbItem
+export const ElBreadcrumbItem = withNoopInstall(BreadcrumbItem)
 export default ElBreadcrumb
 
 export * from './src/breadcrumb'

packages/components/button/index.ts

@@ -1,11 +1,11 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
 import Button from './src/button.vue'
 import ButtonGroup from './src/button-group.vue'
 
 export const ElButton = withInstall(Button, {
   ButtonGroup,
 })
-export const ElButtonGroup = ButtonGroup
+export const ElButtonGroup = withNoopInstall(ButtonGroup)
 export default ElButton
 
 export * from './src/button'

packages/components/carousel/index.ts

@@ -1,20 +1,11 @@
+import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
 import Carousel from './src/main.vue'
 import CarouselItem from './src/item.vue'
-import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
 
-Carousel.install = (app: App): void => {
-  app.component(Carousel.name, Carousel)
-  app.component(CarouselItem.name, CarouselItem)
-}
+export const ElCarousel = withInstall(Carousel, {
+  CarouselItem,
+})
 
-Carousel.CarouselItem = CarouselItem
+export default ElCarousel
 
-const _Carousel = Carousel as any as SFCWithInstall<typeof Carousel> & {
-  CarouselItem: typeof CarouselItem
-}
-
-export default _Carousel
-
-export const ElCarousel = _Carousel
-export const ElCarouselItem = CarouselItem
+export const ElCarouselItem = withNoopInstall(CarouselItem)

packages/components/checkbox/index.ts

@@ -1,25 +1,14 @@
+import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
+
 import Checkbox from './src/checkbox.vue'
 import CheckboxButton from './src/checkbox-button.vue'
 import CheckboxGroup from './src/checkbox-group.vue'
 
-import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
-
-Checkbox.install = (app: App): void => {
-  app.component(Checkbox.name, Checkbox)
-  app.component(CheckboxButton.name, CheckboxButton)
-  app.component(CheckboxGroup.name, CheckboxGroup)
-}
-
-Checkbox.CheckboxButton = CheckboxButton
-Checkbox.CheckboxGroup = CheckboxGroup
-
-const _Checkbox = Checkbox as any as SFCWithInstall<typeof Checkbox> & {
-  CheckboxButton: typeof CheckboxButton
-  CheckboxGroup: typeof CheckboxGroup
-}
+export const ElCheckbox = withInstall(Checkbox, {
+  CheckboxButton,
+  CheckboxGroup,
+})
+export default ElCheckbox
 
-export default _Checkbox
-export const ElCheckbox = _Checkbox
-export const ElCheckboxButton = CheckboxButton
-export const ElCheckboxGroup = CheckboxGroup
+export const ElCheckboxButton = withNoopInstall(CheckboxButton)
+export const ElCheckboxGroup = withNoopInstall(CheckboxGroup)

packages/components/collapse/index.ts

@@ -1,19 +1,10 @@
+import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
+
 import Collapse from './src/collapse.vue'
 import CollapseItem from './src/collapse-item.vue'
-import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
-
-Collapse.install = (app: App): void => {
-  app.component(Collapse.name, Collapse)
-  app.component(CollapseItem.name, CollapseItem)
-}
-
-Collapse.CollapseItem = CollapseItem
-
-const _Collapse = Collapse as any as SFCWithInstall<typeof Collapse> & {
-  CollapseItem: typeof CollapseItem
-}
 
-export default _Collapse
-export const ElCollapse = _Collapse
-export const ElCollapseItem = CollapseItem
+export const ElCollapse = withInstall(Collapse, {
+  CollapseItem,
+})
+export default ElCollapse
+export const ElCollapseItem = withNoopInstall(CollapseItem)

packages/components/container/index.ts

@@ -1,35 +1,20 @@
+import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
+
 import Container from './src/container.vue'
 import Aside from './src/aside.vue'
 import Footer from './src/footer.vue'
 import Header from './src/header.vue'
 import Main from './src/main.vue'
 
-import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
-
-Container.install = (app: App): void => {
-  app.component(Container.name, Container)
-  app.component(Aside.name, Aside)
-  app.component(Footer.name, Footer)
-  app.component(Header.name, Header)
-  app.component(Main.name, Main)
-}
-
-Container.Aside = Aside
-Container.Footer = Footer
-Container.Header = Header
-Container.Main = Main
-
-const _Container = Container as any as SFCWithInstall<typeof Container> & {
-  Aside: typeof Aside
-  Footer: typeof Footer
-  Header: typeof Header
-  Main: typeof Main
-}
+export const ElContainer = withInstall(Container, {
+  Aside,
+  Footer,
+  Header,
+  Main,
+})
 
-export default _Container
-export const ElContainer = _Container
-export const ElAside = Aside
-export const ElFooter = Footer
-export const ElHeader = Header
-export const ElMain = Main
+export default ElContainer
+export const ElAside = withNoopInstall(Aside)
+export const ElFooter = withNoopInstall(Footer)
+export const ElHeader = withNoopInstall(Header)
+export const ElMain = withNoopInstall(Main)

packages/components/descriptions/index.ts

@@ -1,22 +1,11 @@
+import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
+
 import Descriptions from './src/index.vue'
 import DescriptionsItem from './src/description-item'
 
-import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
-
-Descriptions.install = (app: App): void => {
-  app.component(Descriptions.name, Descriptions)
-  app.component(ElDescriptionsItem.name, ElDescriptionsItem)
-}
-
-Descriptions.DescriptionsItem = DescriptionsItem
-
-const _Descriptions = Descriptions as any as SFCWithInstall<
-  typeof Descriptions
-> & {
-  DescriptionsItem: typeof DescriptionsItem
-}
+export const ElDescriptions = withInstall(Descriptions, {
+  DescriptionsItem,
+})
+export default ElDescriptions
 
-export default _Descriptions
-export const ElDescriptions = _Descriptions
-export const ElDescriptionsItem = DescriptionsItem
+export const ElDescriptionsItem = withNoopInstall(DescriptionsItem)

packages/components/dropdown/index.ts

@@ -1,25 +1,13 @@
+import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
+
 import Dropdown from './src/dropdown.vue'
 import DropdownItem from './src/dropdown-item.vue'
 import DropdownMenu from './src/dropdown-menu.vue'
 
-import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
-
-Dropdown.install = (app: App): void => {
-  app.component(Dropdown.name, Dropdown)
-  app.component(DropdownItem.name, DropdownItem)
-  app.component(DropdownMenu.name, DropdownMenu)
-}
-
-Dropdown.DropdownItem = DropdownItem
-Dropdown.DropdownMenu = DropdownMenu
-
-const _Dropdown = Dropdown as any as SFCWithInstall<typeof Dropdown> & {
-  DropdownItem: typeof DropdownItem
-  DropdownMenu: typeof DropdownMenu
-}
-
-export default _Dropdown
-export const ElDropdown = _Dropdown
-export const ElDropdownItem = DropdownItem
-export const ElDropdownMenu = DropdownMenu
+export const ElDropdown = withInstall(Dropdown, {
+  DropdownItem,
+  DropdownMenu,
+})
+export default ElDropdown
+export const ElDropdownItem = withNoopInstall(DropdownItem)
+export const ElDropdownMenu = withNoopInstall(DropdownMenu)

packages/components/form/index.ts

@@ -1,20 +1,11 @@
+import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
 import Form from './src/form.vue'
 import FormItem from './src/form-item.vue'
 
-import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
+export const ElForm = withInstall(Form, {
+  FormItem,
+})
 
-Form.install = (app: App): void => {
-  app.component(Form.name, Form)
-  app.component(FormItem.name, FormItem)
-}
+export default ElForm
 
-Form.FormItem = FormItem
-
-const _Form = Form as any as SFCWithInstall<typeof Form> & {
-  FormItem: typeof FormItem
-}
-
-export default _Form
-export const ElForm = _Form
-export const ElFormItem = FormItem
+export const ElFormItem = withNoopInstall(FormItem)

packages/components/menu/index.ts

@@ -1,32 +1,18 @@
+import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
+
 import Menu from './src/menu'
 import MenuItem from './src/menuItem.vue'
 import MenuItemGroup from './src/menuItemGroup.vue'
 import SubMenu from './src/submenu.vue'
 
-import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
-
-Menu.install = (app: App): void => {
-  app.component(Menu.name, Menu)
-  app.component(MenuItem.name, MenuItem)
-  app.component(MenuItemGroup.name, MenuItemGroup)
-  app.component(SubMenu.name, SubMenu)
-}
-
-Menu.MenuItem = MenuItem
-Menu.MenuItemGroup = MenuItemGroup
-Menu.SubMenu = SubMenu
-
-const _Menu = Menu as any as SFCWithInstall<typeof Menu> & {
-  MenuItem: typeof MenuItem
-  MenuItemGroup: typeof MenuItemGroup
-  SubMenu: typeof SubMenu
-}
-
-export default _Menu
-export const ElMenu = _Menu
-export const ElMenuItem = MenuItem
-export const ElMenuItemGroup = MenuItemGroup
-export const ElSubMenu = SubMenu
+export const ElMenu = withInstall(Menu, {
+  MenuItem,
+  MenuItemGroup,
+  SubMenu,
+})
+export default ElMenu
+export const ElMenuItem = withNoopInstall(MenuItem)
+export const ElMenuItemGroup = withNoopInstall(MenuItemGroup)
+export const ElSubMenu = withNoopInstall(SubMenu)
 
 export * from './src/menu.type'

packages/components/radio/index.ts

@@ -1,27 +1,15 @@
+import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
+
 import Radio from './src/radio.vue'
 import RadioButton from './src/radio-button.vue'
 import RadioGroup from './src/radio-group.vue'
 
-import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
-
-Radio.install = (app: App): void => {
-  app.component(Radio.name, Radio)
-  app.component(RadioButton.name, RadioButton)
-  app.component(RadioGroup.name, RadioGroup)
-}
-
-Radio.RadioButton = RadioButton
-Radio.RadioGroup = RadioGroup
-
-const _Radio = Radio as any as SFCWithInstall<typeof Radio> & {
-  RadioButton: typeof RadioButton
-  RadioGroup: typeof RadioGroup
-}
-
-export default _Radio
-export const ElRadio = _Radio
-export const ElRadioGroup = RadioGroup
-export const ElRadioButton = RadioButton
+export const ElRadio = withInstall(Radio, {
+  RadioButton,
+  RadioGroup,
+})
+export default ElRadio
+export const ElRadioGroup = withNoopInstall(RadioGroup)
+export const ElRadioButton = withNoopInstall(RadioButton)
 
 export * from './src/token'

packages/components/select/index.ts

@@ -1,27 +1,15 @@
+import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
+
 import Select from './src/select.vue'
 import Option from './src/option.vue'
 import OptionGroup from './src/option-group.vue'
 
-import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
-
-Select.install = (app: App): void => {
-  app.component(Select.name, Select)
-  app.component(Option.name, Option)
-  app.component(OptionGroup.name, OptionGroup)
-}
-
-Select.Option = Option
-Select.OptionGroup = OptionGroup
-
-const _Select = Select as any as SFCWithInstall<typeof Select> & {
-  Option: typeof Option
-  OptionGroup: typeof OptionGroup
-}
-
-export default _Select
-export const ElSelect = _Select
-export const ElOption = Option
-export const ElOptionGroup = OptionGroup
+export const ElSelect = withInstall(Select, {
+  Option,
+  OptionGroup,
+})
+export default ElSelect
+export const ElOption = withNoopInstall(Option)
+export const ElOptionGroup = withNoopInstall(OptionGroup)
 
 export * from './src/token'