pkp/pkp-lib#11296, pkp/pkp-lib#11366, pkp/pkp-lib#11387 [Versioning]

public/globals.js

@@ -159,7 +159,7 @@ window.pkp = {
 		'acceptInvitation.usernameField.description':
 			'It could be a combination of uppercase letters, lowercase letters or numbers',
 		'acceptInvitation.verifyOrcid': 'Verify ORCID iD',
-		'acceptInvitation.privacyConsent':'Privacy Consent',
+		'acceptInvitation.privacyConsent': 'Privacy Consent',
 		'admin.jobs.failed.action.redispatch': 'Try Again',
 		'admin.jobs.failed.action.redispatch.all': 'Requeue All Failed Jobs',
 		'admin.jobs.list.actions': 'Actions',
@@ -483,6 +483,7 @@ window.pkp = {
 			'These files have been submitted by the author after revisions were requested',
 		'fileManager.submissionFilesDescription':
 			'Files uploaded at the time of submission',
+		'fileManager.sendFileToTextEditor': 'Send File to Text Editor',
 		'form.dataHasChanged':
 			'The data on this form has changed. Do you wish to continue without saving?',
 		'form.errorA11y': 'Go to {$fieldLabel}: {$errorMessage}',
@@ -515,7 +516,9 @@ window.pkp = {
 		'grid.action.moreInformation': 'More Information',
 		'grid.action.order': 'Order',
 		'grid.action.saveOrdering': 'Save Order',
+		'grid.action.sendToTextEditor': 'Send to Text Editor',
 		'grid.action.sort': 'Sort',
+		'grid.action.updateFile': 'Update File Details',
 		'grid.columns.actions': 'Actions',
 		'grid.libraryFiles.submission.title': 'Submission Library',
 		'grid.noItems': 'No Items',
@@ -699,7 +702,6 @@ window.pkp = {
 		'publication.unschedule': 'Unschedule',
 		'publication.unschedule.confirm':
 			"Are you sure you don't want this scheduled for publication?",
-		'publication.version': '{$version}',
 		'publication.version.all': 'All Versions',
 		'publication.version.confirm':
 			'Are you sure you want to create a new version?',

src/components/Form/Form.vue

@@ -62,6 +62,7 @@
 				:available-locales="availableLocales"
 				:is-saving="isSaving"
 				:show-error-footer="showErrorFooter"
+				:spacing-variant="spacingVariant"
 				@change="fieldChanged"
 				@page-submitted="nextPage"
 				@previous-page="setCurrentPage(false)"
@@ -143,6 +144,8 @@ export default {
 				return true;
 			},
 		},
+		/** Defines wether to add default spacing ("default") or not("fullWidth"). This is useful when displaying the form in a Dialog, as the modal styling is already handled there. */
+		spacingVariant: String,
 	},
 	emits: [
 		/** When the form props need to be updated. The payload is an object with any keys that need to be modified. */

src/components/Form/FormGroup.vue

@@ -1,5 +1,5 @@
 <template>
-	<fieldset class="pkpFormGroup -pkpClearfix">
+	<fieldset class="pkpFormGroup -pkpClearfix" :class="spacingStyle">
 		<div v-if="label" class="pkpFormGroup__heading">
 			<legend class="pkpFormGroup__legend">{{ label }}</legend>
 			<div
@@ -126,6 +126,12 @@ export default {
 		visibleLocales: Array,
 		availableLocales: Array,
 		showWhen: [String, Array],
+		spacingVariant: {
+			required: false,
+			type: String,
+			default: () => 'default',
+			validator: (val) => ['default', 'fullWidth'].includes(val),
+		},
 	},
 	computed: {
 		/**
@@ -149,6 +155,13 @@ export default {
 			}
 			return false;
 		},
+
+		spacingStyle() {
+			if (this.spacingVariant === 'fullWidth') {
+				return '!p-0';
+			}
+			return '';
+		},
 	},
 	methods: {
 		/**

src/components/Form/FormPage.vue

@@ -9,6 +9,7 @@
 			:primary-locale="primaryLocale"
 			:visible-locales="visibleLocales"
 			:available-locales="availableLocales"
+			:spacing-variant="spacingVariant"
 			:form-id="formId"
 			@change="fieldChanged"
 			@set-errors="setErrors"
@@ -17,14 +18,15 @@
 			v-if="hasFooter"
 			ref="footer"
 			class="pkpFormPage__footer"
+			:class="footerSpacingStyle"
 			aria-live="polite"
 		>
 			<FormErrors
 				v-if="Object.keys(errors).length && showErrorFooter"
 				:errors="errors"
 				:fields="fields"
-				@showField="showField"
-				@showLocale="showLocale"
+				@show-field="showField"
+				@show-locale="showLocale"
 			/>
 			<span role="status" aria-live="polite" aria-atomic="true">
 				<transition name="pkpFormPage__status">
@@ -114,6 +116,7 @@ export default {
 				return true;
 			},
 		},
+		spacingVariant: String,
 	},
 	data() {
 		return {
@@ -146,6 +149,13 @@ export default {
 				Object.keys(this.errors).length
 			);
 		},
+
+		footerSpacingStyle() {
+			if (this.spacingVariant === 'fullWidth') {
+				return '!px-0 !py-12';
+			}
+			return '';
+		},
 	},
 	mounted() {
 		/**

src/components/Icon/Icon.stories.js

@@ -164,6 +164,7 @@ export const IconGallery = {
 			'Underline',
 			'Unlock',
 			'Upload',
+			'UpdateFile',
 			'Url',
 			'UsefulTips',
 			'User',

src/components/Icon/Icon.vue

@@ -112,6 +112,7 @@ import Tools from './icons/Tools.vue';
 import Underline from './icons/Underline.vue';
 import Unlock from './icons/Unlock.vue';
 import Upload from './icons/Upload.vue';
+import UpdateFile from './icons/UpdateFile.vue';
 import Url from './icons/Url.vue';
 import UsefulTips from './icons/UsefulTips.vue';
 import UsefulTipsPrimary from './icons/UsefulTipsPrimary.vue';
@@ -225,6 +226,7 @@ const svgIcons = {
 	Underline,
 	Unlock,
 	Upload,
+	UpdateFile,
 	Url,
 	UsefulTips,
 	UsefulTipsPrimary,

src/components/Icon/icons/UpdateFile.vue

@@ -0,0 +1,40 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<g clip-path="url(#clip0_800_35)">
+			<g clip-path="url(#clip1_800_35)">
+				<path
+					d="M18.277 8.31773H18.2043V3.35856C18.2042 3.16052 18.0437 3 17.8457 3H6.15432C5.95632 3 5.79576 3.16052 5.79576 3.35856V11.8675H5.72303C4.55654 11.8675 3.6075 12.8165 3.6075 13.9831C3.6075 15.1496 4.55654 16.0986 5.72303 16.0986H5.79576V20.6414C5.79576 20.8394 5.95632 21 6.15432 21H17.8457C18.0437 21 18.2042 20.8394 18.2042 20.6414V12.5488H18.277C19.4435 12.5488 20.3925 11.5998 20.3925 10.4333C20.3925 9.26674 19.4435 8.31773 18.277 8.31773ZM5.79573 15.3815H5.72299C4.95191 15.3815 4.32458 14.7542 4.32458 13.9831C4.32458 13.212 4.95191 12.5847 5.72299 12.5847H5.79573V15.3815ZM17.4871 8.31773H16.4589V7.66777C16.4589 7.37548 16.3077 7.1137 16.0546 6.96759C15.8014 6.82145 15.4992 6.82141 15.246 6.96763L13.4995 7.97612C13.2464 8.12227 13.0953 8.38404 13.0953 8.67629C13.0953 8.96855 13.2464 9.23032 13.4995 9.37643L15.246 10.385H15.246C15.3726 10.4581 15.5114 10.4946 15.6503 10.4946C15.7892 10.4946 15.928 10.458 16.0546 10.385C16.3078 10.2388 16.4589 9.97704 16.4589 9.68475V9.03478H17.4871V20.2828H6.51288V16.0986H10.8758V16.7486C10.8758 17.0409 11.0269 17.3027 11.2801 17.4488C11.4066 17.5219 11.5455 17.5584 11.6843 17.5584C11.8232 17.5584 11.9621 17.5219 12.0887 17.4488L13.8352 16.4403C14.0883 16.2941 14.2394 16.0324 14.2394 15.7401C14.2394 15.4478 14.0883 15.1861 13.8352 15.0399L12.0887 14.0314H12.0886C11.8354 13.8852 11.5332 13.8852 11.2801 14.0314C11.0269 14.1775 10.8758 14.4393 10.8758 14.7316V15.3815H6.51292V3.71712H17.4872V8.31773H17.4871ZM15.7417 7.66777V9.68486C15.7417 9.72845 15.7169 9.75197 15.696 9.76399C15.6752 9.77602 15.6424 9.78579 15.6046 9.76399L13.8581 8.75546C13.8203 8.73367 13.8124 8.70038 13.8124 8.67633C13.8124 8.65228 13.8204 8.61899 13.8581 8.59716L15.6046 7.58866C15.6424 7.56687 15.6752 7.57661 15.696 7.58866C15.7168 7.60069 15.7417 7.62417 15.7417 7.66777ZM11.5929 16.7486V14.7315C11.5929 14.6879 11.6178 14.6644 11.6386 14.6523C11.6504 14.6455 11.6661 14.6394 11.6844 14.6394C11.6983 14.6394 11.7137 14.6429 11.73 14.6524L13.4765 15.6609C13.5143 15.6827 13.5222 15.716 13.5222 15.74C13.5222 15.7641 13.5142 15.7974 13.4765 15.8192L11.73 16.8277C11.6922 16.8495 11.6594 16.8397 11.6386 16.8277C11.6178 16.8157 11.5929 16.7921 11.5929 16.7486ZM18.277 11.8317H18.2043V9.03489H18.277C19.0481 9.03489 19.6754 9.66221 19.6754 10.4333C19.6754 11.2044 19.0481 11.8317 18.277 11.8317Z"
+					fill="currentColor"
+				/>
+				<path
+					d="M15.8008 5.18726H15.5498C15.3518 5.18726 15.1912 5.34778 15.1912 5.54581C15.1912 5.74385 15.3518 5.90437 15.5498 5.90437H15.8008C15.9988 5.90437 16.1593 5.74385 16.1593 5.54581C16.1593 5.34778 15.9988 5.18726 15.8008 5.18726Z"
+					fill="currentColor"
+				/>
+				<path
+					d="M14.1514 5.18726H8.19919C8.00119 5.18726 7.84063 5.34778 7.84063 5.54581C7.84063 5.74385 8.00119 5.90437 8.19919 5.90437H14.1514C14.3494 5.90437 14.5099 5.74385 14.5099 5.54581C14.5099 5.34778 14.3494 5.18726 14.1514 5.18726Z"
+					fill="currentColor"
+				/>
+				<path
+					d="M13.0398 11.4263H8.19919C8.00119 11.4263 7.84063 11.5868 7.84063 11.7848C7.84063 11.9829 8.00119 12.1434 8.19919 12.1434H13.0398C13.2378 12.1434 13.3984 11.9829 13.3984 11.7848C13.3984 11.5868 13.2378 11.4263 13.0398 11.4263Z"
+					fill="currentColor"
+				/>
+				<path
+					d="M11.4263 7.33862H8.19919C8.00119 7.33862 7.84063 7.49915 7.84063 7.69718C7.84063 7.89522 8.00119 8.05574 8.19919 8.05574H11.4263C11.6243 8.05574 11.7848 7.89522 11.7848 7.69718C11.7848 7.49915 11.6243 7.33862 11.4263 7.33862Z"
+					fill="currentColor"
+				/>
+				<path
+					d="M11.4263 9.2749H8.19919C8.00119 9.2749 7.84063 9.43543 7.84063 9.63346C7.84063 9.8315 8.00119 9.99202 8.19919 9.99202H11.4263C11.6243 9.99202 11.7848 9.8315 11.7848 9.63346C11.7848 9.43543 11.6243 9.2749 11.4263 9.2749Z"
+					fill="currentColor"
+				/>
+			</g>
+		</g>
+		<defs>
+			<clipPath id="clip0_800_35">
+				<rect width="24" height="24" fill="white" />
+			</clipPath>
+			<clipPath id="clip1_800_35">
+				<rect width="18" height="18" fill="white" transform="translate(3 3)" />
+			</clipPath>
+		</defs>
+	</svg>
+</template>

src/components/Modal/Dialog.vue

@@ -63,7 +63,7 @@
 								/>
 								<DialogBody
 									v-else
-									v-bind="{...props, onClose}"
+									v-bind="{...props, onClose, shouldShowCloseButton}"
 									:has-icon="!!icon"
 								></DialogBody>
 							</slot>

src/components/Modal/DialogBody.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="modal-content" :class="hasIcon ? 'px-24' : 'pt- px-12'">
+	<div class="modal-content" :class="hasIcon ? 'px-24' : 'px-12'">
 		<slot>
 			<div
 				v-if="message"
@@ -10,6 +10,7 @@
 	</div>
 
 	<div
+		v-if="displayDefaultFooter"
 		class="flex items-center gap-x-4"
 		:class="hasIcon ? 'p-10 ps-24' : 'p-12'"
 	>
@@ -52,6 +53,11 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	// wether to display default footer with actions, set this to false if dialog will display PkpForm
+	displayDefaultFooter: {
+		type: Boolean,
+		default: true,
+	},
 });
 
 // for components that doesn't manually handle loading state

src/composables/useForm.js

@@ -1,16 +1,5 @@
 import {ref, watch} from 'vue';
 import {useApp} from './useApp';
-/**
- * Get a field from a form by name
- * @param {Object} form - The form object
- * @param {string} name - The field name to find
- * @returns {Object|undefined} The field object if found
- */
-function getField(form, name) {
-	const fields = form.fields;
-
-	return fields.find((field) => field.name === name);
-}
 
 /**
  * Check if a field exists in a form
@@ -129,13 +118,24 @@ export function useForm(_form = {}, {customSubmit} = {}) {
 		});
 	}
 
+	/**
+	 * Get a field from a form by name
+	 * @param {string} name - The field name to find
+	 * @returns {Object|undefined} The field object if found
+	 */
+	function getField(name) {
+		const fields = form.value.fields;
+
+		return fields.find((field) => field.name === name);
+	}
+
 	/**
 	 * Get a field's value
 	 * @param {string} name - The field name
 	 * @returns {*} The field's value
 	 */
 	function getValue(name) {
-		const field = getField(form.value, name);
+		const field = getField(name);
 
 		return field.value;
 	}
@@ -156,7 +156,7 @@ export function useForm(_form = {}, {customSubmit} = {}) {
 	 * @param {*} inputValue - The value to set
 	 */
 	function setValue(name, inputValue) {
-		const field = getField(form.value, name);
+		const field = getField(name);
 		if (!field) {
 			return;
 		}
@@ -186,7 +186,7 @@ export function useForm(_form = {}, {customSubmit} = {}) {
 	 * @param {string} fieldName - The name of the field to clear
 	 */
 	function clearFormField(fieldName) {
-		const field = getField(form.value, fieldName);
+		const field = getField(fieldName);
 
 		if (field.isMultilingual) {
 			const newValueMultilingual = {};
@@ -209,7 +209,7 @@ export function useForm(_form = {}, {customSubmit} = {}) {
 	 */
 	function removeFieldValue(fieldName, fieldValue) {
 		const value = getValue(fieldName);
-		const field = getField(form.value, fieldName);
+		const field = getField(fieldName);
 		if (Array.isArray(value)) {
 			let newValue = null;
 			if (field.selected) {
@@ -317,7 +317,10 @@ export function useForm(_form = {}, {customSubmit} = {}) {
 		form.value.visibleLocales = visibleLocales;
 	}
 
-	function initEmptyForm(formId, {action, method, locales}) {
+	function initEmptyForm(
+		formId,
+		{action, method, locales, showErrorFooter, spacingVariant} = {},
+	) {
 		if (!form.value) {
 			form.value = {};
 		}
@@ -327,6 +330,8 @@ export function useForm(_form = {}, {customSubmit} = {}) {
 
 		form.value.id = formId;
 		form.value.locales = locales;
+		form.value.showErrorFooter = showErrorFooter;
+		form.value.spacingVariant = spacingVariant || 'default';
 		setMethod(method || 'POST');
 		setAction(action || 'emit');
 		setLocales(locales);
@@ -393,7 +398,26 @@ export function useForm(_form = {}, {customSubmit} = {}) {
 		});
 	}
 
-	function addFieldSelect(fieldName, {options, size, ...commonFields} = {}) {
+	/**
+	 * Add/update a select field to the form
+	 * @param {string} fieldName - The name of the field
+	 * @param {Object} options - Options for the select field
+	 * @param {Object} commonFields - Common properties for the field
+	 * @param {Object} [override={}] - Override existing field if it exists, set this to true if updating the select options or value
+	 */
+	function addFieldSelect(
+		fieldName,
+		{options, size, ...commonFields} = {},
+		{override = false} = {},
+	) {
+		const field = getField(fieldName);
+		if (field && override) {
+			return Object.assign(field, {
+				options: options || field.options,
+				value: commonFields.value || field.value,
+			});
+		}
+
 		return addField(fieldName, {
 			component: 'field-select',
 			options,
@@ -424,5 +448,6 @@ export function useForm(_form = {}, {customSubmit} = {}) {
 		addGroup,
 		addFieldText,
 		addFieldSelect,
+		getField,
 	};
 }

src/composables/useModal.js

@@ -17,6 +17,13 @@ export function useModal() {
 		modalStore.openDialog(props);
 	}
 
+	/**
+	 * Close the currently opened dialog modal
+	 */
+	function closeDialog() {
+		modalStore.closeDialog();
+	}
+
 	/**
 	 * Open a side modal component
 	 * @param {Object|string} component - The component to render in the side modal
@@ -54,6 +61,7 @@ export function useModal() {
 
 	return {
 		openDialog,
+		closeDialog,
 		openSideModal,
 		openDialogNetworkError,
 		closeSideModal,

src/composables/useSideMenu.js

@@ -246,5 +246,6 @@ export function useSideMenu(_items, opts = {}) {
 		setExpandedKeys,
 		setActiveItemKey,
 		selectedItem,
+		expandedKeys,
 	};
 }