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>