Merge pull request #3140 from nextcloud/improve-textfields

Improve text fields

Author: raimund-schluessler

src/components/NcInputField/NcInputField.vue

@@ -24,14 +24,13 @@
 		<label v-if="!labelOutside && label !== undefined"
 			class="input-field__label"
 			:class="{ 'input-field__label--hidden': !labelVisible }"
-			:for="inputName">
+			:for="computedId">
 			{{ label }}
 		</label>
 		<div class="input-field__main-wrapper">
 			<input v-bind="$attrs"
 				:id="computedId"
 				ref="input"
-				:name="inputName"
 				class="input-field__input"
 				:type="type"
 				:disabled="disabled"

src/components/NcPasswordField/NcPasswordField.vue

@@ -101,9 +101,9 @@ export default {
 		:success="computedSuccess"
 		:minlength="rules.minlength"
 		:trailing-button-label="trailingButtonLabel"
+		:disabled="disabled"
 		v-on="$listeners"
 		@trailing-button-click="togglePasswordVisibility"
-		:disabled="disabled"
 		@input="handleInput">
 		<!-- Default slot for the leading icon -->
 		<slot />
@@ -279,6 +279,24 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+
+		/**
+		 * Mark the password field as required
+		 */
+		required: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * Name of the text field
+		 *
+		 * This is the key that will be send when sending a form
+		 */
+		name: {
+			type: String,
+			default: undefined,
+		},
 	},
 
 	emits: [

src/components/NcTextField/NcTextField.vue

@@ -273,6 +273,107 @@ export default {
 			type: String,
 			default: '',
 		},
+
+		/**
+		 * Disable the text field
+		 */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * Name of the text field
+		 *
+		 * This is the key that will be send when sending a form
+		 */
+		name: {
+			type: String,
+			default: undefined,
+		},
+
+		/**
+		 * Helps the browser identify the type of text field and to provide
+		 * better autocompletion.
+		 */
+		autocomplete: {
+			type: String,
+			validator: (value) => [
+				'on',
+				'off',
+				'name',
+				'honorific-prefix',
+				'given-name',
+				'additional-name',
+				'family-name',
+				'honorific-suffix',
+				'nickname',
+				'email',
+				'username',
+				'organization-title',
+				'organization',
+				'street-address',
+				'address-line1',
+				'address-line2',
+				'address-line3',
+				'address-level4',
+				'address-level3',
+				'address-level2',
+				'address-level1',
+				'country',
+				'country-name',
+				'postal-code',
+				'cc-name',
+				'cc-given-name',
+				'cc-additional-name',
+				'cc-family-name',
+				'cc-number',
+				'cc-exp',
+				'language',
+				'bday',
+				'bday-day',
+				'bday-month',
+				'bday-year',
+				'sex',
+				'tel',
+				'impp',
+				'url',
+				'photo',
+			].includes(value),
+			default: 'on',
+		},
+
+		/**
+		 * Define hows the mobile browser should capitalize the text input
+		 */
+		autocapitalize: {
+			type: String,
+			default: 'sentences',
+			validator: (value) => [
+				'none',
+				'off',
+				'on',
+				'sentences',
+				'words',
+				'characters',
+			].includes(value),
+		},
+
+		/**
+		 * Allow to disable spellchecking
+		 */
+		spellcheck: {
+			type: Boolean,
+			default: true,
+		},
+
+		/**
+		 * Mark the text field as required
+		 */
+		required: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	emits: [