pkp/pkp-lib#9497 Migrate FieldTextUrn to vue3

bozana · Jan 18, 2025 · 522dd42 · 522dd42
1 parent 79299e3
commit 522dd42
Showing 1 changed file with 56 additions and 55 deletions.
diff --git a/plugins/pubIds/urn/js/FieldTextUrn.js b/plugins/pubIds/urn/js/FieldTextUrn.js
@@ -10,76 +10,77 @@
  *
  * @brief A Vue.js component for URN text form field, that is used for custom suffixes, and that considers adding a check number.
  */
-var template = pkp.Vue.compile('<div class="pkpFormField pkpFormField--text pkpFormField--urn" :class="classes">' +
-'			<form-field-label' +
-'				:controlId="controlId"' +
-'				:label="label"' +
-'				:localeLabel="localeLabel"' +
-'				:isRequired="isRequired"' +
-'				:requiredLabel="__(\'common.required\')"' +
-'				:multilingualLabel="multilingualLabel"' +
-'			/>' +
-'			<div' +
-'				v-if="isPrimaryLocale && description"' +
-'				class="pkpFormField__description"' +
-'				v-html="description"' +
-'				:id="describedByDescriptionId"' +
-'			/>' +
-'			<div class="pkpFormField__control" :class="controlClasses">' +
-'				<input' +
-'					class="pkpFormField__input pkpFormField--text__input pkpFormField--urn__input"' +
-'					ref="input"' +
-'					v-model="currentValue"' +
-'					:type="inputType"' +
-'					:id="controlId"' +
-'					:name="localizedName"' +
-'					:aria-describedby="describedByIds"' +
-'					:aria-invalid="!!errors.length"' +
-'					:required="isRequired"' +
-'					:style="inputStyles"' +
-'				/>' +
-'				<button' +
-'					v-if="applyCheckNumber"' +
-'					class="pkpButton pkpFormField--urn__button"' +
-'					@click.prevent="addCheckNumber"' +
-'				>' +
-'					{{ addCheckNumberLabel }}' +
-'				</button>' +
-'				<field-error' +
-'					v-if="errors.length"' +
-'					:id="describedByErrorId"' +
-'					:messages="errors"' +
-'				/>' +
-'				</div>' +
-'			</div>' +
-'		</div>');
 
-pkp.Vue.component('field-text-urn', {
+pkp.registry.registerComponent('FieldTextUrn', {
 	name: 'FieldTextUrn',
-	extends: pkp.Vue.component('field-text'),
+	extends: pkp.registry.getComponent('PkpFieldText'),
+	template:
+		'<div class="pkpFormField pkpFormField--text pkpFormField--urn" :class="classes">' +
+		'			<form-field-label' +
+		'				:controlId="controlId"' +
+		'				:label="label"' +
+		'				:localeLabel="localeLabel"' +
+		'				:isRequired="isRequired"' +
+		'				:requiredLabel="t(\'common.required\')"' +
+		'				:multilingualLabel="multilingualLabel"' +
+		'			/>' +
+		'			<div' +
+		'				v-if="isPrimaryLocale && description"' +
+		'				class="pkpFormField__description"' +
+		'				v-html="description"' +
+		'				:id="describedByDescriptionId"' +
+		'			/>' +
+		'			<div class="pkpFormField__control" :class="controlClasses">' +
+		'				<input' +
+		'					class="pkpFormField__input pkpFormField--text__input pkpFormField--urn__input"' +
+		'					ref="input"' +
+		'					v-model="currentValue"' +
+		'					:type="inputType"' +
+		'					:id="controlId"' +
+		'					:name="localizedName"' +
+		'					:aria-describedby="describedByIds"' +
+		'					:aria-invalid="!!errors.length"' +
+		'					:required="isRequired"' +
+		'					:style="inputStyles"' +
+		'				/>' +
+		'				<button' +
+		'					v-if="applyCheckNumber"' +
+		'					class="pkpButton pkpFormField--urn__button"' +
+		'					@click.prevent="addCheckNumber"' +
+		'				>' +
+		'					{{ addCheckNumberLabel }}' +
+		'				</button>' +
+		'				<field-error' +
+		'					v-if="errors.length"' +
+		'					:id="describedByErrorId"' +
+		'					:messages="errors"' +
+		'				/>' +
+		'				</div>' +
+		'			</div>' +
+		'		</div>',
 	props: {
 		addCheckNumberLabel: {
 			type: String,
-			required: true
+			required: true,
 		},
 		urnPrefix: {
 			type: String,
-			required: true
+			required: true,
 		},
 		applyCheckNumber: {
 			type: Boolean,
-			required: true
-		}
+			required: true,
+		},
 	},
 	methods: {
 		/**
 		 * Add a check number to the end of the URN
 		 */
 		addCheckNumber() {
-			this.currentValue += $.pkp.plugins.generic.urn.getCheckNumber(this.currentValue, this.urnPrefix);
-		}
+			this.currentValue += $.pkp.plugins.generic.urn.getCheckNumber(
+				this.currentValue || '',
+				this.urnPrefix,
+			);
+		},
 	},
-	render: function(h) {
-		return template.render.call(this, h);
-	}
-});
+});