Fp-components NPM

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:

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:

v-model
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:

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:

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

@infinitebrahmanuniverse/nolb-fp @everything-registry/sub-chunk-1698

5.1.6-fp-hour-picker-12

2 years ago

5.1.6-fp-hour-picker-11

2 years ago

5.1.6-fp-hour-picker-10

2 years ago

5.1.6

2 years ago

5.1.5

2 years ago

5.2.0

2 years ago

5.1.6-fp-hour-picker-5

2 years ago

5.1.6-fp-hour-picker-4

2 years ago

5.1.6-fp-hour-picker-7

2 years ago

5.1.6-fp-hour-picker-6

2 years ago

5.1.6-fp-hour-picker-9

2 years ago

5.1.6-fp-hour-picker-8

2 years ago

5.1.6-fp-hour-picker-1

2 years ago

5.1.6-fp-hour-picker-3

2 years ago

5.1.6-fp-hour-picker

2 years ago

5.1.6-beta-fp-hour-picker

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2 years ago

2 years ago

3 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago