[feature] Add required option

Author: LouisMazel

src/App.vue

@@ -73,6 +73,14 @@
           :dark="darkMode"
           type="number"
         />
+        <br>
+        <VueInputUi
+          v-model="value9"
+          label="Required input"
+          hint="is required"
+          :dark="darkMode"
+          required
+        />
       </div>
     </div>
   </div>
@@ -96,6 +104,7 @@
         value6: 'Hello world!',
         value7: null,
         value8: null,
+        value9: null,
         darkMode: false
       }
     }

src/VueInputUi/index.vue

@@ -7,7 +7,8 @@
       'has-error': error,
       'is-disabled': disabled,
       'is-dark': dark,
-      'is-focused': valid
+      'is-focused': valid,
+      'has-hint': hint && !value
     }, size]"
     class="field"
     @click="focusInput"
@@ -16,25 +17,26 @@
       :id="id"
       ref="VueInputUi"
       v-model="inputValue"
-      :placeholder="label"
+      :placeholder="labelValue"
       :disabled="disabled"
       :style="[borderStyle]"
       :type="type"
       class="field-input"
       :readonly="readonly"
+      :required="required"
       @focus="onFocus"
       @blur="onBlur"
       @click="$emit('click')"
     >
     <label
       ref="label"
       :for="id"
-      :class="error ? 'text-danger' : null"
+      :class="error ? 'lm-text-danger' : null"
       :style="[colorStyle]"
       class="field-label"
       @click="focusInput"
     >
-      {{ hint || label }}
+      {{ hintValue || labelValue }}
     </label>
   </div>
 </template>
@@ -55,7 +57,8 @@
       type: { type: String, default: 'text' },
       readonly: { type: Boolean, default: false },
       valid: { type: Boolean, default: false },
-      validColor: { type: String, default: 'yellowgreen' }
+      validColor: { type: String, default: 'yellowgreen' },
+      required: { type: Boolean, default: false }
     },
     data: function () {
       return {
@@ -82,6 +85,20 @@
         set (value) {
           this.$emit('input', value)
         }
+      },
+      labelValue () {
+        let label = this.label
+        if (this.required && label) {
+          label += ` *`
+        }
+        return label
+      },
+      hintValue () {
+        let hint = this.hint
+        if (this.required && hint) {
+          hint += ` *`
+        }
+        return hint
       }
     },
     methods: {
@@ -123,7 +140,7 @@
     }
     .field-label{
       position: absolute;
-      top: 3px;
+      top: 4px;
       cursor: pointer;
       left: 13px;
       -webkit-transform: translateY(25%);
@@ -152,11 +169,6 @@
       font-size: 14px;
       z-index: 0;
     }
-    &.has-error {
-      .field-input {
-        border-color: orangered !important;
-      }
-    }
     &.has-value {
       .field-label {
         opacity: 1;
@@ -168,6 +180,16 @@
         padding-top: 14px;
       }
     }
+    &.has-hint {
+      .field-label{
+        opacity: 1;
+        transform: translateY(0);
+        font-size: 11px;
+      }
+      .field-input {
+        padding-top: 14px;
+      }
+    }
     &.is-focused {
       .field-input {
         border-color: dodgerblue;
@@ -176,6 +198,11 @@
         color: dodgerblue;
       }
     }
+    &.has-error {
+      .field-input {
+        border-color: orangered !important;
+      }
+    }
     &.is-disabled {
       .field-input {
         border-color: #CCC;
@@ -185,7 +212,7 @@
         cursor: default;
       }
     }
-    .text-danger {
+    .lm-text-danger {
       color: orangered !important;
     }
     &.is-dark {