8.2.3 • Published 9 months ago

@exmg/exmg-form v8.2.3

Weekly downloads
83
License
MIT
Repository
github
Last release
9 months ago

<exmg-form> Published on npm

This component provides basic form functionality. It is made on top of <iron-form>.

You can put any children elements inside of it, but only elements implementing IronFormElementBehavior will be serialized. Also, any element implementing IronFormElementBehavior have to implement validate() method. In other case form will not be working.

Read more: IronFormElementBehavior (https://github.com/PolymerElements/iron-form-element-behavior).

Installation

npm install @exmg/exmg-copy-to-clipboard

Example Usage

Standard

<exmg-form
  @submit="${this.submit}"
  @cancel="${this.cancel}"
  ?hide-cancel-button="${false}"
  submit-button-copy="Submit"
  ?inline="${false}"
>
  <paper-input label="text input" required></paper-input>
  <paper-input label="text input" value="pre-filled"></paper-input>
  <paper-input label="password input" type="password"></paper-input>
  <paper-input label="disabled input" disabled value="batman"></paper-input>
  <paper-input name="name" label="Summary" required always-float-label></paper-input>
  <paper-input
    name="estimate"
    label="Estimates"
    type="number"
    always-float-label
    style="max-width:180px;"
  ></paper-input>

  <paper-textarea label="autoresizing textarea input"></paper-textarea>

  <exmg-paper-combobox label="Project" name="combobox" style="max-width:280px;" always-float-label required>
    <paper-item>PlayToTV</paper-item>
    <paper-item>Website</paper-item>
  </exmg-paper-combobox>
  <p class="help">
    Some issue types are unavailable due to incompatible field configuration and/or workflow associations.
  </p>
  <hr />
  <p class="help">Start typing to get a list of possible matches.</p>
  <exmg-paper-token-input name="tokens" label="Components" always-float-label>
    <paper-item>javascript</paper-item>
    <paper-item>css</paper-item>
  </exmg-paper-token-input>
  <p class="help">Start typing to get a list of possible matches or press down to select.</p>
  <p class="help">Estimated time needed to resolve this issue in hours.</p>
  <label>Message</label>
  <exmg-markdown-editor name="markdown" required>
    <marked-element markdown="# Hello Word!">
      <div slot="markdown-html"></div>
    </marked-element>
  </exmg-markdown-editor>
</exmg-form>

API

Slots

NameDescription
defaultForm input elements

Properties/Attributes

NameTypeDefaultDescription
hide-submit-buttonbooleanfalseOption to hide submit button
hide-reset-buttonbooleanfalseOption to hide reset button
submit-button-copystring'Submit'Default submit button copy
reset-button-copystring'Reset'Default reset button copy
disable-submit-no-changesbooleanfalseWith this option the disable button will be disabled while there are no changes in the form
bubblesbooleanfalseSetting this attribute will cause its
events to bubble to the window object

Methods

NameDescription
submitSubmit the form when it's valid
handleErrorError handler for form
resetResets the form and throws form-reset

Events

NameDescription
submitWhen submit button pressed. Will contain all form serialized data. Submit event will not fire when any of required fields are not set.
cancelWhen cancel button pressed.
dirtyWhen the user edit an editable in the form. Is thrown only once.

CSS Custom Properties

NameDescription
--exmg-form-internal-heightset the height of slot container - handy when wanting to control max-height of form.
--exmg-form-internal-padding-rightset the padding right for the form internal element.
--exmg-form-actions-padding-rightset the padding right for the actions buttons.
--exmg-form-actions-padding-bottomset the padding bottom for the actions buttons.

Additional references

8.2.3

9 months ago

8.2.2

9 months ago

8.2.1

9 months ago

8.2.0

9 months ago

9.0.9

1 year ago

9.0.10

1 year ago

9.0.8

1 year ago

9.0.7

1 year ago

9.0.6

1 year ago

9.0.5

1 year ago

9.0.4

1 year ago

9.0.3

1 year ago

9.0.1

1 year ago

8.1.40

2 years ago

8.1.37

2 years ago

8.1.36

2 years ago

8.1.39

2 years ago

8.1.38

2 years ago

8.1.31

2 years ago

8.1.33

2 years ago

8.1.32

2 years ago

8.1.35

2 years ago

8.1.20

3 years ago

8.1.22

3 years ago

8.1.24

3 years ago

8.1.23

3 years ago

8.1.17

4 years ago

8.1.9

4 years ago

8.1.11

4 years ago

8.1.10

4 years ago

8.1.13

4 years ago

8.1.12

4 years ago

8.1.15

4 years ago

8.1.14

4 years ago

8.1.16

4 years ago

8.1.0

4 years ago

8.0.1

4 years ago

8.0.2

4 years ago

8.0.0

4 years ago

3.0.1

4 years ago

3.0.0

5 years ago

2.2.5

5 years ago

2.2.4

5 years ago

2.2.3

6 years ago

2.2.2

6 years ago

2.2.1

6 years ago

2.2.0

6 years ago

2.1.2

6 years ago

2.1.1

6 years ago

2.1.0

6 years ago

2.0.10

6 years ago

2.0.9

6 years ago

2.0.8

6 years ago

2.0.7

6 years ago

2.0.6

6 years ago

2.0.5

6 years ago

2.0.4

6 years ago

2.0.3

6 years ago

2.0.2

6 years ago

2.0.1

6 years ago

2.0.0

6 years ago

1.6.2

6 years ago

1.6.1

6 years ago

1.6.0

6 years ago

1.5.0

6 years ago

1.4.0

6 years ago

1.3.2

6 years ago

1.3.1

6 years ago

1.3.0

6 years ago

1.2.0

6 years ago

1.1.0

6 years ago

1.0.0

6 years ago