Input Number

The input element with formatting and manipulating numbers.

Examples

Input Number

Code

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

const form = ref({
  number: null
})
</script>

<template>
  <form @submit.prevent="">
    <component :is="BaseInputNumber" v-model="form.number" />
  </form>
</template>

Label

Code

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

const form = ref({
  number1: null,
  number2: null
})
</script>

<template>
  <form @submit.prevent="">
    <component
      :is="BaseInputNumber"
      v-model="form.number1"
      label="Label"
      layout="horizontal"
      description="Horizontal Layout"
    />
    <component
      :is="BaseInputNumber"
      v-model="form.number2"
      label="Label"
      layout="vertical"
      description="Vertical Layout"
    />
  </form>
</template>

Border

Code

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

const form = ref({
  number1: null,
  number2: null,
  number3: null
})
</script>

<template>
  <form @submit.prevent="">
    <component :is="BaseInputNumber" v-model="form.number1" label="Without Border" border="none" />
    <component :is="BaseInputNumber" v-model="form.number2" label="Simple Border" border="simple" />
    <component :is="BaseInputNumber" v-model="form.number3" label="Full Border" border="full" />
  </form>
</template>

Helper

Code

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

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

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

<template>
  <form @submit.prevent="">
    <component :is="BaseInputNumber" v-model="form.number1" label="Label" required />
    <component
      :is="BaseInputNumber"
      v-model="form.number2"
      label="Label"
      placeholder="Placeholder example"
    />
    <component
      :is="BaseInputNumber"
      v-model="form.number3"
      label="Label"
      description="Description example"
    />
    <component
      :is="BaseInputNumber"
      v-model="form.number4"
      label="Label"
      :helpers="['Helper example']"
    />
    <component
      :is="BaseInputNumber"
      v-model="form.number5"
      label="Label"
      v-model:errors="errors"
    />
    <component :is="BaseInputNumber" v-model="form.number6" label="Label" disabled />
  </form>
</template>

Input Number API

Types

export type BaseInputNumberBorderType = '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.
align	left right	right	Input align.
border	BaseInputNumberBorderType	simple	Input border.
layout	BaseFormLayoutType	vertical	Input layout.
decimalLength	number	0	Input decimal length.
autofocus	boolean	false	Focus input on page load.
required	boolean	false	if true input is required.
disabled	boolean	false	if true input is disabled.
helpers	string[]		Input helper message.