@psff/cmp-input NPM

@psff/cmp-input `psff-input`

Component to show inputs.

Getting started

Setup the package as a dependencie.
```
yarn add @psff/cmp-input
```

Use the component <psff-input />.

import PsffInput from '@psff/cmp-input'

@Component({
  components: {
    'psff-input': PsffInput,
  },
})
export default class MyComponent extends Vue {}

.my-input {
  --psff-input-background-color: #fabada;
  --psff-input-label-color: black;
}

<psff-input
  class="my-input"
  label="Email"
  type="email"
  placeholder="ex. kay.mcnulty@upenn.edu" />

Specifications

Component `<psff-input />`

This component render an input.

Slots

input-prefix: place before text content inside the field. (for a simple string, can be given as a prop)
input-suffix: place after text content inside the field. (for a simple string, can be given as a prop)
input-before: place horizontally right before the input and aligned with the field.
input-after: place horizontally right after the input and aligned with the field.

Parameters:

Extend <input> tag parameters with:

label (string, optional): to show a label for the input.
maxlenght (number, optional): The maximum length of the input value.
disabled (boolean, default: false): If the input is available for user interaction.
prefix (string, optional): A string to show before the input value.
suffix (string, optional): A string to show after the input value.
placeholder (string, optional): The input placeholder.
errorMessage (string, optional): 'right')*: to show an error message.

Events

blur (value: string): user leave the field.
change (value: string): new value after user interaction.
focus (value: string): user just enters the field.
input (value: string): every time the value changes.
keydown (value: string): when the user press a key and before value changes (can be prevented).