MText (.MTEXT)

A Vue custom textarea with validation, tags support and characters counter

Preview

username

user tags

Tag1Tag2

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
maxLength	number	true	to add a maxlength and a counter
tags	boolean	true	transforms the value of the textarea to a tags array
includedHtml	string	true	to filter the value from html tags except for the provided tags array

Usage

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

<template>
  <MText
    placeholder="user tags"
    autoDirection
    id="MInput"
    :pattern="/^[a-z]{3,}$/"
    invalidMessage="Valid tag should be 3 or more english small letters"
    validMessage="Good to go"
    v-model="tags"
    label="user tags"
    :maxlength="4"
    tags
    bordered
  />
</template>