Skip to content

Archer-Thane/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>

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

Releases

No releases published

Packages

No packages published

Languages

  • Vue 92.6%
  • JavaScript 6.1%
  • Other 1.3%