vue-app-form

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>