Page Components

This is an extension package for @lefapps/forms.

Install

npm install @lefapps/forms-pages --save

Usage

import { EasyForm } from '@lefapps/forms'
import { Components, Decorators } from '@lefapps/forms-pages'

const MyForm = new EasyForm()

// Use all provided extensions
Object.keys(Components).forEach(component =>
  MyForm.addComponent(component, Components[component]))
Object.keys(Decorators).forEach(decorator =>
  MyForm.addDecorator(decorator, Decorators[decorator]))

// OR use some
['markdown'].forEach(component =>
  MyForm.addComponent(component, Components[component]))

const Form = MyForm.instance()
Form.displayName = 'EasyForm'

const FormEditor = MyForm.editor()
FormEditor.displayName = 'EasyFormEditor'

export default Form
export { Form, FormEditor }

You can the use the <Form> component as described in @lefapps/forms.

Extensions

| name | type | description | | :---------------------------: | :-------: | :----------------------------------------- | | buttons | component | Inserts submit and other buttons | | markdown | component | Display MarkDown content | | tangential | component | Display Aside content | | video | component | Full width video | | question | component | Predefined question types | | | | columns | decorator | simplification of default layout decorator | | name | decorator | add name field to elements |

Buttons

Renders buttons inline.

const config = {
  type: 'buttons',
  types: ['reset', 'cancel', 'submit']
}

Note: when using the type submit , you can use the onSubmit handler on the <Form> component which returns the model.

MarkDown

Renders a markdown string provided by content .

const config = {
  type: 'markdown',
  content: '### Title\n\nI am paragraph with a [link](#title).\n\n>Hello World!'
}

Tangential

Renders a markdown string provided by content inside a aside element with an optional marker symbol.

Note: the marker is attached as a data-marker attribute to the aside element to give you plenty of room to position it using pseudo-elements.

const config = {
  type: 'tangential',
  marker: '', // any symbol, rendered as text, e.g. "?" or "i"
  content: 'Want to know more about forms? Checkout [npm](https://www.npmjs.com/package/@lefapps/forms).'
}

Video

Renders an embedded video using the full available width.

const config = {
  type: 'video',
  url: 'youtube or vimeo URL'
}

Question

Renders an input field defined by questionType .

const configOpen = {
  name: 'modelKey',
  type: 'question',
  questionType: 'open'
}

const configMC = {
  name: 'modelKey',
  type: 'question',
  questionType: 'radio',
  label: 'Question?',
  options: ['Answer 1', 'Answer 2', 'Answer 3']
  options: [
    { _id: 'answer-1', default: 'Answer 1', score: 1 },
    { _id: 'answer-2', default: 'Answer 2', score: 0 },
    { _id: 'answer-3', default: 'Answer 3', score: 0 }
  ]
}

| questionType | requiredfields | optionalfields | result | | :----------: | :----------------: | :-------------------------------------------------: | :-------------------------------------- | | bool | | | Radio input with Yes and No | | open | | mdattributes.rows | Textarea, with optional markdown editor | | number | | attributes.minattributes.maxattributes.step | input | | mc | options | | Multiple answers, multiple selectable | | radio | options | | Multiple answers, one selectable |

Columns

Note: we advise to remove the default layout decorators before using this one to avoid layout conflicts.

MyForm.removeDecorator('layout')

Name

Updates the default name decorator with modified label and added help text.