MInput (.MINPUT)

A Vue custom Input type with validation and icons (or any child element).

Preview

username

Attributes

Name	type	optional	description
v-model	-	false	to bind the input to a variable
id	string	false	required for validating when using with MForm
pattern	RegEx	true	use it to validate the user input with a specific pattern (indicates that this input is required)
invalidMessage	string	true	write a message for invalid input
validMessage	string	true	write a message for valid input
autoDirection	boolean	true	adjusts the direction to rtl when writing in Arabic
type	string	true	text, password, date, number, email
bordered	boolean	true	to get the bordered looking input
label	string	true	to add a label to your input
transformer	(string) => string	true	to perform some transforming function on the text
shrinked	boolean	true	to shrink the input when it's not focused
unstyled	boolean	true	to get the stock input look

Usage

The isValid() method returns a boolean value to tell if the curent input is valid according the pattern attribute.

The slot named "start" allows you to put an element at the start of the input.

The slot named "end" allows you to put an element at the end of the input.

<template>
  <MInput
    placeholder="username"
    autoDirection
    id="MInput"
    :pattern="/^[a-z]{1}\w{2,}$/"
    invalidMessage="Valid username should start with a letter and has a minimmum of 3 characters"
    validMessage="Nice username"
    v-model="username"
  >
    <template v-slot:start>
      <i class="fas fa-user"></i>
    </template>
    <template v-slot:end>
      <MButton icon-start="fas fa-angle-right" circled />
    </template>
  </MInput>
</template>