Extend NcInputField props and forward $attrs to NcPasswordField and N…

…cTextField

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

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.
  */

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,16 +94,14 @@ export default {
 </docs>
 
 <template>
- <NcInputField v-bind="$props"
+ <NcInputField v-bind="{...$attrs, ...$props }"
  ref="inputField"
  :type="isPasswordHidden ? 'password' : 'text'"
  :show-trailing-button="true"
  :helper-text="computedHelperText"
  :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')
  },