Documentation
Tutorials
Contributing Documentation For Developers
Test Results Test Coverage Github Repository Github Profile

Global

Methods

# hidden() → {function}

Makes a property invisible in all CRUD operations This decorator is a convenience wrapper around hideOn that hides a property during all CRUD operations (CREATE, READ, UPDATE, DELETE).

Decorator that completely hides a property in all UI operations

sequenceDiagram participant Model participant hidden participant hideOn participant RenderingEngine Model->>hidden: Apply to property hidden->>hideOn: Call with all operations hideOn->>Model: Add hidden metadata RenderingEngine->>Model: Check if property should be hidden Model->>RenderingEngine: Return all operations RenderingEngine->>UI: Always hide property

View Source ui/decorators.ts, line 45

A property decorator function

function
Example
// Completely hide the internalId field in the UI
class Product {

# hideOn(operations) → {function}

Controls property visibility based on operation type This decorator allows you to specify which CRUD operations should hide a property in the UI. The property will only be visible during operations not specified.

Decorator that hides a property during specific CRUD operations

sequenceDiagram participant Model participant hideOn participant RenderingEngine participant UI Model->>hideOn: Apply to property hideOn->>Model: Add hidden metadata RenderingEngine->>Model: Check if property should be hidden Model->>RenderingEngine: Return hidden operations RenderingEngine->>UI: Render or hide based on current operation
Parameters:
Name Type Description
operations

The CRUD operations during which the property should be hidden

View Source ui/decorators.ts, line 7

A property decorator function

function
Example
// Hide the password field during READ operations
class User {

# renderedBy(engine) → {function}

Associates a model with a specific rendering engine implementation This decorator allows you to override the default rendering engine for a specific model class, enabling different rendering strategies for different models.

Decorator that specifies which rendering engine to use for a model

sequenceDiagram participant System participant renderedBy participant Model participant RenderingEngine System->>renderedBy: apply to Model renderedBy->>Model: adds engine metadata Model->>RenderingEngine: uses specified engine RenderingEngine->>System: renders with custom engine
Parameters:
Name Type Description
engine string

The name of the rendering engine to use

View Source model/decorators.ts, line 58

A class decorator function

function
Example
// Specify a custom rendering engine for a model

# uichild(clazz, tag, propsopt, serializeopt) → {function}

Defines how a parent component should render the child model when nested.

This decorator is used to decorate properties that are nested models. When applied, it allows overriding the default tag of the child model with the provided one, enabling different rendering behavior when the model acts as a child (nested) compared to when it is rendered as the parent model.

It requires the class to be decorated with @uimodel.

Decorator that maps a nested model property to a UI component property.

sequenceDiagram participant Model participant uichild participant RenderingEngine participant Component Model->>uichild: Apply to property uichild->>Model: Add child metadata RenderingEngine->>Model: Get child metadata Model->>RenderingEngine: Return prop name, stringify flag, and child tag override RenderingEngine->>Component: Pass property with specified name and render with overridden tag if nested
Parameters:
Name Type Attributes Default Description
clazz string

The model class name to pass to the component (defaults to the property key).
tag string

The HTML element or component tag name to override the UI tag of the nested model
props Record.<string, any> <optional>

Additional properties to pass to the element
serialize boolean <optional>
 false

Whether the property should be serialized

View Source ui/decorators.ts, line 189

A property decorator function.

function
Example
// Map a nested model to a component property with a different tag when nested

# uielement(tag, propsopt, serializeopt) → {function}

Maps a model property to a specific UI element with custom properties This decorator allows you to define which HTML element or component should be used to render a specific property, along with any additional properties to pass to that element.

Decorator that specifies how a property should be rendered as a UI element

sequenceDiagram participant Model participant uielement participant RenderingEngine participant UI Model->>uielement: Apply to property uielement->>Model: Add element metadata RenderingEngine->>Model: Get element metadata Model->>RenderingEngine: Return tag and props RenderingEngine->>UI: Render with specified element
Parameters:
Name Type Attributes Default Description
tag string

The HTML element or component tag name to use for rendering
props Record.<string, any> <optional>

Additional properties to pass to the element
serialize boolean <optional>
 false

Whether the property should be serialized

View Source ui/decorators.ts, line 83

A property decorator function

function
Example
// Render a property as a text input
class LoginForm {

# uilistitem(tagopt, propsopt) → {function}

Specifies how a model should be rendered when displayed in a list context This decorator applies metadata to the class that enables it to be rendered as a list item by the UI rendering engine. The model will be rendered with the specified tag and properties when it appears in a list.

Decorator that tags a model as a list item for UI rendering

sequenceDiagram participant System participant uilistitem participant Model participant RenderingEngine System->>uilistitem: apply to Model uilistitem->>Model: adds list item metadata Model->>RenderingEngine: uses list item metadata when in list context RenderingEngine->>System: renders with list item styling
Parameters:
Name Type Attributes Description
tag string <optional>

The HTML tag to use when rendering this model as a list item (defaults to class name)
props Record.<string, any> <optional>

Additional properties to pass to the rendered list item element

View Source model/decorators.ts, line 93

A class decorator function

function
Example
// Basic usage with default tag (class name)

# uilistprop(propNameopt, propsopt) → {function}

Specifies how a property should be rendered in a list context This decorator allows you to define how a model property containing a list should be rendered. It requires the class to be decorated with @uilistitem.

Decorator that maps a model property to a list item component

sequenceDiagram participant Model participant uilistprop participant RenderingEngine participant ListContainer participant ListItems Model->>uilistprop: Apply to property uilistprop->>Model: Add list prop metadata RenderingEngine->>Model: Get list prop metadata Model->>RenderingEngine: Return prop name and container props RenderingEngine->>ListContainer: Create container with props RenderingEngine->>ListItems: Render each item using @uilistitem ListContainer->>RenderingEngine: Return rendered list
Parameters:
Name Type Attributes Description
propName string <optional>

The name of the property to pass to the list component (defaults to the property key)
props Record.<string, any> <optional>

Additional properties to pass to the list container

View Source ui/decorators.ts, line 254

A property decorator function

function
Example
// Define a list property with custom rendering

# uimodel(tagopt, propsopt) → {function}

Adds rendering capabilities to a model class by providing a render method This decorator applies metadata to the class that enables it to be rendered by the UI rendering engine. The model will be rendered with the specified tag and properties.

Decorator that tags a class as a UI model

sequenceDiagram participant System participant uimodel participant constructor participant instance System->>uimodel:do(constructor) uimodel->>constructor: Executes the constructor constructor->>uimodel: returns instance uimodel->>instance: adds the render method uimodel->>System: returns UIModel instance
Parameters:
Name Type Attributes Description
tag string <optional>

The HTML tag to use when rendering this model (defaults to class name)
props Record.<string, any> <optional>

Additional properties to pass to the rendered element

View Source model/decorators.ts, line 5

A class decorator function

function
Example
// Basic usage with default tag (class name)

# uiprop(propNameopt, stringifyopt) → {function}

Specifies how a property should be passed to a UI component This decorator allows you to define how a model property should be mapped to a property of the UI component when rendering. It requires the class to be decorated with @uimodel.

Decorator that maps a model property to a UI component property

sequenceDiagram participant Model participant uiprop participant RenderingEngine participant Component Model->>uiprop: Apply to property uiprop->>Model: Add prop metadata RenderingEngine->>Model: Get prop metadata Model->>RenderingEngine: Return prop name and stringify flag RenderingEngine->>Component: Pass property with specified name
Parameters:
Name Type Attributes Default Description
propName string <optional>

The name of the property to pass to the component (defaults to the property key)
stringify boolean <optional>
 false

Whether to stringify the property value

View Source ui/decorators.ts, line 137

A property decorator function

function
Example
// Map model properties to component properties