feat: Add $attrs to input field (#39)

* Pass through attributes to <input> element

* Update src/components/PasswordStrengthMeter.vue

Co-Authored-By: Raymond Botha <[email protected]>

Co-authored-by: Raymond Botha <[email protected]>

Author: khamer

src/App.vue

@@ -1,7 +1,13 @@
 <template>
   <div id="app">
     <h1>Password Strength Meter</h1>
-    <password v-model="password" :toggle="true"></password>
+
+    <password v-model="password" :toggle="true" />
+
+    <password v-model="password" disabled="disabled" placeholder="This input is disabled." />
+
+    <password v-model="password" id="custom-id" name="custom_name" />
+
   </div>
 </template>
 

src/components/PasswordStrengthMeter.vue

@@ -5,24 +5,19 @@
       class="Password__group"
     >
       <input
+        v-bind="$attrs"
         :type="inputType"
-        :ref="referanceValue"
-        :class="[defaultClass, disabled ? disabledClass : '']"
-        :name="name"
-        :id="id"
-        :placeholder="placeholder"
-        :required="required"
-        :disabled="disabled"
-        :autocomplete="autocomplete"
-        v-bind:value="value"
+        :ref="referenceValue"
+        :class="[defaultClass, $attrs.disabled ? disabledClass : '']"
+        :value="value"
         @input="evt => emitValue('input', evt.target.value)"
         @blur="evt => emitValue('blur', evt.target.value)"
         @focus="evt => emitValue('focus', evt.target.value)"
       >
       <div class="Password__icons">
         <div
           v-if="badge"
-          v-bind:class="[isSecure ? successClass : '', !isSecure && isActive ? errorClass : '' ]"
+          :class="[isSecure ? successClass : '', !isSecure && isActive ? errorClass : '' ]"
           class="Password__badge"
           v-cloak
           >
@@ -49,8 +44,8 @@
       </div>
     </div>
 
-    <div v-if="showStrengthMeter" v-bind:class="[strengthMeterClass]">
-      <div v-bind:class="[strengthMeterFillClass]" :data-score="passwordStrength"></div>
+    <div v-if="showStrengthMeter" :class="[strengthMeterClass]">
+      <div :class="[strengthMeterFillClass]" :data-score="passwordStrength"></div>
     </div>
   </div>
 </template>
@@ -60,61 +55,13 @@
 
   export default {
     props: {
-      /**
-       * Input field id
-       * @type {String}
-       */
-      id: {
-        type: String,
-        default: 'password'
-      },
-      /**
-       * Input field placeholder text
-       * @type {String}
-       */
-      placeholder: {
-        type: String,
-        default: 'Please enter your password'
-      },
-      /**
-       * Input field autocomplete
-       * @type {String}
-       */
-      autocomplete: {
-        type: String,
-        default: 'new-password'
-      },
       /**
        * Binded value
        * @type {Object}
        */
       value: {
         type: String
       },
-      /**
-       * Input field name
-       * @type {String}
-       */
-      name: {
-        type: String,
-        default: 'password'
-      },
-      /**
-       * Input field required attribute
-       * @type {Boolean}
-       */
-      required: {
-        type: Boolean,
-        default: true
-      },
-      /**
-       * Input field disabled attribute
-       * @type {Boolean}
-       */
-      disabled: {
-        type: Boolean,
-        default: false
-      },
       /**
        * Password min length.
        * Right now only visual for the badge
@@ -157,7 +104,7 @@
       * Prop to change the
       * ref of the input
       */
-      referanceValue: {
+      referenceValue: {
         type: String,
         default: 'input'
       },