pkp/pkp-lib#8850 Add disabled property for form text in ui-library

Author: ipula

src/components/Form/fields/FieldBase.vue

@@ -26,6 +26,7 @@ export default {
 		formId: String,
 		isMultilingual: Boolean,
 		isRequired: Boolean,
+		disabled: Boolean,
 		showWhen: [String, Array],
 		primaryLocale: String,
 		localeKey: String,

src/components/Form/fields/FieldText.vue

@@ -46,14 +46,13 @@
 					:name="localizedName"
 					:aria-describedby="describedByIds"
 					:aria-invalid="errors && errors.length"
-					:disabled="isDisabled"
+					:disabled="disabled"
 					:required="isRequired"
 					:style="inputStyles"
 				/>
 				<span
 					v-if="prefix"
 					class="pkpFormField__inputPrefix"
-					v-html="prefix"
 					ref="prefix"
 					:style="prefixStyles"
 					@click="setFocus"
@@ -65,9 +64,9 @@
 					:total="locales.length"
 				/>
 				<pkp-button
-					v-if="optIntoEdit && isDisabled"
+					v-if="optIntoEdit && disabled"
 					class="pkpFormField--text__optIntoEdit"
-					@click="isDisabled = false"
+					@click="enable()"
 				>
 					{{ optIntoEditLabel }}
 				</pkp-button>
@@ -80,7 +79,6 @@
 		</div>
 	</div>
 </template>
-
 <script>
 import FieldBase from './FieldBase.vue';
 
@@ -102,7 +100,6 @@ export default {
 	data() {
 		return {
 			inputStyles: {},
-			isDisabled: false,
 			prefixStyles: {},
 		};
 	},
@@ -143,6 +140,12 @@ export default {
 		setFocus() {
 			this.$refs.input.focus();
 		},
+		/**
+		 * Set disable prop false
+		 */
+		enable() {
+			this.$emit('change', this.disabled, 'disabled', false);
+		},
 	},
 	mounted() {
 		/**
@@ -194,11 +197,6 @@ export default {
 				}
 			}, 700);
 		});
-
-		// Set the field to disabled if optIntoEdit is passed
-		if (this.optIntoEdit) {
-			this.isDisabled = true;
-		}
 	},
 };
 </script>

src/docs/components/Form/fields/FieldText/ComponentFieldText.vue

@@ -10,6 +10,8 @@ import PreviewFieldTextPrefix from './previews/PreviewFieldTextPrefix.vue';
 import PreviewFieldTextPrefixTemplate from '!raw-loader!./previews/PreviewFieldTextPrefix.vue';
 import PreviewFieldTextOptIntoEdit from './previews/PreviewFieldTextOptIntoEdit.vue';
 import PreviewFieldTextOptIntoEditTemplate from '!raw-loader!./previews/PreviewFieldTextOptIntoEdit.vue';
+import PreviewFieldTextDisable from './previews/PreviewFieldTextDisable.vue';
+import PreviewFieldTextDisableTemplate from '!raw-loader!./previews/PreviewFieldTextDisable.vue';
 import readme from '!raw-loader!./readme.md';
 
 export default {
@@ -45,6 +47,11 @@ export default {
 					name: 'Editing Opt-in',
 					template: this.extractTemplate(PreviewFieldTextOptIntoEditTemplate),
 				},
+				{
+					component: PreviewFieldTextDisable,
+					name: 'Disable',
+					template: this.extractTemplate(PreviewFieldTextDisableTemplate),
+				},
 			],
 		};
 	},

src/docs/components/Form/fields/FieldText/previews/PreviewFieldTextDisable.vue

@@ -0,0 +1,27 @@
+<template>
+	<field-text v-bind="field" @change="change" label="Disable" />
+</template>
+
+<script>
+import FieldText from '@/components/Form/fields/FieldText.vue';
+import PreviewFieldBase from '../../FieldBase/previews/PreviewFieldBase.vue';
+import fieldBase from '../../../helpers/field-base';
+import field from '../../../helpers/field-text-given-name';
+
+export default {
+	extends: PreviewFieldBase,
+	components: {
+		FieldText,
+	},
+	data() {
+		return {
+			field: {
+				...fieldBase,
+				...field,
+				isRequired: false,
+				disabled: true,
+			},
+		};
+	},
+};
+</script>

src/docs/components/Form/fields/FieldText/previews/PreviewFieldTextOptIntoEdit.vue

@@ -25,8 +25,18 @@ export default {
 				...fieldBase,
 				...field,
 				isRequired: false,
+				disabled: true,
 			},
 		};
 	},
+	methods: {
+		change(name, prop, newValue, localeKey) {
+			if (localeKey) {
+				this.field[prop][localeKey] = newValue;
+			} else {
+				this.field[prop] = newValue;
+			}
+		},
+	},
 };
 </script>

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

@@ -4,5 +4,6 @@ export default {
 	inputType: 'text',
 	label: 'Given Name',
 	isRequired: true,
+	disabled: false,
 	value: '',
 };