Summary
Normally, the user cannot recognize to which area the respective building block belongs - but this is also not relevant for the user. For a developer, however, it is, because each of these building blocks fulfills different requirements from a technical point of view and can be implemented and used in different ways.
- wui Elements. The static markup (HTML/CSS) of UI building block that can be used recurrently in different places across the platform.
- vue Components. Interactive and dynamic UI building block based on wui Elements but extended by a functionality.
- Form Generator Fields. Fields are based on vue Components. For better reusability, these rather generic components are simplified for specific use cases by defining only the most necessary parameterization options.
wui Elements
We speak of "wui Elements" when we are talking about pure HTML and/or CSS. A wui Element can be a simple class, like ".wui-color--primary", but also the combination of CSS and HTML as in a ".wui-growl" for example. It is also possible to combine different Elements into one new Element.
The most obvious difference to other building blocks in wui is that Elements do not contain any functionality or logic. To stay with the wui-growl-example - when a growl fades in or out, or which growl appears at all, is not defined by the wui Element, but rather by the vue component (see next section). Elements are static and are used only for the purpose of display.
They are the smallest unit and serve as a starting point for most UI building blocks. For example, when we say "something is in wui", we mean that the styling, i.e. the rules for the visual appearance of a UI building block, is defined in wui.css.
vue Components
Within a vue Component, the static HTML/ CSS (wui Element) is extended by functionality. A vue Component goes beyond the mere display and offers the user the ability to interact with the UI. Most of what the user sees in wescale are vue Components. However, many of the vue Components are designed for a specific context and cannot (yet) be reused out of the box. Our goal is to make all vue Components available as reusable building blocks within the Monorepo. For a list of currently available vue Components follow the link.
Form Generator Fields
In the context of the Form Generator we speak of "Fields". Usually a Field bases on existing vue Components like an input field or a select. However, the functionality (such as choices, validators, onChangeEvents etc.) is no longer within the vue Component, but is provided by the base classes and validators of the Form Generator. With the help of the Form Generator, a Field can be created which, in the best case, no longer needs to be programmed for implementation in a form, but only needs to be declared.