pkp/pkp-lib#9527 Move global dialog to decorators

Author: jardakotesovec

.storybook/preview.js

@@ -20,6 +20,9 @@ import Tab from '@/components/Tabs/Tab.vue';
 import Tabs from '@/components/Tabs/Tabs.vue';
 import FloatingVue from 'floating-vue';
 
+import PkpDialog from '@/components/Modal/Dialog.vue';
+import {useDialogStore} from '@/stores/dialogStore';
+
 import VueScrollTo from 'vue-scrollto';
 
 import '../src/styles/_import.less';
@@ -94,7 +97,23 @@ const preview = {
 	decorators: [
 		(story) => ({
 			components: {story},
-			template: '<div style="margin: 3em;"><story /></div>',
+			template: '<div style="margin: 10px;"><story /></div>',
+		}),
+		/** Globally Available Dialog */
+		(story) => ({
+			setup() {
+				const dialogStore = useDialogStore();
+				return {dialogStore};
+			},
+			components: {story, PkpDialog},
+			template: `<div>			
+				<PkpDialog
+					:open="dialogStore.dialogOpened"
+					v-bind="dialogStore.dialogProps"
+					@close="dialogStore.closeDialog"
+				></PkpDialog>
+				<story />
+			</div>`,
 		}),
 	],
 	parameters: {

src/components/ActionPanel/ActionPanel.stories.js

@@ -1,5 +1,4 @@
 import ActionPanel from './ActionPanel.vue';
-import PkpDialog from '@/components/Modal/Dialog.vue';
 import './ActionPanelStories.less';
 import {useTranslation} from '@/composables/useTranslation';
 import {useDialogStore} from '@/stores/dialogStore';
@@ -10,7 +9,7 @@ export default {
 
 export const Default = {
 	render: (args) => ({
-		components: {ActionPanel, PkpDialog},
+		components: {ActionPanel},
 		setup() {
 			const {t} = useTranslation();
 			const dialogStore = useDialogStore();
@@ -40,16 +39,10 @@ export const Default = {
 			}
 			return {
 				args,
-				dialogStore,
 				openDeleteDialog,
 			};
 		},
 		template: `
-			<PkpDialog
-				:open="dialogStore.dialogOpened"
-				v-bind="dialogStore.dialogProps"
-				@close="dialogStore.closeDialog"
-			></PkpDialog>
 
 			<div class="previewActionPanel">
 				<action-panel>

src/components/Composer/Composer.stories.js

@@ -4,8 +4,6 @@ import Composer from './Composer.vue';
 import fileAttachers from '@/docs/data/fileAttachers';
 import insertContent from '@/docs/data/insertContent';
 import emailTemplate from '@/docs/data/emailTemplate';
-import PkpDialog from '@/components/Modal/Dialog.vue';
-import {useDialogStore} from '@/stores/dialogStore';
 
 export default {
 	title: 'Components/Composer',
@@ -14,10 +12,8 @@ export default {
 
 export const Default = {
 	render: (args) => ({
-		components: {Composer, PkpDialog},
+		components: {Composer},
 		setup() {
-			const dialogStore = useDialogStore();
-
 			const emailTemplates = [emailTemplate];
 			emailTemplates.push({
 				...emailTemplate,
@@ -106,14 +102,9 @@ export const Default = {
 					composerState.value[key] = data[key];
 				});
 			}
-			return {args, composerState, composerChanged, dialogStore};
+			return {args, composerState, composerChanged};
 		},
 		template: `
-			<PkpDialog
-				:open="dialogStore.dialogOpened"
-				v-bind="dialogStore.dialogProps"
-				@close="dialogStore.closeDialog"
-			></PkpDialog>
 
 			<Composer
 				v-bind="args"

src/components/Form/fields/FieldShowEnsuringLink.stories.js

@@ -1,17 +1,13 @@
 import FieldShowEnsuringLink from './FieldShowEnsuringLink.vue';
 import FieldBaseMock from '../mocks/field-base';
 import FieldShowEnsuringLinkMock from '../mocks/field-show-ensuring-link';
-import {useDialogStore} from '@/stores/dialogStore';
-import PkpDialog from '@/components/Modal/Dialog.vue';
 
 export default {
 	title: 'Forms/FieldShowEnsuringLink',
 	component: FieldShowEnsuringLink,
 	render: (args) => ({
-		components: {FieldShowEnsuringLink, PkpDialog},
+		components: {FieldShowEnsuringLink},
 		setup() {
-			const dialogStore = useDialogStore();
-
 			function change(name, prop, newValue, localeKey) {
 				if (localeKey) {
 					args[prop][localeKey] = newValue;
@@ -20,15 +16,9 @@ export default {
 				}
 			}
 
-			return {args, change, dialogStore};
+			return {args, change};
 		},
 		template: `
-			<PkpDialog
-				:open="dialogStore.dialogOpened"
-				v-bind="dialogStore.dialogProps"
-				@close="dialogStore.closeDialog"
-			></PkpDialog>
-
 			<FieldShowEnsuringLink v-bind="args" @change="change" />
 		`,
 	}),

src/components/ListPanel/announcements/AnnouncementsListPanel.stories.js

@@ -2,7 +2,6 @@ import AnnouncementsListPanel from './AnnouncementsListPanel.vue';
 
 import AnnouncementMock from '@/mocks/announcement';
 import FormAnnouncementMock from '@/components/Form/mocks/form-announcement';
-import PkpDialog from '@/components/Modal/Dialog.vue';
 import {useDialogStore} from '@/stores/dialogStore';
 
 export default {
@@ -71,18 +70,13 @@ const announcements = [
 
 export const Base = {
 	render: (args) => ({
-		components: {AnnouncementsListPanel, PkpDialog},
+		components: {AnnouncementsListPanel},
 		setup() {
 			const dialogStore = useDialogStore();
 
 			return {args, dialogStore};
 		},
 		template: `
-			<PkpDialog
-				:open="dialogStore.dialogOpened"
-				v-bind="dialogStore.dialogProps"
-				@close="dialogStore.closeDialog"
-			></PkpDialog>
 			<AnnouncementsListPanel
 				v-bind="args"
 			/>

src/components/ListPanel/highlights/HighlightsListPanel.stories.js

@@ -2,7 +2,6 @@ import HighlightsListPanel from './HighlightsListPanel.vue';
 import HighlightMock from '@/mocks/highlight';
 import FormHighlightMock from '@/components/Form/mocks/form-highlight';
 import PkpDialog from '@/components/Modal/Dialog.vue';
-import {useDialogStore} from '@/stores/dialogStore';
 
 export default {
 	title: 'ListPanel/HighlightsListPanel',
@@ -69,16 +68,9 @@ export const Base = {
 				});
 			}
 
-			const dialogStore = useDialogStore();
-
-			return {args, setData, dialogStore};
+			return {args, setData};
 		},
 		template: `
-			<PkpDialog
-				:open="dialogStore.dialogOpened"
-				v-bind="dialogStore.dialogProps"
-				@close="dialogStore.closeDialog"
-			></PkpDialog>
 			<HighlightsListPanel
 				v-bind="args"
 				@set="setData"

src/components/ListPanel/institutions/InstitutionsListPanel.stories.js

@@ -1,7 +1,6 @@
 import InstitutionsListPanel from './InstitutionsListPanel.vue';
 
 import PkpDialog from '@/components/Modal/Dialog.vue';
-import {useDialogStore} from '@/stores/dialogStore';
 import FormInstitutionMock from '@/components/Form/mocks/form-institution';
 
 export default {
@@ -58,16 +57,9 @@ export const Base = {
 				});
 			}
 
-			const dialogStore = useDialogStore();
-
-			return {args, setData, dialogStore};
+			return {args, setData};
 		},
 		template: `
-			<PkpDialog
-				:open="dialogStore.dialogOpened"
-				v-bind="dialogStore.dialogProps"
-				@close="dialogStore.closeDialog"
-			></PkpDialog>
 			<InstitutionsListPanel
 				v-bind="args"
 			/>

src/components/ListPanel/submissionFiles/SubmissionFilesListPanel.stories.js

@@ -1,8 +1,5 @@
 import SubmissionFilesListPanel from './SubmissionFilesListPanel.vue';
 
-import PkpDialog from '@/components/Modal/Dialog.vue';
-import {useDialogStore} from '@/stores/dialogStore';
-
 import FormSubmissionFileMock from '@/components/Form/mocks/form-submission-file';
 import DropzoneOptionsMock from '@/mocks/dropzoneOptions';
 import SubmissionFilesMock from '@/mocks/submissionFiles';
@@ -19,10 +16,8 @@ yesterday.setDate(new Date().getDate() - 1);
 
 export const Base = {
 	render: (args) => ({
-		components: {SubmissionFilesListPanel, PkpDialog},
+		components: {SubmissionFilesListPanel},
 		setup() {
-			const dialogStore = useDialogStore();
-
 			function get(key) {
 				return args[key] ? args[key] : {};
 			}
@@ -35,14 +30,9 @@ export const Base = {
 				args[key] = component;
 			}
 
-			return {args, set, dialogStore};
+			return {args, set};
 		},
 		template: `
-			<PkpDialog
-				:open="dialogStore.dialogOpened"
-				v-bind="dialogStore.dialogProps"
-				@close="dialogStore.closeDialog"
-			></PkpDialog>
 				<SubmissionFilesListPanel
 					v-bind="args"
 					@set="set"

src/components/ListPanel/submissions/SubmissionsListPanel.stories.js

@@ -1,6 +1,4 @@
 import SubmissionsListPanel from './SubmissionsListPanel.vue';
-import PkpDialog from '@/components/Modal/Dialog.vue';
-import {useDialogStore} from '@/stores/dialogStore';
 
 import SubmissionsMock from '@/mocks/submissions';
 import FieldBaseMock from '@/components/Form/mocks/field-base';
@@ -13,7 +11,7 @@ export default {
 
 export const Base = {
 	render: (args) => ({
-		components: {SubmissionsListPanel, PkpDialog},
+		components: {SubmissionsListPanel},
 		setup() {
 			function setData(id, newData) {
 				Object.keys(newData).forEach((key) => {
@@ -23,8 +21,6 @@ export const Base = {
 				});
 			}
 
-			const dialogStore = useDialogStore();
-
 			/**
 			 * Add required locale keys
 			 */
@@ -59,14 +55,9 @@ export const Base = {
 				'Production galleys created';
 			pkp.localeKeys['submission.list.viewSubmission'] = 'View Submission';
 
-			return {args, setData, dialogStore};
+			return {args, setData};
 		},
 		template: `
-			<PkpDialog
-				:open="dialogStore.dialogOpened"
-				v-bind="dialogStore.dialogProps"
-				@close="dialogStore.closeDialog"
-			></PkpDialog>
 			<SubmissionsListPanel
 				v-bind="args"
 			/>

src/components/ListPanel/users/SelectReviewerListPanel.stories.js

@@ -1,7 +1,5 @@
 import SelectReviewerListPanel from './SelectReviewerListPanel.vue';
 
-import PkpDialog from '@/components/Modal/Dialog.vue';
-import {useDialogStore} from '@/stores/dialogStore';
 import ReviewerMock from '@/mocks/reviewer';
 
 export default {
@@ -101,7 +99,7 @@ const items = [
 
 export const Base = {
 	render: (args) => ({
-		components: {SelectReviewerListPanel, PkpDialog},
+		components: {SelectReviewerListPanel},
 		setup() {
 			function setData(id, newData) {
 				Object.keys(newData).forEach((key) => {
@@ -111,16 +109,9 @@ export const Base = {
 				});
 			}
 
-			const dialogStore = useDialogStore();
-
-			return {args, setData, dialogStore};
+			return {args, setData};
 		},
 		template: `
-			<PkpDialog
-				:open="dialogStore.dialogOpened"
-				v-bind="dialogStore.dialogProps"
-				@close="dialogStore.closeDialog"
-			></PkpDialog>
 			<SelectReviewerListPanel
 				v-bind="args"
 			/>