sala-components v0.3.4

Sala Components

Sala components is a Vue component library for Sala products.

Install

yarn add sala-components
// or
npm install sala-components

Add to quasar project

// salaComponents.js
import SalaComponents from 'sala-components'

const { salaComponentsInit, errorHandler } = SalaComponents

export default ({ Vue }) => {
    Vue.use(salaComponentsInit)
    Vue.use(errorHandler, {
        messages: { required: 'The {attribute} field is required' },
        attributes: {
            email: 'Email',
            first_name: 'First name',
            last_name: 'Last name'
        }
    })
}

You need to put in this in your project

import VuelidateErrorExtractor from "vuelidate-error-extractor"
import {SalaInput} from "sala-components"

const messages = {
  required: "We need your {attribute}",
  email: "Are you sure this email is correct?"
}

Vue.use(VuelidateErrorExtractor, {
  messages,
  template: SalaInput,
  attributes: {
    name: 'full name',
    email: 'email',
    text: 'text'
  }
})

Include in app.vue

<script>
import Vue from 'vue'
import Components from 'sala-components'

export default {
  mounted () {
      Object.keys(Components).forEach(name => {
          Vue.component(name, Components[name])
      })
  }
}
</script>

Components example

<template>
  <div id="app">
    <sala-form :submitFunc="handleSubmit" :validations="$v.user" :messages="localMessages">
      <sala-input 
        name="name"
        v-model="user.name" 
        type="tel" 
        label="Full Name"
      />
      <sala-input 
        name="email"
        v-model="user.email" 
        type="tel" 
        label="Email"
      />
      <sala-input 
        name="password"
        v-model="user.password" 
        type="password" 
        label="Password"
      />
      <sala-input 
        name="phone"
        :mask="['### ### ###']"
        v-model="user.phone" 
        type="tel" 
        label="Phone Number"
      />
      <sala-submit class="submit">
        <span slot="invalid">Invalid People</span>
        <span slot="error">For some reason we can't process your form</span>
        <span slot="loading">Loading Works...</span>
        <span slot="success">Thanks for sending</span>
        <span>Login</span>
      </sala-submit>
    </sala-form>
  </div>
</template>

<script>
import { validationMixin } from 'vuelidate'
import { required, email } from 'vuelidate/lib/validators'

export default {
  mixins: [validationMixin],
  name: 'app',
  data() {
    return {
      user: {
        name: "",
        email: "gds@fdsds.com",
        password: "dsada",
        phone: "321332231"
      },
      localMessages: {
        required: "You must fill the {attribute} field to continue",
        email: '{attribute} is not a proper email, you should check it again.',
        password: 'This '
      }
    }
  },
  validations: {
    user: {
      name: {
          required
      },
      email: {
          required,
          email
      },
      password: {
          required
      },
      phone: {
          required
      }
    },
  },
  methods: {
    handleSubmit() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          if (Math.random() >= 0.5) {
            resolve()
          } else {
            reject("isError")
          }
        }, 1500);
      });
    },
  }
};
</script>

<style lang="scss">
.submit {
  text-align: right;
  margin-top: 28px;
}
</style>