Form

The container for different types of input elements

Examples

Form

Code

<script setup lang="ts">
import { computed } from 'vue'
import { BaseForm, type BaseFormLayoutType } from '@point-hub/papp'

export interface Props {
  modelValue: string
  label?: string
  description?: string
  layout?: BaseFormLayoutType
  required?: boolean
  helpers?: string[]
  errors?: string[]
}

const props = withDefaults(defineProps<Props>(), {
  layout: 'vertical',
  required: false
})

const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void
}>()

const inputValue = computed({
  set: (text: string) => {
    emit('update:modelValue', text)
  },
  get: () => props.modelValue
})
</script>

<template>
  <component
    :is="BaseForm"
    :label="props.label"
    :layout="props.layout"
    :description="props.description"
    :required="props.required"
    :helpers="props.helpers"
    :errors="props.errors"
  >
    <input class="form-input border-simple" v-model="inputValue" />
  </component>
</template>

Form API

Types

export type BaseFormLayoutType = 'vertical' | 'horizontal'

Props

Name	Type	Default	Description
id	string		Form id.
label	string		Form label.
description	string		Form description.
layout	BaseFormLayoutType	vertical	Form layout.
required	boolean	false	Form required indicator.
helpers	string[]		Form helper message.
errors	string[]		Form error message.

Slot

#default slot for rendering form content