DOCSEARCHbyAlgolia
Submit Docs

Blitzar Documentation

website·Indexed 32 days ago

https://blitzar.cycraft.co

A Vue component library for generating forms and data tables based on JSON schemas. Includes BlitzForm for form generation, BlitzTable for data tables, and BlitzListForm for list-based input forms.

Tokens
3.5K
Snippets
18
Records
29
Agent score
61%

What's inside Blitzar

  1. Overview of BlitzTable

    <BlitzTable /> is a data table component that utilizes the same schema syntax as BlitzForms to define columns. A single schema can be used to generate the table columns, fields for card-based grid views, and editable forms within dialogs when a row is clicked. By default, the table displays all rows without pagination and all rows are sortable.

  2. Generate forms using JSON schemas with Blitzar

    Blitzar allows developers to generate entire forms based on a simple JSON schema. It is flexible and supports all Vue components and all HTML elements. It also supports arrow functions to implement validation, conditional fields, and dynamic prop changes.

  3. Implement a dynamic list form with BlitzListForm

    The <BlitzListForm /> component is used to create forms that act as lists for user input (e.g., a list of student names). It automatically populates the next empty row when a user provides input and saves the resulting data as an array. It can be used as a standalone component or nested inside a BlitzForm between other fields. Rows are defined using the same schema syntax as BlitzForm.

  4. Use custom Vue components in BlitzForm

    BlitzForm allows you to use your own Vue components as form fields. To do this, specify the component name in the schema.

    Critical Requirement: Components used within a BlitzForm schema must be registered globally in the Vue application. If local registration is required, refer to the Advanced > Using Locally Registered Components documentation.

    const schema = [
  {
    id: 'name',
    label: 'Name',
    component: 'MyInput', // Must be globally registered
  },
]

  5. Implement row selection with checkboxes

    To enable row selection, add a column to the schema with the id set to ROW_SELECTION_ID (or the string 'BLITZ-TABLE-ROW-SELECTION'). Every object in the rows array must have an id prop. You can provide your own checkbox component or use a standard HTML5 checkbox input.
    import { ROW_SELECTION_ID } from 'blitzar'
import 'blitzar/dist/style.css'

const schemaColumns = [
  {
    id: ROW_SELECTION_ID, // or 'BLITZ-TABLE-ROW-SELECTION'
    component: 'input',
    type: 'checkbox',
  },
];

  6. Use locally registered components in BlitzForm schema

    By default, BlitzForm expects components to be registered globally because schemas are often stored in databases. To use a locally imported Vue component, you must wrap the component instance in markRaw to prevent Vue from attempting to make the component definition reactive.
    import { markRaw } from 'vue'
import MyInput from './MyInput.vue'

const schema = [
  {
    id: 'name',
    label: 'Name',
    component: markRaw(MyInput),
  },
]

  7. Create Computed Field Values in BlitzForm

    Computed Field Values are fields whose values are derived from other form data. There are three primary methods to implement them depending on whether the value needs to be emitted/saved to a database.
    // Method 1: Using parseValue (UI only)
// The value is synced in the UI but NOT emitted in @update:modelValue or @save.
{
  id: 'fullName',
  component: 'input',
  parseValue: (val, { formData }) => `${formData.firstName || ''} ${formData.lastName || ''}`
}

// Method 2: Using updateField in events (Database/Event compatible)
// Triggered by other fields to update the computed field's value.
{
  id: 'firstName',
  events: {
    'update:modelValue': (val, {formData, updateField}) => {
      const { lastName = '' } = formData
      const value = `${val} ${lastName}`.trim()
      updateField({ id: 'fullName', value })
    }
  }
}

// Method 3: Combining parseValue & updateField (Self-contained & Database compatible)
// The logic is contained within the computed field itself.
{
  id: 'fullName',
  component: 'input',
  parseValue: (val, {formData, updateField}) => {
    const newValue = `${formData.firstName || ''} ${formData.lastName || ''}`.trim()
    if (val !== newValue) updateField({ id: 'fullName', value: newValue })
    return newValue
  },
  showCondition: false // Optional: hide the field while still saving data
}

  8. Install BlitzForm for Vue 3

    Install the blitzar package via npm. Components must be imported locally and the minimal CSS file must be included to ensure styles are applied without polluting the global scope.
    import { BlitzTable, BlitzListForm } from 'blitzar'
import 'blitzar/dist/style.css'

export default {
  components: {
    BlitzTable,
    BlitzListForm
  },
}

  9. Create combined columns in BlitzTable

    Combined columns display data derived from multiple fields. These columns do not require an id and use a function that receives the current value and the formData object to calculate the display string. Combined columns support sorting and searching.
    const schemaColumns = [
  // no 'id' required for the combined column
  { label: 'Full Name', value: (val, { formData }) => `${formData.firstName} ${formData.lastName}` },
];

  10. Manage form data and state in BlitzForm

    There are three primary ways to retrieve and manage data from a BlitzForm:

    1. v-model: Pass an empty object to v-model. BlitzForm will populate this object using the field id as the key and the user input as the value.
    2. @updateField event: Triggers on every field change. Payload: {id, value}.
    3. @save event: Triggers when the save action button is pressed. Payload: {newData, oldData}.

  11. Insert non-input HTML5 elements into a form schema

    You can use non-input HTML5 elements (like p, div, a, ul) to add context or layout to a form. For these elements, use the slot prop to provide the content.
    const schema = [
  {
    label: `What's your nickname?`,
    id: 'name',
    component: 'input',
  },
  {
    component: 'p',
    slot: 'It can be anything!',
  },
]

  12. Access nested data in BlitzTable columns

    BlitzTable columns support dot-notation in the id field to access nested properties within the rows data array.
    const rows = [
  { name: { first: 'Luca', last: 'Ban' } }
];

const schemaColumns = [
  { id: 'name.first', label: 'First Name' },
  { id: 'name.last', label: 'Last Name' },
];