Widgets #

For rapid form development, access to a set of components (input fields) that are automatically connected to the form.

// import {InputField} from "jenesius-vue-form"
<input-field :type = "type" />

For work, fields for entering the following type were developed:

• Text
• Select
• Password
• Checkbox
• Switch
• Radio
• Tel
• Range
• Number
• Date (in developing)
• Color (in developing, low-priority)
• File (in developing, low-priority)
• Email (in developing, low-priority)

Text #

The usual field for entering textual information.

<input-field :type = "text" />

Value:

By the way, the :type parameter in the case of the Text field can be omitted.

Params: #

• max-length: Limits the content length.
• pretty: Function used for prettify input. It can be simple used for modify view of modalValue, not itself.

<template>
  <input-field :pretty = "justNumeric" />
</template>
<script setup>
import InputField from "jenesius-vue-form";

function justNumeric(value) {
  return value.replace(/\D/g, "");
}

</script>

Select #

Represents an element that allows you to select a value from the provided ones.

Value:

Passed parameters:

• options A set of enumerated dimensions. There are two types of transfer possible: As Object:

{
	"green": "Green color",
    "red"  : "Red color"
}

Like Array:

[
	{ title: 'Green color', value: 'green' },
	{ title: 'Red color', value: 'red' }
]

When passed as an object, the value will always be of type string. When Array value type can be any.

Password #

Password entry field. It has the ability to switch the visibility mode.

<input-field type = "password" />

Value:

Checkbox #

Elements of type checkbox are rendered by default as boxes that are checked (ticked) when activated, like you might see in an official government paper form.

<input-field type = "checkbox" :options = "options" />

• options - similar with InputSelect

Value:

Switch #

Switch element. Has two states turn on / turn off, which corresponds to true / false

<input-field type = "switch"  />

Value:

Radio #

Elements of type radio are generally used in radio groups—collections of radio buttons describing a set of related options.

Only one radio button in a given group can be selected at the same time.

<input-field type = "radio" :options = "options" />

• options - similar with InputSelect

  Pet

  Dog

  Cat

  Wife

  Value:

Tel #

Input elements of type tel are used to let the user enter and edit a telephone number.

<input-field type = "tel"/>

Value:

Range #

Input elements of type range let the user specify a numeric value which must be no less than a given value, and no more than another given value.

<input-field type = "range" label = "Volume"/>

Options:

• min (Number) - Value won't be less than min. The default is 0.
• max (Number) - Value won't be greater than max The default is 100.
• step (Number) - Step value. The default is 1.

Value: 0

Number #

Input elements of type number are used to let the user enter a number. They include built-in validation to reject non-numerical entries.

<input-field type = "number" label = "Age"/>

Options:

• step (Number) - Step value. The default is 1.

Value: 0