pkp/pkp-lib#3594 Add checkbox/radio input field component

src/components/Form/FormGroup.vue

@@ -38,13 +38,15 @@
 import FieldText from '@/components/Form/fields/FieldText.vue';
 import FieldTextarea from '@/components/Form/fields/FieldTextarea.vue';
 import FieldSelect from '@/components/Form/fields/FieldSelect.vue';
+import FieldOptions from '@/components/Form/fields/FieldOptions.vue';
 
 export default {
 	name: 'FormGroup',
 	components: {
 		FieldText,
 		FieldTextarea,
 		FieldSelect,
+		FieldOptions,
 	},
 	props: {
 		id: String,

src/components/Form/fields/FieldBase.vue

@@ -24,12 +24,24 @@ export default {
 		validateAs: String,
 		localeKey: String,
 		value: {
-			type: [String, Number, Object, Boolean],
+			type: [String, Number, Object, Array, Boolean],
 			default: '',
 		},
 		i18n: Object,
 	},
 	computed: {
+		currentValue: {
+			get: function () {
+				return this.isMultilingual ? this.value[this.localeKey] : this.value;
+			},
+			set: function (newVal) {
+				this.$emit('change', {
+					name: this.name,
+					value: newVal,
+					localeKey: this.localeKey,
+				});
+			},
+		},
 		/**
 		 * A localized field name
 		 *
@@ -42,29 +54,6 @@ export default {
 			return this.isMultilingual ? (this.name + '-' + this.localeKey) : this.name;
 		},
 
-		/**
-		 * A localized representation of the value
-		 *
-		 * In order to handle two-way data-binding, we must emit an event for the
-		 * Form to set the value.
-		 */
-		localizedValue: {
-			get: function () {
-				if (this.isMultilingual) {
-					return this.localize(this.value);
-				} else {
-					return this.value;
-				}
-			},
-			set: function (newVal) {
-				this.$emit('change', {
-					name: this.name,
-					value: newVal,
-					localeKey: this.localeKey,
-				});
-			},
-		},
-
 		/**
 		 * A unique id for the label and control
 		 *

src/components/Form/fields/FieldOptions.vue

@@ -0,0 +1,108 @@
+<template>
+	<fieldset class="pkpFormField pkpFormField--options" :class="classes">
+		<legend>
+			{{ maybeLocalize(label, localeKey) }}
+			<span v-if="isRequired" class="pkpFormFieldLabel__required">
+				*
+				<span class="-screenReader">{{ i18n.required }}</span>
+			</span>
+			<tooltip v-if="tooltip"  :id="describedByTooltipId" :tooltip="tooltip" :label="this.__('tooltip', {label: maybeLocalize(this.label, localeKey)})" />
+			<help-button v-if="helpTopic" :id="describedByHelpId" :topic="helpTopic" :label="i18n.help" />
+		</legend>
+		<div v-if="description"
+			class="pkpFormField__description"
+			v-html="maybeLocalize(description, localeKey)"
+			:id="describedByDescriptionId"
+		/>
+		<div class="pkpFormField__control">
+			<label v-for="option in localizedOptions">
+				<input
+					class="pkpFormField--options__input"
+					v-model="selectedValue"
+					:value="option.value"
+					:type="type"
+					:aria-describedby="describedByIds"
+					:disabled="option.disabled"
+				/>
+				{{ option.label }}
+			</label>
+		</div>
+	</fieldset>
+</template>
+
+<script>
+import FieldBase from './FieldBase';
+
+export default {
+	name: 'FieldOptions',
+	extends: FieldBase,
+	props: {
+		type: {
+			validator: function (value) {
+				return ['checkbox', 'radio'].includes(value);
+			},
+			default: 'checkbox',
+		},
+		options: {
+			type: Array,
+			required: true,
+		},
+		value: {
+			type: [Array, String],
+			required: true,
+		},
+	},
+	data: function () {
+		return {
+			/**
+			 * This replaces the computed `currentValue` property in FieldBase. We
+			 * use a custom watcher for checkboxes so that all change events are
+			 * recorded. The computed property's setter function is not called when
+			 * an option is deselected. See: https://github.com/vuejs/vuex/issues/249
+			 */
+			selectedValue: this.isMultilingual ? this.value[this.localeKey] : this.value,
+		};
+	},
+	computed: {
+		/**
+		 * Get classes for the wrapper element
+		 *
+		 * @return array
+		 */
+		classes: function () {
+			return ['pkpFormField--' + this.type];
+		},
+
+		/**
+		 * Get localized set of options
+		 *
+		 * @return array
+		 */
+		localizedOptions: function () {
+			return this.isMultingual ? this.options[this.localeKey] : this.options;
+		},
+	},
+	mounted: function () {
+
+		/**
+		 * Whenever the current value changes, emit an event to update the value of
+		 * this field in the form component.
+		 */
+		this.$watch('selectedValue', function (newVal, oldVal) {
+			if (newVal === oldVal) {
+				return;
+			}
+			this.$emit('change', {
+				name: this.name,
+				value: newVal,
+				localeKey: this.localeKey,
+			});
+		});
+	},
+};
+</script>
+
+<style lang="less">
+@import '../../../styles/_import';
+
+</style>

src/components/Form/fields/FieldSelect.vue

@@ -12,8 +12,8 @@
 		</div>
 		<div class="pkpFormField__control">
 			<select
-				class="pkpFormField__input pkpFormField__input--select"
-				v-model="localizedValue"
+				class="pkpFormField__input pkpFormField--select__input"
+				v-model="currentValue"
 				:id="controlId"
 				:name="localizedName"
 				:aria-describedby="describedByIds"
@@ -55,11 +55,11 @@ export default {
 <style lang="less">
 @import '../../../styles/_import';
 
-.pkpFormField__input--select {
+.pkpFormField--select__input {
 	width: 20em;
 }
 
-.pkpFormField__input--select:-moz-focusring {
+.pkpFormField--select__input:-moz-focusring {
   color: transparent;
   text-shadow: 0 0 0 @text;
 }

src/components/Form/fields/FieldText.vue

@@ -12,8 +12,8 @@
 		</div>
 		<div class="pkpFormField__control">
 			<input
-				class="pkpFormField__input pkpFormField__input--text"
-				v-model="localizedValue"
+				class="pkpFormField__input pkpFormField--text__input"
+				v-model="currentValue"
 				:type="inputType"
 				:id="controlId"
 				:name="localizedName"
@@ -44,7 +44,7 @@ export default {
 <style lang="less">
 @import '../../../styles/_import';
 
-.pkpFormField__input--text {
+.pkpFormField--text__input {
 	width: 20em;
 }
 </style>

src/components/Form/fields/FieldTextarea.vue

@@ -12,8 +12,8 @@
 		</div>
 		<div class="pkpFormField__control">
 			<textarea
-				class="pkpFormField__input pkpFormField__input--textarea"
-				v-model="localizedValue"
+				class="pkpFormField__input pkpFormField--textarea__input"
+				v-model="currentValue"
 				:id="controlId"
 				:name="localizedName"
 				:aria-describedby="describedByIds"
@@ -57,15 +57,15 @@ export default {
 <style lang="less">
 @import '../../../styles/_import';
 
-.pkpFormField__input--textarea {
+.pkpFormField--textarea__input {
 	padding-top: 0.5em;
 	padding-bottom: 0.5em;
 	height: 20em;
 	width: 100%;
 	line-height: 1.8em;
 }
 
-.pkpFormField--small .pkpFormField__input--textarea {
+.pkpFormField--small .pkpFormField--textarea__input {
 	max-width: 20em;
 	height: 8em;
 }

src/docs/examples/Form/implementations/helpers/field-options-user-locales.js

@@ -0,0 +1,22 @@
+export default {
+	name: 'user-locales',
+	component: 'field-options',
+	label: 'Working Languages',
+	description: 'Disable language options that you can not use.',
+	value: [],
+	options: [
+		{
+			value: 'en_US',
+			label: 'English',
+		},
+		{
+			value: 'fr_CA',
+			label: 'French (Canadian)',
+		},
+		{
+			value: 'ar_AR',
+			label: 'عربى',
+		},
+	],
+	groupId: 'preferences',
+};

src/docs/examples/Form/implementations/helpers/field-rich-text-signature.js

@@ -11,4 +11,8 @@ export default {
 	}
 	groupId: 'contact',
 	isMultilingual: true,
+	value: {
+		en_US: '',
+		fr_CA: '',
+	},
 };

src/docs/examples/Form/implementations/helpers/field-select-country.js

@@ -173,6 +173,7 @@ export default {
 			label: '...',
 		},
 	],
+	value: '',
 	groupId: 'contact',
 	isRequired: true,
 };

src/docs/examples/Form/implementations/helpers/field-text-affiliation.js

@@ -8,4 +8,8 @@ export default {
 	},
 	groupId: 'identity',
 	isMultilingual: true,
+	value: {
+		en_US: '',
+		fr_CA: '',
+	},
 };

src/docs/examples/Form/implementations/helpers/field-text-email.js

@@ -5,4 +5,5 @@ export default {
 	label: 'Email',
 	groupId: 'identity',
 	isRequired: true,
+	value: '',
 };

src/docs/examples/Form/implementations/helpers/field-text-family-name.js

@@ -5,4 +5,5 @@ export default {
 	label: 'Family Name',
 	groupId: 'identity',
 	isRequired: true,
+	value: '',
 };

src/docs/examples/Form/implementations/helpers/field-text-given-name.js

@@ -5,4 +5,5 @@ export default {
 	label: 'Given Name',
 	groupId: 'identity',
 	isRequired: true,
+	value: '',
 };

src/docs/examples/Form/implementations/helpers/field-text-phone.js

@@ -4,4 +4,5 @@ export default {
 	inputType: 'tel',
 	label: 'Phone',
 	groupId: 'contact',
+	value: '',
 };

src/docs/examples/Form/implementations/helpers/field-textarea-mailing-address.js

@@ -4,4 +4,5 @@ export default {
 	label: 'Mailing Address',
 	groupId: 'contact',
 	size: 'small',
+	value: '',
 };

src/docs/examples/Form/implementations/helpers/form-user.js

@@ -1,6 +1,8 @@
 import FormDefault from './form-default';
 import GroupIdentity from './group-identity';
 import GroupContact from './group-contact';
+import GroupPreferences from './group-preferences';
+import FieldOptionsUserLocales from './field-options-user-locales';
 import FieldTextAffiliation from './field-text-affiliation';
 import FieldTextareaMailingAddress from './field-textarea-mailing-address';
 import FieldTextEmail from './field-text-email';
@@ -21,9 +23,11 @@ export default {
 		FieldTextPhone,
 		FieldSelectCountry,
 		FieldTextareaMailingAddress,
+		FieldOptionsUserLocales,
 	],
 	groups: [
 		{...GroupIdentity, pageId: 'defaultPage'},
 		{...GroupContact, pageId: 'defaultPage'},
+		{...GroupPreferences, pageId: 'defaultPage'},
 	],
 };