Fix and improve typescript support

Author: webdevnerdstuff

.eslintrc.js

@@ -40,11 +40,6 @@ module.exports = {
 		'vue',
 	],
 	root: true,
-	settings: {
-		'import/resolver': {
-			'babel-module': {},
-		},
-	},
 	rules: {
 		'@typescript-eslint/ban-ts-comment': 0,
 		'@typescript-eslint/ban-types': [

src/documentation/sections/UsageSection.vue

@@ -12,12 +12,30 @@
 				Usage
 			</h2>
 
+			<v-row>
+				<v-col cols="12">
+					<CodeBlock
+						:code="usageGlobalPlugin"
+						:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
+						lang="javascript"
+						:prismjs="codeBlockSettings.plugin === 'prismjs'"
+						:theme="codeBlockSettings.theme"
+					>
+						<template #label>
+							Global Plugin Registration
+							<br>
+							<i>Global options have a higher precedence and will override local props</i>
+						</template>
+					</CodeBlock>
+				</v-col>
+			</v-row>
+
 			<v-row>
 				<v-col cols="12">
 					<CodeBlock
 						:code="usageAll"
 						:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
-						label="Load all components"
+						label="Global Component Registration"
 						lang="javascript"
 						:prismjs="codeBlockSettings.plugin === 'prismjs'"
 						:theme="codeBlockSettings.theme"
@@ -29,7 +47,19 @@
 					<CodeBlock
 						:code="usageIndividual"
 						:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
-						label="Load individual components"
+						label="Global Individual Component Registration"
+						lang="javascript"
+						:prismjs="codeBlockSettings.plugin === 'prismjs'"
+						:theme="codeBlockSettings.theme"
+					>
+					</CodeBlock>
+				</v-col>
+
+				<v-col cols="12">
+					<CodeBlock
+						:code="usageLocal"
+						:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
+						label="Local Registration"
 						lang="javascript"
 						:prismjs="codeBlockSettings.plugin === 'prismjs'"
 						:theme="codeBlockSettings.theme"
@@ -55,6 +85,20 @@ const props = defineProps({
 const codeBlockSettings = computed(() => props.codeBlockOptions);
 const classes = inject('classes');
 
+const usageGlobalPlugin = `import { createApp } from 'vue';
+import App from './App.vue';
+import { createVInlineFields } from '@wdns/vuetify-inline-fields';
+
+const VInlineFields = createVInlineFields({
+  // See Shared Props section for available options
+});
+
+const app = createApp(App);
+
+app.plugin(VInlineFields);
+
+app.mount('#app');`;
+
 const usageAll = `import { createApp } from 'vue';
 import App from './App.vue';
 import * as VInlineFields from '@wdns/vuetify-inline-fields';
@@ -86,4 +130,13 @@ app.component('VInlineTextField', VInlineTextField);
 app.component('VInlineTextarea', VInlineTextarea);
 
 app.mount('#app');`;
+
+const usageLocal = `import {
+  VInlineCheckbox,
+  VInlineSelect,
+  VInlineSwitch,
+  VInlineTextField,
+  VInlineTextarea,
+} from '@wdns/vuetify-inline-fields';
+`;
 </script>

src/index.ts

@@ -5,21 +5,18 @@ import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import { registerPlugins } from './plugins';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import * as VInlineFields from './index';
 import { makeServer } from './server';
+import { createVInlineFields } from './plugin/index';
 
 makeServer({ environment: 'demo' });
 
 const app = createApp(App);
 app.component('CodeBlock', CodeBlock);
+app.use(createVInlineFields());
 app.use(createPinia());
 app.component('font-awesome-icon', FontAwesomeIcon);
 app.component('FaIcon', FontAwesomeIcon);
 
-for (const prop in VInlineFields) {
-	app.component(prop, VInlineFields[prop]);
-}
-
 registerPlugins(app);
 
 app.mount('#app');

src/main.ts

@@ -5,18 +5,32 @@ import { createPinia } from 'pinia';
 import { registerPlugins } from '../../plugins';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { makeServer } from '../../server';
-import * as VInlineFields from '../../index';
+import { createVInlineFields } from '../../plugin/index';
+// import {
+// 	VInlineCheckbox,
+// 	VInlineCustomField,
+// 	VInlineSelect,
+// 	VInlineSwitch,
+// 	VInlineTextField,
+// 	VInlineTextarea,
+// } from '../../plugin/index';
 
 makeServer({ environment: 'playground' });
 
 const app = createApp(PlaygroundApp);
+app.use(createVInlineFields({
+	// cell: true,
+}));
 app.use(createPinia());
 app.component('font-awesome-icon', FontAwesomeIcon);
 app.component('FaIcon', FontAwesomeIcon);
 
-for (const prop in VInlineFields) {
-	app.component(prop, VInlineFields[prop]);
-}
+// app.component('VInlineCheckbox', VInlineCheckbox);
+// app.component('VInlineCustomField', VInlineCustomField);
+// app.component('VInlineSelect', VInlineSelect);
+// app.component('VInlineSwitch', VInlineSwitch);
+// app.component('VInlineTextField', VInlineTextField);
+// app.component('VInlineTextarea', VInlineTextarea);
 
 registerPlugins(app);