Vue-app-form NPM

AppForm

Generate Form for quasar

Install npm or yarn

npm i vue-app-form
yarn add vue-app-form

Documentation

In your vue3 applications import component

<script setup lang="ts">
import { QInput } from 'quasar'
import { z } from 'zod'
import { AppForm, AppFormSchemaField } from 'vue-app-form'

const modelSchema = z.object({
  name: z.string().noempty(),
})

const schema: AppFormSchemaField[] = [
  {
    scope: 'name',
    component: QInput,
    defaultValue: '',
    componentProps: {
      label: 'Namn',
      // component props i.e from quasar
      square: true,
    },
  },
]
</script>

<template>
  <app-form :schema="schema" :model-schema="modelSchema" />
</template>

AppForm

Prop		Default	Required
`schema`	See AppFormSchemaField interface		Yes
`modelSchema`	A ZodType Object		Yes
`colGutter`	Gutter of columns	'sm'
`modelValue`	Bind formData
`readonly`	Make all fields readonly	false
`disable`	Make all fields disabled	false
`loading`	Bind loading prop buttons	false
`fieldWrapper`	Wrapper around all fields	'div'

Event
`submit`	Returns validated formData if valid
`reset`	Reset formData to defaultValues

Slot
`top`	Top slot for extra content
`bottom`	Bottom slot for extra content
`[scope]`	Overwrite schema component

AppFormSchemaField interface

Prop		Default	Required
`scope`	Object path i.e 'obj.value'		Yes
`cols`	Span number of cols (max 12)	'cols-auto'
`component`	Field component		Yes
`column`	Column position in row	1
`transform`	Transform value function before setting to modelValue
`defaultValue`	Default value of field if not specified in AppForm modelValue prop		Yes
`componentProps`	Props to add to component		Yes

AppSelect

Easy to use quasar q-select with filtering, add new value, checkbox list.

<script setup lang="ts">
import { ref } from 'vue'
import { AppSelect } from 'vue-app-form'

const model = ref([])
const options = [
   {
      value: 1,
      label: 'Test',
      // optional
      caption: 'Caption'
      disable: true
   },
   {
      value: 2,
      label: 'Test 2',
   }
]
</script>

<template>
  <app-select v-model="model" multiple :options="options" new-value />
</template>