Sunday, April 12, 2020

Comp-Elem Modes

There are six basic modes for components:

  • *hidden*: component is not in DOM and therefore not visible to user;
  • *plain*: component (rather it's text or value) is represented by plain text;
  • *inactive*: component is read-only or disabled, but as a form control;
  • *normal*: component is an editable form control;
  • *expected*: component is marked as "expected", which is just visual distinction and overall works just as “normal”;
  • *required*: component is required to have a value before form processing.

To make things easier, if you need to set a particular mode to multitude of elements, you can simply set a mode to their parent component, instead of every element separately.

But there are cases, in which you probably don't want to override the mode: if you have an element defined as inactive, like a computed value, you don't want it to suddenly became required. And if it's hidden, it should stay that way.

From such rules emerged the following table:


Results of mode overrides by component (rows) for elem modes (columns).

I did several tests and it works as expected. If your expectations are different, you can always set mode directly to elements and omit using bulk mode assignments via parent components.