@decision6/formly-modal

    4.0.0 • Public • Published

    formly modal

    A wrapper for Quasar QModal by using QFormly

    Requirements

    This package has as a dependencies:

    • Vue 2.5.x
    • Quasar 14.x
    • VueFormlyQuasar 2.x

    Install

    yarn add @decision6/formly-modal

    Usage

    This package exports a single component, FormlyModal. An example of use:

    import FormlyModal from '@decision6/formly-modal'
     
    export default {
      components: {
        FormlyModal
      }
    }
     
    <template>
      <FormlyModal />
    </template>

    FormlyModal component

    Properties

    Property Type Required Default Description
    model Object yes Form model
    fields Array no An array of objects with each field on your form.
    fieldsGroup Array no An array of objects to multicolumn form. See the section Multicolumns Form to more details
    title String yes Modal title
    size String no sm A size to modal. Accepts the following values: sm, lg, xlg, 2xlg
    height Number no 550 An specific height to modal
    toolbarColor String no primary A color option from Quasar Collor Pallete
    forceLoading Boolean no false Force loading state inside modal. This is useful when await async data to inside modal

    Vue Events

    Vue Event Description Payload
    @save Emitted when save button is clicked A function that should be called when the save execution is finished
    @open Emitted when open method is called
    @close Emitted when close method is called

    Multicolumns Form

    If only field property is setted, the component will understand that there are only form component. But, there are cases that use multiple forms in one. For this, use fieldsGroup,that is a array of objects with the following properties:

    {
      title: 'Box title',
      color: 'Background color for caption box',
      fields: [] // an array of objects for formly
    }

    Examples

    See the example of the two uses

    See the demo

    Component Methods

    Method Signature Description
    open open () {} open modal and emit event
    close close () {} close modal and emit event
    setModel setMethod (model, isUpdateBkp = false) {} update internalModel and optionally, the model backup

    Keywords

    none

    Install

    npm i @decision6/formly-modal

    DownloadsWeekly Downloads

    16

    Version

    4.0.0

    License

    MIT

    Unpacked Size

    42.4 kB

    Total Files

    26

    Last publish

    Collaborators

    • decision6