feat(exports): improve component importing

Author: natedunn

src/components/Anchor/index.ts

@@ -3,13 +3,13 @@ import Anchor from "./Anchor.vue";
 
 import { registerComponent } from "../../utils/plugins/index";
 
-const Plugin = {
+const AnchorPlugin = {
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   install: (vue: Application) => {
     registerComponent(vue, Anchor);
   }
 };
 
-export default Plugin;
+export default Anchor;
 
-export { Anchor };
+export { AnchorPlugin };

src/components/Button/index.ts

@@ -3,13 +3,15 @@ import Button from "./Button.vue";
 
 import { registerComponent } from "../../utils/plugins/index";
 
-const Plugin = {
+const ButtonPlugin = {
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   install: (vue: Application) => {
     registerComponent(vue, Button);
   }
 };
 
-export default Plugin;
+// export default Plugin;
 
-export { Button };
+export default Button;
+
+export { ButtonPlugin };

src/components/Dropdown/index.ts

@@ -1,15 +1,40 @@
 import { App as Application } from "vue";
-import Dropdown from "./Dropdown.vue";
+import {Dropdown, DropdownButton, DropdownItems, DropdownItem } from "./Dropdown.vue";
 
 import { registerComponent } from "../../utils/plugins/index";
 
-const Plugin = {
+const DropdownPlugin = {
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   install(vue: Application) {
     registerComponent(vue, Dropdown);
   },
 };
+const DropdownButtonPlugin = {
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+  install(vue: Application) {
+    registerComponent(vue, DropdownButton);
+  },
+};
+const DropdownItemsPlugin = {
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+  install(vue: Application) {
+    registerComponent(vue, DropdownItems);
+  },
+};
+const DropdownItemPlugin = {
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+  install(vue: Application) {
+    registerComponent(vue, DropdownItem);
+  },
+};
 
-export default Plugin;
-
-export { Dropdown };
+export {
+  DropdownPlugin,
+  DropdownButtonPlugin,
+  DropdownItemsPlugin,
+  DropdownItemPlugin,
+  Dropdown,
+  DropdownButton,
+  DropdownItems,
+  DropdownItem
+};

src/components/Table/index.ts

@@ -3,13 +3,13 @@ import Table from "./Table.vue";
 
 import { registerComponent } from "../../utils/plugins/index";
 
-const Plugin = {
+const TablePlugin = {
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   install(vue: Application) {
     registerComponent(vue, Table);
   },
 };
 
-export default Plugin;
+export default Table;
 
-export { Table };
+export { TablePlugin };

src/components/index.ts

@@ -1,5 +1,19 @@
+import Anchor from "./Anchor";
 import Button from "./Button";
-import Dropdown from "./Dropdown";
+import {
+  Dropdown,
+  DropdownButton,
+  DropdownItems,
+  DropdownItem
+} from "./Dropdown";
 import Table from "./Table";
 
-export { Button, Dropdown, Table };
+export {
+  Anchor,
+  Button,
+  Dropdown,
+  DropdownButton,
+  DropdownItems,
+  DropdownItem,
+  Table,
+};

src/components/plugins.ts

@@ -0,0 +1,19 @@
+import {AnchorPlugin} from './Anchor';
+import { ButtonPlugin } from './Button';
+import {
+  DropdownPlugin,
+  DropdownButtonPlugin,
+  DropdownItemsPlugin,
+  DropdownItemPlugin
+} from "./Dropdown";
+import {TablePlugin } from "./Table";
+
+export {
+  AnchorPlugin,
+  ButtonPlugin,
+  DropdownPlugin,
+  DropdownButtonPlugin,
+  DropdownItemsPlugin,
+  DropdownItemPlugin,
+  TablePlugin
+};

src/index.ts

@@ -1,5 +1,5 @@
 import { App as Application, Plugin } from "vue";
-import * as components from "./components/index";
+import * as componentsAsPlugins from "./components/plugins";
 import { setVueInstance } from "./utils/config/index";
 import merge from "lodash.merge";
 import { setup, silent } from "twind";
@@ -38,9 +38,9 @@ export default function pluginSetup(
   const install: Exclude<Plugin["install"], undefined> = (app: Application) => {
     // Components
     setVueInstance(app);
-    for (const componentKey in components) {
+    for (const componentKey in componentsAsPlugins) {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      app.use((components as any)[componentKey]);
+      app.use((componentsAsPlugins as any)[componentKey]);
     }
 
     // Provide data to components

src/shims-vue.d.ts

@@ -1,8 +1,10 @@
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}
+// declare module '*.vue' {
+//   import type { DefineComponent } from 'vue'
+//   const component: DefineComponent<{}, {}, any>
+//   export default component
+// }
+
+declare module '*.vue';
 
 declare module 'prettier';
 declare module 'prettier/standalone';