Documentation

Table of Contents

[[toc]]

Getting Started

Introduction

Epitome makes it easy to validate input fields. The main purpose of epitome is not to repeat validation code for each field using different packages.

Installation

npm install --save vue-epitome

Example

Using epitome components is very easy. Lets try to make a simple input field for taking user name and applying validation on it.

<template>
  <div id="app">
    <div class="columns">
      <div class="column is-half is-offset-one-quarter">
        <p class="is-size-4 has-text-centered">Register User</p>
        <Input
          v-model="user.first_name"
          label="First Name"
          horizontal="true"
          placeholder="e.g. John"
          :validation="{ required: true, minLength: 5, maxLength: 50, alpha: true }"
        />
        <Input
          v-model="user.last_name"
          label="Last Name"
          horizontal="true"
          placeholder="e.g. doe"
          :validation="{ required: true, minLength: 5, maxLength: 50, alpha: true }"
        />
        <Input
          v-model="user.email"
          label="Email"
          horizontal="true"
          placeholder="e.g. [email protected]"
          type="email"
          :validation="{ required: true, minLength: 5, maxLength: 100, email: true }"
        />
        <Input
          v-model="user.password"
          label="Password"
          horizontal="true"
          placeholder="e.g. Your password"
          type="password"
          passwordReveal="true"
          :validation="{ required: true, minLength: 8, maxLength: 50, alphaNum: true }"
        />
        <Input
          v-model="user.confirm_password"
          label="Confirm password"
          horizontal="true"
          placeholder="e.g. Confirm password"
          type="password"
          passwordReveal="true"
          :validation="{ required: true, minLength: 8, maxLength: 50, alphaNum: true }"
        />
        <p class="is-size-4">By Faisal Munir</p>
      </div>
    </div>
  </div>
</template>
<script>
import Input from '@/components/EInput.vue'
export default {
  name: 'Epitome',
  components: {
    Input
  },
  data() {
    return {
      user: {
        first_name: 'John',
        last_name: 'Doe',
        email: '[email protected]',
        password: 'Epitome123',
        confirm_password: 'Epitome123'
      },
      confirmPass: null,
    }
  },
}
</script>

Props

| Props | Type | Required | Default | | ------------------ | :-----------: | :------: | :-----: | | value | Number/String | false | null | | horizontal | Boolean | false | false | | icon | String | false | null | | iconPack | String | false | null | | label | String | false | null | | size | String | false | null | | expanded | Boolean | false | false | | placeholder | String | false | null | | validation | Object | true | {} | | type | String | false | text | | passwordReveal | Boolean | false | false | | loading | Boolean | false | false | | iconClickable | Boolean | false | false | | customClass | String | false | null | | iconRight | String | false | null | | iconRightClickable | Boolean | false | false |

Validations

| Property | Value | | ---------- | ------------------- | | required | Boolean | | requiredIf | Object/Array/String | | email | String | | minLength | Number | | maxLength | Number | | alphaNum | Boolean | | alpha | Boolean | | numeric | Boolean | | integer | Boolean | | minValue | Number | | maxValue | Number |

Dependencies

Epitome uses vuelidate for vuelidate and buefy