Input Mask

To provide an easy way to increase input field readability by formatting your typed data.

Examples

Input Mask

Code

<script setup lang="ts">
import { ref } from 'vue'
import { BaseInputMask } from '@point-hub/papp'

const form = ref({
  date: '',
  number: 0,
  creditCard: ''
})
</script>

<template>
  <form @submit.prevent="">
    <component
      :is="BaseInputMask"
      v-model="form.number"
      :options="{ numeral: true, numeralThousandsGroupStyle: 'thousand' }"
      label="Numeral"
      placeholder="1,234,567"
    ></component>
    <component
      :is="BaseInputMask"
      v-model="form.date"
      :options="{ date: true, delimiter: '-', datePattern: ['d', 'm', 'Y'] }"
      label="Date"
      placeholder="DD-MM-YYYY"
    ></component>
    <component
      :is="BaseInputMask"
      v-model="form.creditCard"
      :options="{ creditCard: true }"
      label="Credit Card"
      placeholder="**** **** **** ****"
    ></component>
  </form>
</template>

Helper

Code

<script setup lang="ts">
import { ref } from 'vue'
import { BaseInputMask } from '@point-hub/papp'

const form = ref({
  number1: null,
  number2: null,
  number3: null,
  number4: null,
  number5: 10000
})

const errors = ref(['Error example'])
</script>

<template>
  <form @submit.prevent="">
    <component
      :is="BaseInputMask"
      v-model="form.number1"
      :options="{ numeral: true, numeralThousandsGroupStyle: 'thousand' }"
      label="Label"
      required
    ></component>
    <component
      :is="BaseInputMask"
      v-model="form.number2"
      :options="{ numeral: true, numeralThousandsGroupStyle: 'thousand' }"
      label="Label"
      description="Description example"
    ></component>
    <component
      :is="BaseInputMask"
      v-model="form.number2"
      :options="{ numeral: true, numeralThousandsGroupStyle: 'thousand' }"
      label="Label"
      placeholder="1,234,567"
      description="Placeholder"
    ></component>
    <component
      :is="BaseInputMask"
      v-model="form.number3"
      :options="{ numeral: true, numeralThousandsGroupStyle: 'thousand' }"
      label="Label"
      :helpers="['Helper example']"
    ></component>
    <component
      :is="BaseInputMask"
      v-model="form.number4"
      :options="{ numeral: true, numeralThousandsGroupStyle: 'thousand' }"
      label="Label"
      v-model:errors="errors"
    ></component>
    <component
      :is="BaseInputMask"
      v-model="form.number5"
      :options="{ numeral: true, numeralThousandsGroupStyle: 'thousand' }"
      label="Label"
      description="Disabled"
      disabled
    ></component>
  </form>
</template>

Input Mask API

Types

export type BaseInputMaskBorderType = 'none' | 'simple' | 'full'
export type BaseFormLayoutType = `horizontal` `vertical`

Props

Name	Type	Default	Description
v-model	string		v-model is required.
v-model:errors	string[]		Input error message.
id	string		Input id.
label	string		Input label.
description	string		Input description.
placeholder	string		Input placeholder.
border	BaseInputMaskBorderType	simple	Input border.
layout	BaseFormLayoutType	vertical	Input layout.
autofocus	boolean	false	Focus input on page load.
required	boolean	false	if true input mask is required.
disabled	boolean	false	if true input mask is disabled.
helpers	string[]		Input helper message.
options	object		Cleave options