Skip to content

kerasus/quasar-form-builder

Repository files navigation

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>

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages