fix global settings and injection

Author: webdevnerdstuff

cypress.config.ts

@@ -23,4 +23,6 @@ export default defineConfig({
 		viewportHeight: 800,
 		viewportWidth: 1920,
 	},
+
+	numTestsKeptInMemory: 0,
 });

cypress/support/component.ts

@@ -7,6 +7,7 @@ import VStepperForm from '../../src/plugin/VStepperForm.vue';
 import * as DATA from '../templates/testData';
 import type { Component } from 'vue';
 import "cypress-real-events";
+import { pluginOptionsInjectionKey } from '../../src/plugin/utils/globals';
 
 
 // declare global {
@@ -95,7 +96,7 @@ Cypress.Commands.add('mountComponent', (options: MountComponentOptions = {}) =>
 				validationSchema: stepperProps.validationSchema ?? undefined,
 				...stepperProps,
 			},
-			global: { provide: { globalOptions: { ...globalOptions, ...globalProps }, }, },
+			global: { provide: { [pluginOptionsInjectionKey]: { ...globalOptions, ...globalProps }, }, },
 		}).as('wrapper');
 	});
 });

cypress/templates/testData.ts

@@ -5,6 +5,7 @@ import {
 	object as yupObject,
 } from 'yup';
 import { useDeepMerge } from '../../src/plugin/composables/helpers';
+import { pluginOptionsInjectionKey } from '../../src/plugin/utils/globals';
 
 
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Shared //
@@ -592,7 +593,7 @@ const navigationTest = {
 	},
 	global: {
 		provide: {
-			globalOptions: {
+			[pluginOptionsInjectionKey]: {
 				color: 'primary',
 				validateOn: 'blur',
 				variant: 'outlined',

src/playground/configs/playground.ts

@@ -10,8 +10,11 @@ import PlaygroundApp from './PlaygroundApp.vue';
 
 const app = createApp(PlaygroundApp);
 
+app.use(createVStepperForm({
+	variant: 'outlined',
+},
+));
 app.use(createVCodeBlock());
-app.use(createVStepperForm());
 app.use(createPinia());
 app.component('font-awesome-icon', FontAwesomeIcon);
 

src/plugin/VStepperForm.vue

@@ -170,6 +170,7 @@ import type {
 	ComputedClasses,
 	Field,
 	Page,
+	PluginOptions,
 	Props,
 } from '@/plugin/types';
 import type { PrivateFormContext } from 'vee-validate';
@@ -191,14 +192,16 @@ import {
 	useHandleNonJumpAhead,
 } from './composables/navigation';
 import componentEmits from './utils/emits';
+import { pluginOptionsInjectionKey } from './utils/globals';
 import { AllProps } from './utils/props';
 
 
 const attrs = useAttrs();
 const componentId = useId();
 const slots = useSlots();
 const emit = defineEmits([...componentEmits]);
-const injectedOptions = inject<Ref<Settings>>('globalOptions')!;
+const injectedOptions = inject<PluginOptions>(pluginOptionsInjectionKey)!;
+
 
 // -------------------------------------------------- Props //
 const props = withDefaults(defineProps<Props>(), AllProps);

src/plugin/__tests__/VStepperForm.cy.ts

@@ -1,6 +1,7 @@
 import type { Field, Page } from '../../plugin/types';
 import * as DATA from '@cypress/templates/testData';
 import VStepperForm from '../VStepperForm.vue';
+import { pluginOptionsInjectionKey } from '../../plugin/utils/globals';
 
 
 const finalAnswer = DATA.finalAnswer;
@@ -65,7 +66,7 @@ const pages = [
 
 const global = {
 	provide: {
-		globalOptions: {
+		[pluginOptionsInjectionKey]: {
 			color: 'primary',
 			validateOn: 'blur',
 			fieldColumns: {
@@ -771,7 +772,7 @@ describe('Stepper Form', () => {
 				},
 				global: {
 					provide: {
-						globalOptions: {
+						[pluginOptionsInjectionKey]: {
 							fieldColumns: stepperFieldColumns,
 							summaryColumns,
 						},

src/plugin/__tests__/slots/FieldSlots.cy.ts

@@ -2,6 +2,7 @@ import type { Field } from '../../../plugin/types';
 import * as DATA from '@cypress/templates/testData';
 import VStepperForm from '../../VStepperForm.vue';
 import { VTextField } from 'vuetify/components';
+import { pluginOptionsInjectionKey } from '../../../plugin/utils/globals';
 import {
 	string as yupString,
 	object as yupObject,
@@ -50,7 +51,7 @@ const pages = [
 
 const global = {
 	provide: {
-		globalOptions: {
+		[pluginOptionsInjectionKey]: {
 			color: 'primary',
 			validateOn: 'blur',
 			fieldColumns: {

src/plugin/index.ts

@@ -2,16 +2,17 @@ import type { PluginOptions } from './types';
 import type { App, Plugin } from 'vue';
 import './styles/main.scss';
 import FieldLabel from './components/shared/FieldLabel.vue';
+import { useDeepMerge } from './composables/helpers';
+import { pluginOptionsInjectionKey } from './utils/globals';
 import { AllProps } from './utils/props';
 import VStepperForm from './VStepperForm.vue';
 
 
-const defaultOptions = AllProps;
-export const globalOptions = Symbol();
-
-export function createVStepperForm(options: PluginOptions = defaultOptions): Plugin {
+export function createVStepperForm(options: PluginOptions = {}): Plugin {
 	const install = (app: App) => {
-		app.provide(globalOptions, options);
+		const pluginOptions: PluginOptions = useDeepMerge(options, AllProps);
+
+		app.provide(pluginOptionsInjectionKey, pluginOptions);
 
 		// eslint-disable-next-line no-param-reassign
 		app.config.idPrefix = 'vsf';

src/plugin/utils/globals.ts

@@ -1 +1,6 @@
+import type { InjectionKey } from 'vue';
+import { PluginOptions } from '../types';
+
 export const componentName = 'v-stepper-form';
+
+export const pluginOptionsInjectionKey: InjectionKey<PluginOptions> = Symbol();