Base Text Field

Base Text Field is a vue component useful to manage easily variants, validations, icons, and other things according to the props.

Model Value

We can easily control the value of input passing some "ref" as a v-model. See the example below:

Note (Important)

The v-model property is the only required property of this component, if you don't define and try to use it, it will cause an error in the application.

<template>
  <main>
    <BaseTextField v-model="myValue" label="Model Value" variant="outlined"/>
    <p>Model Value: <br><span class="bold">{{ myValue }}</span></p>
  </main>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { BaseTextField } from 'vuetage'

  const myValue = ref('Hello World')
</script>

The model value is updated using "input" event per default, if you want to change it to "change" or "blur" event, you can pass it as a value using the props eventEmitter.

Props

Variant

Variant is a prop that defines one of some predefined styles available to each case as you need.

• Default

The default variant can be used just calling the component, this is the default value for "variant" prop.

<BaseTextField v-model="myValue" />

• Outlined

The outlined variant can be used with the props "variant" with value "outlined" as show below:

<BaseTextField v-model="myValue" variant="outlined" />

• Underlined

The underlined variant can be used with the props "variant" with value "underlined" as show below:

<BaseTextField v-model="myValue" variant="underlined" />

• Dark

The dark variant can be used with the props "variant" with value "dark" as show below:

<BaseTextField v-model="myValue" variant="dark" />

Label

Basically define some label for the input.

<BaseTextField v-model="myValue" label="Label" />

Placeholder

Basically define some placeholder for the input.

<BaseTextField v-model="myValue" placeholder="Type your text" />

Bind

Basically, we have a props to allow you to pass any attribute to the input. If you pass the attribute directly without using this props, probably the attribute will appear in the parent element if you look in the DOM, for this reason we have this prop to allow you to put attributes directly in the input.

As this component is using the classic "input", we can add any attribute as show in MDN Web Docs.

<BaseTextField v-model="myValue" :bind="{ autofocus: true }" />

Loading

There are 2 kinds of loading; the spinner loading, and border loading.

• Spinner (Default)

<BaseTextField v-model="myValue" :loading="true" />

• Border Loading

<BaseTextField v-model="myValue" :loading="true" use-border-loading />

There are some props related for the loading props:

props	type	default	description
loading	boolean	false	Define if the component is in loading.
useBorderLoading	boolean	false	Define if the loading will be an spinner or border loading style.
loadingColor	string	black	Define the color of spinner or border loading.
loadingSize	string	small(0.7em) for spinner or 2px for border loading	Define the size of spinner or border loading.
disableOnLoading	boolean	false	Define if when the props "loading" be true the field will be disabled or not.

Disabled

Control the disabled state of the component.

<BaseTextField v-model="myValue" :disabled="true" />

Readonly

Control the readonly state of the component.

<BaseTextField v-model="myValue" :readonly="true" />

Password

This boolean prop defines if the base text field has the "password" type, it will apply a eye icon to show or hide the password.

<BaseTextField password v-model="myValue" :min-length="5" :max-length="20" label="true" />

Rules

We can add any validation in our BaseTextField component using the rules.

The prop "rules" is the principal prop to add validations; we can add any rule using this props.

For example, if we want to check if the text includes the text "vuetage", we could add the following code:

<template>
  <BaseTextField v-model="myValue" :rules="rules" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { BaseTextField } from 'vuetage'

const myValue = ref(null)
const rules = [
    // Look that we can use the model value as param to add the validation.
    (value) => value.includes(value) || `The text "${value}" should include the word "vuetage".`
]
</script>

Type should be an array of function that will return a boolean or string. If the returned value is "true" the input is valid, else if the returned value is "false" the input is invalid and will just show the red border color, else if the returned value is a string the input is invalid and will show this string as an error message.

Predefined Rules

Required

A predefined rule, and attribute to use, it indicates that the input should contain a value, otherwise will show an error message. It also affect as an required field when we use inside a form.

<BaseTextField v-model="myValue" required event-emitter="blur"/>

You can test it by clicking on the input, and then cause the blur event. Or type any value and after clear it.

If you want to became a field required inside a form, but you don't want to show the error message(apply this rule to validation), you can use the prop "disableRequiredRule" as show below:

<BaseTextField v-model="myValue" required disable-required-rule />

Max Length

A predefined rule that is available for usage, it is useful to define the max length of input.

<BaseTextField v-model="myValue" :max-length="5" />

You can test the input below typing any word with more than 5 characters.

Min Length

The same thing that "MaxLength" props, but for control minLength of characters.

<BaseTextField v-model="myValue" :min-length="5" />

You can test the input below typing any word with less than 5 characters.

Icons

We can add icons to the input, we have 2 kinds of icons, the left icon, and the right icon. The available icons are the same that we can use in font awesome. But if you have another library that adds an icon using this syntax "<i class="icon"></i>", you can use it passing it as a prop value.

Left Icon

This is a prop to add an icon to the left of the input.

<BaseTextField v-model="myValue" left-icon="fa fa-fire" />

Right Icon

This is a prop to add an icon to the right of the input.

<BaseTextField v-model="myValue" right-icon="fa fa-check" />

Styles

There are some ways to modify the input as you need.

Width

This is a prop to modify the width of input. You can specify any width following the CSS rules.

<BaseTextField v-model="myValue" width="50px" />

Height

This is a prop to modify the height of input. You can specify any height following the CSS rules.

<BaseTextField v-model="myValue" height="100px" />

Custom Style

This is a prop to modify any style of input inside a component. The syntax is the same that we can use in vue.js template .

<BaseTextField v-model="myValue" custom-style="background-color: yellow;" />

Custom Style Label

This is a prop to modify any style of label inside a component. The syntax is the same that we can use in vue.js template .

<BaseTextField v-model="myValue" custom-style-label="color: blue;" />

Style

This is a prop that will affect the parent element, the field. It works as the "Custom Style", and "Custom Style Label", but for the field.

<BaseTextField v-model="myValue" style="background-color: yellow;" />

Custom Class

We can use the custom class to add some style with tailwind css, for example.

<BaseTextField v-model="myValue" custom-class="bg-blue-500 text-white" />

Event emitter

This is a useful prop to change the update model event, the ref value that you should pass as a "v-model" will be updated using this event, the default value is "input". You also have the option to use the "change" or "blur" event instead of input.

<BaseTextField v-model="myValue" event-emitter="blur" max-length="5" />

Events

There are some events that you can use to control the component.

1. update:modelValue - This event is emitted when the model value is updated. The event is emitted with the new value of the model updating automatically the modelValue(v-model passed). It will be dispared according to the event emitter prop.
2. hasError - This event is emitted when the input has an error, it will be emitted with a boolean value.
3. input - This event is emitted when the input is updated, it will be emitted with the new value of the input.
4. change - This event is emitted when the input is updated, it will be emitted with the new value of the input.
5. blur - This event is emitted when the input is updated, it will be emitted with the new value of the input.
6. focus - This event is emitted when the input is updated, it will be emitted with the event of the input.
7. focusout - This event is emitted when the input is updated, it will be emitted with the event of the input.
8. click - This event is emitted when the input is updated, it will be emitted with the event of the input.
9. dblclick - This event is emitted when the input is updated, it will be emitted with the event of the input.
10. mousedown - This event is emitted when the input is updated, it will be emitted with the event of the input.
11. mouseup - This event is emitted when the input is updated, it will be emitted with the event of the input.
12. mouseenter - This event is emitted when the input is updated, it will be emitted with the event of the input.

Slots

There are some slots that you can use to control the component.

1. left-icon - This slot is used to control the left icon of the input.
2. right-icon - This slot is used to control the right icon of the input.
3. label - This slot is used to control the label of the input.
4. error-message - This slot is used to control the error message of the input.
5. loadingBorder - This slot is used to control the loading border of the input.
6. spinner - This slot is used to control the spinner of the input.