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

props	default	type
value	[ ]	Array
disable	false	Boolean

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

props	default	type
size	50px	String
fontSize	14px	String
color	primary	String
textColor	white	String

• FormBuilderCheckbox

  • types
    • Checkbox

props	default	type
value	' '	Object, String, Array, Number, Boolean
label	' '	String
color	primary	String
disable	false	Boolean
trueValue	true	Object, String, Array, Number, Boolean
falseValue	false	Object, String, Array, Number, Boolean

• 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

props	default	type
value	' '	Object, String, Array, Number, Boolean
label	' '	String
disable	false	Boolean
clearable	true	Boolean
src	' '	String, Number, Boolean, Array

• FormBuilderInput

  • types
    • Input

props	default	type
value	' '	String, Number, Boolean
label	' '	String
disable	false	Boolean

• FormBuilderInputEditor

  • types
    • InputEditor

props	default	type
value	' '	String, Number, Boolean
label	' '	String
disable	false	Boolean

• FormBuilderOptionGroup

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

props	default	type
value	' '	Object, String, Array, Number, Boolean
options	[]	Array

• FormBuilderSlider

  • types
    • Slider

props	default	type
value	0	Number
min	0	Number
max	100	Number
disable	false	Boolean

• FormBuilderRangeSlider

  • types
    • RangeSlider

props	default	type
value	{ min: 9, max: 35 }	Object
label	' '	String
disable	false	Boolean
range	true	Boolean

• FormBuilderSelect

  • types
    • Select

props	default	type
value	[]	Array, String, Number, Boolean
options	[]	Array
optionDisable	disable	String
optionValue	value	String
optionLabel	label	String
label	' '	String
disable	false	Boolean
multiple	false	Boolean
useChips	false	Boolean

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>