@quickflo/quickforms-quasar

Quasar UI components for QuickForms with beautiful, pre-styled form fields.

Installation

pnpm

pnpm add @quickflo/quickforms @quickflo/quickforms-vue @quickflo/quickforms-quasar

npm

npm install @quickflo/quickforms @quickflo/quickforms-vue @quickflo/quickforms-quasar

yarn

yarn add @quickflo/quickforms @quickflo/quickforms-vue @quickflo/quickforms-quasar

Quick Start

<script setup lang="ts">
import { ref } from 'vue'
import { DynamicForm } from '@quickflo/quickforms-vue'
import { createQuasarRegistry } from '@quickflo/quickforms-quasar'
import type { JSONSchema } from '@quickflo/quickforms'

const registry = createQuasarRegistry()

const schema: JSONSchema = {
  type: 'object',
  properties: {
    name: { type: 'string', title: 'Full Name' },
    email: { type: 'string', format: 'email', title: 'Email' },
    bio: { type: 'string', format: 'textarea', title: 'Bio' }
  },
  required: ['name', 'email']
}

const formData = ref({})
</script>

<template>
  <DynamicForm 
    :schema="schema" 
    v-model="formData"
    :options="{ registry }"
  />
</template>

Components

The Quasar package provides pre-built Quasar-wrapped components:

• QuasarStringField - QInput for text, email, URL, password, textarea
• QuasarNumberField - QInput with type="number"
• QuasarBooleanField - QCheckbox
• QuasarEnumField - QSelect for enums
• QuasarDateField - QInput with QDate popup
• QuasarTimeField - QInput with QTime popup
• QuasarDateTimeField - QInput with QDate and QTime popups
• QuasarObjectField - QExpansionItem for nested objects
• QuasarArrayField - QCard with add/remove buttons
• QuasarOneOfField - QSelect for conditional schemas

Configuration Options

Global Defaults

Set defaults that apply to all components via componentDefaults. The values available are just a passthrough of the respective Quasar component's props. For example, the input accepts any valid property from QInputProps:

import { createQuasarRegistry } from '@quickflo/quickforms-quasar'
import type { QuasarFormOptions } from '@quickflo/quickforms-quasar'

const registry = createQuasarRegistry()

const options: QuasarFormOptions = {
  registry,
  componentDefaults: {
    global: {
      outlined: true,   // All components use outlined style
      dense: true,      // All components use dense mode
      color: 'primary'  // All components use primary color
    },
    input: {
      clearable: true   // All text inputs get clear button
    },
    select: {
      useChips: true    // Enum fields display as chips
    },
    checkbox: {
      color: 'secondary'
    }
  }
}

Per-Field Overrides

Use x-quasar-props to pass native Quasar component props. Similar to the componentDefaults in that the properties available are just a passthrough of the respective Quasar component:

{
  type: 'string',
  format: 'textarea',
  title: 'Description',
  'x-quasar-props': {
    rows: 10,
    dense: true,
    outlined: true,
    color: 'primary'
  }
}

QuickForms Convenience Features

Use x-quickforms-quasar for convenience features (not native Quasar props):

Icons

{
  type: 'string',
  title: 'Email',
  'x-quickforms-quasar': {
    prependIcon: 'mail',
    iconColor: 'primary',
    iconSize: 'md'
  }
}

Icon Properties:

• prependIcon - Icon on left side
• appendIcon - Icon on right side (not available for password/select)
• iconColor - Quasar color (default: 'grey-7')
• iconSize - Size: 'xs', 'sm', 'md', 'lg', 'xl' (default: 'sm')

Array Buttons

Customize array field buttons with native QBtn props:

{
  type: 'array',
  items: { type: 'string' },
  title: 'Tags',
  'x-quickforms-quasar': {
    addButtonPosition: 'top-right',
    addButton: {
      label: 'Add Tag',
      icon: 'add_circle',
      color: 'secondary',
      size: 'md'
    },
    removeButton: {
      icon: 'delete',
      color: 'negative'
    }
  }
}

Array Properties:

• addButtonPosition - Position: 'top-left', 'top-right', 'bottom-left', 'bottom-right'
• addButton - Native QBtn props (label, icon, color, size, push, fab, etc.)
• removeButton - Native QBtn props

Supported Formats

QuickForms Quasar supports all standard JSON Schema formats:

Standard Formats (with validation)

• email - Email validation (RFC 5321)
• url / uri - URL validation (RFC 3986)
• date - Date picker (YYYY-MM-DD)
• time - Time picker
• date-time - Date and time picker

Custom UI Hints (no validation)

• password - Password input with show/hide toggle
• textarea - Multi-line text area

DateTime Customization

Datetime fields default to 12-hour AM/PM format. Customize per-field:

{
  type: 'string',
  format: 'date-time',
  title: 'Event Time',
  'x-quasar-props': {
    format24h: true,
    withSeconds: true,
    mask: 'YYYY-MM-DD HH:mm:ss'
  }
}

Or globally:

{
  componentDefaults: {
    datetime: {
      format24h: true,
      dateMask: 'MM/DD/YYYY',
      timeMask: 'HH:mm'
    }
  }
}

WARNING

The default 12-hour format (YYYY-MM-DD hh:mm A) won't pass JSON Schema format: "date-time" validation, which requires ISO 8601. Transform to ISO 8601 before submission if needed.

Theming

Quasar components automatically inherit your app's theme. Options:

1. Quasar SASS Variables - Customize quasar.variables.sass
2. Component Defaults - Use componentDefaults.global
3. Dark Mode - Automatic via Quasar's Dark plugin

const options: QuasarFormOptions = {
  registry: createQuasarRegistry(),
  componentDefaults: {
    global: {
      outlined: true,
      dense: true,
      color: 'primary'
    }
  }
}

Complete Options Reference

QuasarFormOptions

Extends standard FormOptions with Quasar-specific configurations:

interface QuasarFormOptions extends FormOptions {
  registry: ComponentRegistry
  componentDefaults?: {
    global?: Record<string, any>      // Applied to ALL components
    input?: Record<string, any>       // QInput defaults
    select?: Record<string, any>      // QSelect defaults
    checkbox?: Record<string, any>    // QCheckbox defaults
    date?: Record<string, any>        // QDate defaults
    time?: Record<string, any>        // QTime defaults
    datetime?: Record<string, any>    // DateTime field defaults
  }
  quickformsDefaults?: {
    input?: {
      iconColor?: string
      iconSize?: string
    }
    array?: {
      addButtonPosition?: string
      addButton?: Record<string, any>
      removeButton?: Record<string, any>
    }
  }
}

For base FormOptions, see Form Options API.

Examples

See Examples for complete working examples with Quasar.

API Reference

createQuasarRegistry()

Creates a component registry with all Quasar components registered.

Returns: ComponentRegistry<Component>

Example:

import { createQuasarRegistry } from '@quickflo/quickforms-quasar'
const registry = createQuasarRegistry()

Next Steps

• Getting Started - Complete tutorial
• Form Options API - Base options reference
• Examples - Working examples