Forms Using the Quasar Preset

The styling of the Quasar form may conflict with the Vitepress styles

Source code

QuasarFormExample.vue

<template>
  <div class="q-mt-lg">
    <q-card class="q-pa-md">
        <Enforma
          :data="initialValues"
          :validator="validator"
          :submit-handler="handleSubmit"
        >
          <div class="row q-col-gutter-md">
            <div class="col-12 col-md-6">
              <QuasarField name="name" label="Full Name" />
            </div>
            <div class="col-12 col-md-6">
              <QuasarField name="email" label="Email Address" help="Don't worry, we don't SPAM" />
            </div>
            <div class="col-12 col-md-6">
              <QuasarField name="role" label="Role" input-component="select" :input-props="roleSelectProps" />
            </div>
            <div class="col-12 col-md-6">
              <QuasarField name="phone" label="Phone Number" :input-props="{ mask: '(###) ###-####' }" />
            </div>
            <div class="col-12">
              <QuasarField name="address" label="Address" :input-props="{ type: 'textarea', rows: 2 }" />
            </div>
            <div class="col-12 col-md-6">
              <QuasarField name="active" label="Active" input-component="toggle" />
            </div>
            <div class="col-12 col-md-6">
              <QuasarField name="newsletter" label="Subscribe to newsletter" input-component="toggle" />
            </div>
          </div>
        </Enforma>
      </q-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import {
  Enforma,
} from '@/index'
import { createEncolaValidator } from '@/validators/encolaValidator'
// Import Quasar components
import { QBtn, QCard } from 'quasar'
// We have to use the QuasarField due to how Quasar implements labels and hints
import QuasarField from '../../../src/presets/quasar/Field.vue'

const initialValues = {
  name: '',
  email: '',
  role: '',
  phone: '',
  address: '',
  active: true,
  newsletter: false
}

const validator = createEncolaValidator({
  name: 'required',
  email: 'required|email',
  role: 'required',
  phone: 'required'
})

const roleSelectProps = {
  options: [
    { value: 'admin', label: 'Administrator' },
    { value: 'user', label: 'Regular User' },
    { value: 'guest', label: 'Guest' }
  ],
  'emit-value': true,
  'map-options': true
}

const handleSubmit = (values) => {
  return new Promise((resolve) => {
    window.setTimeout(() => {
      alert('Form submitted with values: ' + JSON.stringify(values))
      resolve(true)
    }, 2000)
  })
}
</script>

<style scoped>
pre {
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  overflow: auto;
}
</style>