@decision6/formly-modal

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