quasar-form-builder v2.0.0

quasar-form-builder

This package just get you props and then give you form with inputs (it's created with FormBuilder component) or just any input you need.

install

npm i quasar-form-builder

Usage

To use it in vue files, you need to import the component you want and use it like a regular component, for example:

<template>
  <form-builder />
</template>

<script>
import { FormBuilder } from 'quasar-form-builder';
export default {
  components: { FormBuilder },
};
</script>

Generator

Generator is a visual way to make forms to use in form builder. You can build your forms using generator and then import the json generated to your project. to use it in your project, just import it and use it like so:

<template>
  <form-builder-generator />
</template>

<script>
import { FormBuilderGenerator } from 'quasar-form-builder';
export default {
  components: { FormBuilderGenerator },
};
</script>

Then after building your form, you can copy the json of the form, and use it in your project. Also, if you have a form you want to update, you can import it in generator and work on it.

Features:

• FormBuilder

important !

For any input you want,you have to specify its type.

<template>
  <form-builder v-model:value="inputs" />
</template>

<script>
import { FormBuilder } from 'quasar-form-builder';
export default {
  components: { FormBuilder },
  data() {
    return {
      inputs: [
        {
          type: 'Input', // Avatar, date, dateTime and etc.
          label: 'Label',
          //and other props of FormBuilderInput component
        },
        {
          type: 'date',
          label: 'Label' /*and other props of FormBuilderDateTime component*/,
        },
        {
          type: 'Slider',
          label: 'Label' /*and other props of FormBuilderSlider component*/,
        },
      ],
    };
  },
};
</script>

• FormBuilderAvatar

  • types
    • Avtar

• FormBuilderCheckbox

  • types
    • Checkbox

• FormBuilderDateTime

  • types

    • date

      props	default	type
      value	' '	Object, Array
      calendar	persian	String
      multiple	false	Boolean
      disable	false	Boolean

    • time

      props	default	type
      value	' '	Object, Array
      disable	false	Boolean

    • dateTime

      props	default	type
      value	' '	Object, Array
      calendar	persian	String
      multiple	false	Boolean
      disable	false	Boolean

    • dateRange

      props	default	type
      value	' '	Object, Array
      calendar	persian	String
      multiple	false	Boolean
      disable	false	Boolean
      range	true	Boolean

    • dateMultipleRange

      props	default	type
      value	' '	Object, Array
      calendar	persian	String
      multiple	true	Boolean
      disable	false	Boolean
      range	true	Boolean

• FormBuilderFile

  • types
    • File

• FormBuilderInput

  • types
    • Input

• FormBuilderInputEditor

  • types
    • InputEditor

• FormBuilderOptionGroup

  • types
    • date
    • OptionGroup
    • optionGroupRadio
    • optionGroupCheckbox
    • optionGroupToggle

• FormBuilderSlider

  • types
    • Slider

• FormBuilderRangeSlider

  • types
    • RangeSlider

• FormBuilderSelect

  • types
    • Select

example of options prop usage :

<template>
  <form-builder v-model:value="inputs" />
</template>

<script>
import { FormBuilder } from 'quasar-form-builder';
export default {
  components: { FormBuilder },
  data() {
    return {
      inputs: [
        {
          type: 'Select', // Avatar, date, dateTime and etc.
          label: 'Label',
          options: [
            { label: 'some label', value: 'some value' }, //for first option of select input
            { label: 'some label', value: 'some value' }, //for second option of select input
            { label: 'some label', value: 'some value' }, //for third option of select input
          ],
          optionLabel: 'label',
          optionValue: 'value',
          //and other props of FormBuilderSelect component
        },
      ],
    };
  },
};
</script>