pkp/pkp-lib#10969 Address breaking change in vue3, where inject in pi…

…nia stores does not provide current component provides

src/composables/useDataChanged.js

@@ -1,17 +1,23 @@
-import {inject, onUnmounted} from 'vue';
+import {onUnmounted} from 'vue';
+import {injectFromCurrentInstance} from '@/utils/defineComponentStore';
+
 export function useDataChanged(callback) {
 	if (callback) {
-		const registerDataChangeCallback = inject('registerDataChangeCallback');
+		const registerDataChangeCallback = injectFromCurrentInstance(
+			'registerDataChangeCallback',
+		);
 		registerDataChangeCallback(callback);
 
-		const unRegisterDataChangeCallback = inject('unRegisterDataChangeCallback');
+		const unRegisterDataChangeCallback = injectFromCurrentInstance(
+			'unRegisterDataChangeCallback',
+		);
 
 		onUnmounted(() => {
 			unRegisterDataChangeCallback(callback);
 		});
 	}
 
-	const triggerDataChange = inject('triggerDataChange');
+	const triggerDataChange = injectFromCurrentInstance('triggerDataChange');
 
 	return {triggerDataChange};
 }

src/composables/useFetch.js

@@ -1,8 +1,8 @@
-import {ref, unref, inject} from 'vue';
+import {ref, unref} from 'vue';
 import {ofetch, createFetch} from 'ofetch';
 import {useModalStore} from '@/stores/modalStore';
 import {useProgressStore} from '@/stores/progressStore';
-
+import {injectFromCurrentInstance} from '@/utils/defineComponentStore';
 import {useDebounceFn} from '@vueuse/core';
 
 let ofetchInstance = ofetch;
@@ -98,7 +98,7 @@ export function useFetch(url, options = {}) {
 
 	let lastRequestController = null;
 
-	const modalLevel = inject('modalLevel');
+	const modalLevel = injectFromCurrentInstance('modalLevel');
 	const screenName = modalLevel?.value ? `modal_${modalLevel.value}` : 'base';
 	const progressStore = useProgressStore();
 

src/managers/ReviewerManager/modals/workflowLogResponseModalStore.js

@@ -1,11 +1,13 @@
-import {inject} from 'vue';
-import {defineComponentStore} from '@/utils/defineComponentStore';
+import {
+	defineComponentStore,
+	injectFromCurrentInstance,
+} from '@/utils/defineComponentStore';
 import {useForm} from '@/composables/useForm';
 
 export const useWorkflowLogResponseModalStore = defineComponentStore(
 	'workflowLogResponseModal',
 	(props) => {
-		const closeModal = inject('closeModal');
+		const closeModal = injectFromCurrentInstance('closeModal');
 		const {set: updateForm, form} = useForm(props.logResponseForm);
 
 		function formSuccess() {

src/pages/workflow/modals/workflowChangeSubmissionLanguageModalStore.js

@@ -1,5 +1,8 @@
-import {inject, ref, computed, watch} from 'vue';
-import {defineComponentStore} from '@/utils/defineComponentStore';
+import {ref, computed, watch} from 'vue';
+import {
+	defineComponentStore,
+	injectFromCurrentInstance,
+} from '@/utils/defineComponentStore';
 import {useUrl} from '@/composables/useUrl';
 import {useFetch} from '@/composables/useFetch';
 import {useForm} from '@/composables/useForm';
@@ -62,7 +65,7 @@ export const useWorkflowChangeSubmissionLanguageModalStore =
 		// Get publication props
 		getData();
 
-		const closeModal = inject('closeModal');
+		const closeModal = injectFromCurrentInstance('closeModal');
 
 		/**
 		 * Functions

src/pages/workflow/workflowStore.js

@@ -1,4 +1,5 @@
-import {computed, inject} from 'vue';
+import {computed} from 'vue';
+import {injectFromCurrentInstance} from '@/utils/defineComponentStore';
 
 import {defineComponentStore} from '@/utils/defineComponentStore';
 import {
@@ -33,7 +34,7 @@ export const useWorkflowStore = defineComponentStore(
 		/**
 		 * Action to close the workflow from inside
 		 * */
-		const closeWorkflowModal = inject('closeModal');
+		const closeWorkflowModal = injectFromCurrentInstance('closeModal');
 
 		/**
 		 * Submission & Publication

src/utils/defineComponentStore.js

@@ -1,12 +1,40 @@
 import {defineStore, getActivePinia} from 'pinia';
-import {onMounted, onBeforeUnmount, provide, inject} from 'vue';
+import {
+	onMounted,
+	onBeforeUnmount,
+	provide,
+	inject,
+	getCurrentInstance,
+} from 'vue';
 
 let storesMap = {};
 
 export function getComponentStoreByName(storeName) {
 	return storesMap[storeName].useStore();
 }
 
+/**
+ * This is replacement for `inject` method offered from vue, to be used inside pinia "component stores"
+ * Component stores follow component life cycle for great convinience, but this is not common
+ * use case. Pinia stores are mostly used as global stores independent from components.
+ *
+ * With recent change in vue (https://github.com/vuejs/core/issues/11488),
+ * inject used within pinia defaults to injecting from root app component provides, instead
+ * of current instance. Therefore using custom implementation to get current instance provides.
+ *
+ *
+ */
+export function injectFromCurrentInstance(name) {
+	const instance = getCurrentInstance();
+	const provides = instance
+		? instance.parent == null
+			? instance.vnode.appContext && instance.vnode.appContext.provides
+			: instance.parent.provides
+		: void 0;
+
+	return provides?.[name];
+}
+
 export function defineComponentStore(
 	_storeName,
 	setupFn,