add a disabled prop to text field

ipula · Feb 6, 2025 · 256ffc6 · 256ffc6
1 parent 5ef5ae4
commit 256ffc6
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/src/components/Form/fields/FieldText.stories.js b/src/components/Form/fields/FieldText.stories.js
@@ -50,6 +50,15 @@ export const Large = {
 	},
 };
 
+export const Disabled = {
+	args: {
+		...FieldBaseMock,
+		...FieldTextGivenNameMock,
+		isRequired: false,
+		disabled: true,
+	},
+};
+
 export const WithPrefix = {
 	args: {
 		...FieldBaseMock,

diff --git a/src/components/Form/fields/FieldText.vue b/src/components/Form/fields/FieldText.vue
@@ -121,6 +121,11 @@ export default {
 		},
 		/** An optional prefix to show before the user's input. For example, a prefix of `http://publisher.com/` is used for the journal `path` field.  */
 		prefix: String,
+		/** A boolean value make text field disable */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {
@@ -211,7 +216,7 @@ export default {
 		});
 
 		// Set the field to disabled if optIntoEdit is passed
-		if (this.optIntoEdit) {
+		if (this.optIntoEdit || this.disabled) {
 			this.isDisabled = true;
 		}
 	},