From e0ca5ccc8260e8851c5fa69fbb84ccca6d16e72c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6?= <skjnldsv@protonmail.com>
Date: Wed, 16 Nov 2022 09:26:53 +0100
Subject: [PATCH] Extend NcInputField props and forward $attrs to
 NcPasswordField and NcTextField
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
---
 src/components/NcInputField/NcInputField.vue  |  27 +-
 .../NcPasswordField/NcPasswordField.vue       | 151 +----------
 src/components/NcTextField/NcTextField.vue    | 249 +-----------------
 src/components/index.js                       |   2 +
 styleguide.config.js                          |   8 +-
 5 files changed, 56 insertions(+), 381 deletions(-)

diff --git a/src/components/NcInputField/NcInputField.vue b/src/components/NcInputField/NcInputField.vue
index c2df2a252d..b83cb0dd09 100644
--- a/src/components/NcInputField/NcInputField.vue
+++ b/src/components/NcInputField/NcInputField.vue
@@ -19,6 +19,19 @@
   - along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 
+<docs>
+### Description
+
+This component is used by the other Fields components.
+It extends and styles an HTMLInputElement.
+
+You cannot use it as is. This is here for documentation purposes.
+See the other field components.
+
+For a list of all available props and attributes, please check the [HTMLInputElement documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)
+
+</docs>
+
 <template>
 	<div class="input-field">
 		<label v-if="!labelOutside && label !== undefined"
@@ -116,11 +129,19 @@ export default {
 		},
 
 		/**
-		 * The input element type
+		 * The type of the input element
 		 */
 		type: {
 			type: String,
-			required: true,
+			default: 'text',
+			validator: (value) => [
+				'text',
+				'password',
+				'email',
+				'tel',
+				'url',
+				'search',
+			].includes(value),
 		},
 
 		/**
@@ -144,7 +165,7 @@ export default {
 		},
 
 		/**
-		 * We normally have the lable hidden visually and use it for
+		 * We normally have the label hidden visually and use it for
 		 * accessibility only. If you want to have the label visible just above
 		 * the input field pass in true to this prop.
 		 */
diff --git a/src/components/NcPasswordField/NcPasswordField.vue b/src/components/NcPasswordField/NcPasswordField.vue
index c37f4a3f05..59611dc203 100644
--- a/src/components/NcPasswordField/NcPasswordField.vue
+++ b/src/components/NcPasswordField/NcPasswordField.vue
@@ -22,6 +22,7 @@
 
 <docs>
 ### Description
+See [NcInputField](#/Components/NcFields?id=ncinputfield) for a list of all available props.
 
 General purpose password field component.
 
@@ -93,7 +94,7 @@ export default {
 </docs>
 
 <template>
-	<NcInputField v-bind="$props"
+	<NcInputField v-bind="{...$attrs, ...$props }"
 		ref="inputField"
 		:type="isPasswordHidden ? 'password' : 'text'"
 		:show-trailing-button="true"
@@ -101,8 +102,6 @@ export default {
 		:error="computedError"
 		:success="computedSuccess"
 		:minlength="rules.minlength"
-		:trailing-button-label="trailingButtonLabel"
-		:disabled="disabled"
 		v-on="$listeners"
 		@trailing-button-click="togglePasswordVisibility"
 		@input="handleInput">
@@ -138,73 +137,11 @@ export default {
 		EyeOff,
 	},
 
-	props: {
-		/**
-		 * The value of the input field
-		 */
-		value: {
-			type: String,
-			required: true,
-		},
-
-		/**
-		 * The hidden input label for accessibility purposes. This will also
-		 * be used as a placeholder unless the placeholder prop is populated
-		 * with a different string. This is required if an external label is
-		 * not provided.
-		 */
-		label: {
-			type: String,
-			default: undefined,
-		},
+	// Allow forwarding all attributes
+	inheritAttrs: false,
 
-		/**
-		 * Pass in true if you want to use an external label. This is useful
-		 * if you need a label that looks different from the one provided by
-		 * this component
-		 */
-		labelOutside: {
-			type: Boolean,
-			default: false,
-		},
-
-		/**
-		 * We normally have the lable hidden visually and use it for
-		 * accessibility only. If you want to have the label visible just above
-		 * the input field pass in true to this prop.
-		 */
-		labelVisible: {
-			type: Boolean,
-			default: false,
-		},
-
-		/**
-		 * The placeholder of the input. This defaults as the string that's
-		 * passed into the label prop. In order to remove the placeholder,
-		 * pass in an empty string.
-		 */
-		placeholder: {
-			type: String,
-			default: undefined,
-		},
-
-		/**
-		 * Toggles the success state of the component. Adds a checkmark icon.
-		 * this cannot be used together with canClear.
-		 */
-		success: {
-			type: Boolean,
-			default: false,
-		},
-
-		/**
-		 * Toggles the error state of the component. Adds an error icon.
-		 * this cannot be used together with canClear.
-		 */
-		error: {
-			type: Boolean,
-			default: false,
-		},
+	props: {
+		...NcInputField.props,
 
 		/**
 		 * Additional error message
@@ -217,10 +154,13 @@ export default {
 		},
 
 		/**
-		 * The autofocus property defines whether the input should
-		 * automatically receive focus on page load
+		 * Check if the user entered a valid password using the password_policy
+		 * app if available.
+		 *
+		 * Warning: this doesn't replace server side checking and will do nothing
+		 * if the password_policy app is disabled.
 		 */
-		autofocus: {
+		checkPasswordStrength: {
 			type: Boolean,
 			default: false,
 		},
@@ -242,71 +182,6 @@ export default {
 			type: Number,
 			default: null,
 		},
-
-		/**
-		 * Helps the browser identify the type of password field and to provide
-		 * autocompletion for the password. Allowed values are off, on, new-password
-		 * old-password
-		 *
-		 * By default try to autocomplete with the current password
-		 */
-		autocomplete: {
-			type: String,
-			validator: (value) => [
-				'new-password',
-				'current-password',
-				'one-time-code',
-				'on',
-				'off',
-			].includes(value),
-			default: 'current-password',
-		},
-
-		/**
-		 * Check if the user entered a valid password using the password_policy
-		 * app if available.
-		 *
-		 * Warning: this doesn't replace server side checking and will do nothing
-		 * if the password_policy app is disabled.
-		 */
-		checkPasswordStrength: {
-			type: Boolean,
-			default: false,
-		},
-
-		/**
-		 * Id of the input field. To use when using an external label
-		 */
-		id: {
-			type: String,
-			default: '',
-		},
-
-		/**
-		 * Disable the password field
-		 */
-		disabled: {
-			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: [
@@ -337,12 +212,14 @@ export default {
 			}
 			return this.internalHelpMessage
 		},
+
 		rules() {
 			const { minlength, passwordPolicy } = this
 			return {
 				minlength: minlength ?? passwordPolicy?.minLength,
 			}
 		},
+
 		trailingButtonLabel() {
 			return this.isPasswordHidden ? t('Show password') : t('Hide password')
 		},
diff --git a/src/components/NcTextField/NcTextField.vue b/src/components/NcTextField/NcTextField.vue
index cceba860ab..64008e027b 100644
--- a/src/components/NcTextField/NcTextField.vue
+++ b/src/components/NcTextField/NcTextField.vue
@@ -21,6 +21,7 @@
 
 <docs>
 ### Description
+See [NcInputField](#/Components/NcFields?id=ncinputfield) for a list of all available props.
 
 General purpose text field component.
 Note: the inner html `input` element inherits all the attributes from the
@@ -31,7 +32,7 @@ and `minlength`.
 <template>
 	<div class="wrapper">
 		<NcTextField :value.sync="text1"
-			label="Leading icon and trailing button"
+			label="Leading icon and clear trailing button"
 			trailing-button-icon="close"
 			:show-trailing-button="text1 !== ''"
 			@trailing-button-click="clearText">
@@ -119,13 +120,14 @@ export default {
 </docs>
 
 <template>
-	<NcInputField v-bind="$props"
+	<NcInputField v-bind="{...$attrs, ...$props }"
 		ref="inputField"
 		:trailing-button-label="clearTextLabel"
 		v-on="$listeners"
 		@input="handleInput">
 		<!-- Default slot for the leading icon -->
 		<slot />
+
 		<!-- Trailing icon slot, except for search type input as the browser already adds a trailing close icon -->
 		<template v-if="type !== 'search'" #trailing-button-icon>
 			<Close v-if="trailingButtonIcon === 'close'" :size="20" />
@@ -155,80 +157,11 @@ export default {
 		Undo,
 	},
 
-	props: {
-		/**
-		 * The value of the input field
-		 */
-		value: {
-			type: String,
-			required: true,
-		},
-
-		/**
-		 * The type of the input element, it can be `text`, `password`,
-		 * `email`, `tel` and `url`.
-		 */
-		type: {
-			type: String,
-			default: 'text',
-			validator: (value) => [
-				'text',
-				'password',
-				'email',
-				'tel',
-				'url',
-				'search',
-			].includes(value),
-		},
-
-		/**
-		 * The hidden input label for accessibility purposes. This will also
-		 * be used as a placeholder unless the placeholder prop is populated
-		 * with a different string. This is required if an external label is
-		 * not provided.
-		 */
-		label: {
-			type: String,
-			default: undefined,
-		},
-
-		/**
-		 * Pass in true if you want to use an external label. This is useful
-		 * if you need a label that looks different from the one provided by
-		 * this component
-		 */
-		labelOutside: {
-			type: Boolean,
-			default: false,
-		},
-
-		/**
-		 * We normally have the lable hidden visually and use it for
-		 * accessibility only. If you want to have the label visible just above
-		 * the input field pass in true to this prop.
-		 */
-		labelVisible: {
-			type: Boolean,
-			default: false,
-		},
-
-		/**
-		 * The placeholder of the input. This defaults as the string that's
-		 * passed into the label prop. In order to remove the placeholder,
-		 * pass in an empty string.
-		 */
-		placeholder: {
-			type: String,
-			default: undefined,
-		},
+	// Allow forwarding all attributes
+	inheritAttrs: false,
 
-		/**
-		 * Controls whether to display the trailing button.
-		 */
-		showTrailingButton: {
-			type: Boolean,
-			default: false,
-		},
+	props: {
+		...NcInputField.props,
 
 		/**
 		 * Specifies which material design icon should be used for the trailing
@@ -243,170 +176,6 @@ export default {
 				'undo',
 			].includes(value),
 		},
-
-		/**
-		 * Toggles the success state of the component. Adds a checkmark icon.
-		 * this cannot be used together with canClear.
-		 */
-		success: {
-			type: Boolean,
-			default: false,
-		},
-
-		/**
-		 * Additional error message
-		 *
-		 * This will be displayed beneath the input field
-		 */
-		helperText: {
-			type: String,
-			default: '',
-		},
-
-		/**
-		 * Toggles the error state of the component. Adds an error icon.
-		 * this cannot be used together with canClear.
-		 */
-		error: {
-			type: Boolean,
-			default: false,
-		},
-
-		/**
-		 * Id of the input field. To use when using external label
-		 */
-		id: {
-			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),
-		},
-
-		/**
-		 * The autofocus property defines whether the input should
-		 * automatically receive focus on page load
-		 */
-		autofocus: {
-			type: Boolean,
-			default: false,
-		},
-
-		/**
-		 * The minlength property defines the minimum number of characters
-		 * (as UTF-16 code units) the user can enter
-		 */
-		minlength: {
-			type: Number,
-			default: 0,
-		},
-
-		/**
-		 * The maxlength property defines the maximum number of characters
-		 * (as UTF-16 code units) the user can enter
-		 */
-		maxlength: {
-			type: Number,
-			default: null,
-		},
-
-		/**
-		 * Allow to disable spellchecking
-		 */
-		spellcheck: {
-			type: Boolean,
-			default: true,
-		},
-
-		/**
-		 * Mark the text field as required
-		 */
-		required: {
-			type: Boolean,
-			default: false,
-		},
 	},
 
 	emits: [
@@ -415,7 +184,7 @@ export default {
 
 	computed: {
 		clearTextLabel() {
-			return t('Clear text')
+			return this.trailingButtonLabel || t('Clear text')
 		},
 	},
 
diff --git a/src/components/index.js b/src/components/index.js
index 4071130084..5caef75dc4 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -63,6 +63,8 @@ export { default as NcDateTimePickerNative } from './NcDateTimePickerNative/inde
 export { default as NcEmojiPicker } from './NcEmojiPicker/index.js'
 export { default as NcEmptyContent } from './NcEmptyContent/index.js'
 export { default as NcGuestContent } from './NcGuestContent/index.js'
+// Not exported on purpose
+// export { default as NcInputField } from './NcInputField/index.js'
 export { default as NcListItem } from './NcListItem/index.js'
 export { default as NcListItemIcon } from './NcListItemIcon/index.js'
 export { default as NcLoadingIcon } from './NcLoadingIcon/index.js'
diff --git a/styleguide.config.js b/styleguide.config.js
index 9576cb4ec8..09f0ff468e 100644
--- a/styleguide.config.js
+++ b/styleguide.config.js
@@ -80,7 +80,7 @@ module.exports = async () => {
 					'src/components/NcRichContenteditable/!(NcRichContenteditable).vue',
 					'src/components/NcSettings*/*.vue',
 					'src/components/NcUserBubble/NcUserBubbleDiv.vue',
-					'src/components/NcInputField/NcInputField.vue',
+					'src/components/Nc*Field/*.vue',
 				],
 				sections: [
 					{
@@ -135,6 +135,12 @@ module.exports = async () => {
 							'src/components/NcDashboard*/*.vue',
 						],
 					},
+					{
+						name: 'NcFields',
+						components: [
+							'src/components/Nc*Field/*.vue',
+						],
+					},
 					{
 						name: 'NcListItems',
 						components: [