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

6 months ago

5.1.6-fp-hour-picker-11

6 months ago

5.1.6-fp-hour-picker-10

6 months ago

5.1.6

6 months ago

5.1.5

7 months ago

5.2.0

6 months ago

5.1.6-fp-hour-picker-5

6 months ago

5.1.6-fp-hour-picker-4

6 months ago

5.1.6-fp-hour-picker-7

6 months ago

5.1.6-fp-hour-picker-6

6 months ago

5.1.6-fp-hour-picker-9

6 months ago

5.1.6-fp-hour-picker-8

6 months ago

5.1.6-fp-hour-picker-1

6 months ago

5.1.6-fp-hour-picker-3

6 months ago

5.1.6-fp-hour-picker

6 months ago

5.1.6-beta-fp-hour-picker

6 months ago

7 months ago

7 months ago

8 months ago

8 months ago

10 months ago

11 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year 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

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

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

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

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

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

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