# sala-components

> Sala components is a Vue component library for Sala products.

Latest version **0.3.4** (published 2019-05-22) · 0 weekly downloads

## Install

```sh
npm install sala-components
pnpm add sala-components
yarn add sala-components
bun add sala-components
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.4 |
| Published | 2019-05-22 |
| First published | 2019-05-18 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 1.9 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | mattrybin |

## Links

- npm: https://www.npmjs.com/package/sala-components
- npm.io page: https://npm.io/package/sala-components

## Dependencies (4)

- [lodash](https://npm.io/package/lodash.md) ^4.17.11
- [core-js](https://npm.io/package/core-js.md) ^2.6.5
- [vue-the-mask](https://npm.io/package/vue-the-mask.md) ^0.11.1
- [vue-template-compiler](https://npm.io/package/vue-template-compiler.md) ^2.5.21

## Recent versions

- 0.3.4 (latest) — 2019-05-22
- 0.3.3 — 2019-05-21
- 0.3.2 — 2019-05-21
- 0.3.1 — 2019-05-21
- 0.3.0 — 2019-05-21
- 0.2.12 — 2019-05-18
- 0.2.11 — 2019-05-18
- 0.2.10 — 2019-05-18
- 0.2.9 — 2019-05-18
- 0.2.8 — 2019-05-18
- 0.2.7 — 2019-05-18
- 0.2.6 — 2019-05-18
- 0.2.5 — 2019-05-18
- 0.2.4 — 2019-05-18
- 0.2.3 — 2019-05-18
- … 8 more at https://npm.io/package/sala-components/versions

## README

# Sala Components

Sala components is a Vue component library for Sala products.

## Install

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

## Add to quasar project
```js
// 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
```js
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

```html
<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
```html
<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>
```

---
_Source: https://npm.io/package/sala-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._