fp-components

Project instruction

Install

npm install fp-components --save

Compiles and hot-reloads for development

npm run serve

Compiles library to dist

npm run build-bundle

Lints and fixes files

npm run lint

Open styleguide

npm run styleguide

Documentation for components

Fp-Loader

coming soon ...

Fp-Expert

coming soon ...

Fp-Input

Component creates material input, with built in validation. To validate field, fp-input needs to be inside v-form, with contains ref prop. Then, validate() function may be used on form ref to validate fields.

Example

Html Usage

  <v-form ref="formRef">
    <fp-input v-model="test" required></fp-input>
  </v-form>

JS validate form:

this.$refs['formRef'].validate()

Required props:

1. v-model

Props

| PropName | Type | Default | Description | |:-------------:|:-------------:|:-----:|:--------| | label | String | null | add label to input | | id | String | null | add id to input | | description | String | null | small helper text under the input | | type | String | 'text' | add type to input | | prefix | String | null | displays prefix text (max 1-2 characters) | | suffix | String | null | displays suffix text | | mask | String | null | add mask for the input more here: https://vuetifyjs.com/en/components/text-fields | | disabled | Boolean | false | disables field | | clearable | Boolean | true | adding clear icon button that clears the input value

Validation directives

| PropName | Description | |:-------------:|:-------------:| | required | adds * to label and and mark field as required | phone | adds mask ### ### ### and checks is phone number is valid 9digits | | email | checking if email is correct | pesel | adds mask ## ## ## ##### and checking is pesel valid | minValue | adding minimum value to input with type="number" | maxValue | adding maximum value to input with type="number"

Fp-Select

Regular material select.

Html Usage

  <v-form ref="formRef">
    <fp-select v-model="test" :items="currencies"></fp-select>
  </v-form>

JS validate form:

currencies = [
    {
      name_pl: 'PLN',
      type: 'PLN'
    },
    {
      name_pl: 'EUR',
      type: 'EUR'
    },
    {
      name_pl: 'CHF',
      type: 'CHF'
    }
]
this.$refs['formRef'].validate()

Required props:

1. v-model
2. items

Props

| PropName | Type | Default | Description | |:-------------:|:-------------:|:-----:|:--------| | label | String | null | add label to input | | id | String | null | add id to input | | disabled | Boolean | false | disables field | | items | Array | [] | passing array of options | description | String | null | small helper text under the input, overrides randomDescription | | randomDescription | Boolean | true | generate description as one of labels from list items, always override by description | | itemName | String | 'name_pl' | get value to display as label, default: item.name_pl | itemKey | String, Boolean | 'type' | get value by key to return to model, default: item.type. If you pass false it will return whole object item

Validation directives

| PropName | Description | |:-------------:|:-------------:| | required | adds * to label and and mark field as required

Fp-Radio-Group

This code generates radio-group with question "Is 2 + 2 equals 4?" and you have 2 default options "Tak/Nie" that returns Boolean

Html Usage

  <v-form ref="formRef">
    <fp-radio-group v-model="test" label="Is 2 + 2 equals 4?"></fp-radio-group>
  </v-form>

Required props:

1. v-model

Props

| PropName | Type | Default | Description | |:-------------:|:-------------:|:-----:|:--------| | label | String | null | add label to input | | id | String | null | add id to input | | items | Array | [{type: true, name_pl: 'Tak'}, {type: false, name_pl: 'Nie'}] | passing array of options | | disabled | Boolean | false | disables field | | itemName | String | 'name_pl' | get value to display as label, default: item.name_pl | itemKey | String | 'type' | get value by key to return to model, default: item.type | returnObject | String, Boolean | false | return whole object

Validation directives

| PropName | Description | |:-------------:|:-------------:| | required | adds * to label and and mark field as required

Fp-Datepicker

Example

  <v-form ref="formRef">
    <fp-datepicker v-model="date" label="When is your birthDay?"></fp-datepicker>
  </v-form>

Required props:

1. v-model

Props

| PropName | Type | Default | Description | |:-------------:|:-------------:|:-----:|:--------| | label | String | null | add label to input | | id | String | null | add id to input | | disabled | Boolean | false | disables field | | description | String | null | small helper text under the input | | startWith | String | YEAR | changes view that datepicker starts with after open, allow 'YEAR', 'MONTH' or 'DAY' |

Validation directives

| PropName | Description | |:-------------:|:-------------:| | required | field is required | adultValidation | validate if Date object is older than 18 years

Documentation for services

ModalService

coming soon ...

FpAxios

coming soon ...

Documentation for directives

FpTooltip

coming soon