Skip to content

Latest commit

 

History

History
257 lines (205 loc) · 9.06 KB

README.md

File metadata and controls

257 lines (205 loc) · 9.06 KB
Raw

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>