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 {

# uihandlers(propsopt) → {function}

Specifies event handlers that should be attached to the rendered model This decorator allows you to define event handlers that will be automatically attached to the rendered UI element. The handlers are passed as properties to the rendering engine.

Decorator that adds event handlers to a UI model

sequenceDiagram participant System participant uihandlers participant Model participant RenderingEngine participant UI System->>uihandlers: apply to Model uihandlers->>Model: adds handler metadata Model->>RenderingEngine: requests rendering with handlers RenderingEngine->>UI: renders element with event handlers attached UI->>Model: triggers handlers on events
Parameters:
Name Type Attributes Description
props Record.<string, any> <optional>

Object containing event handler functions and other properties

View Source model/decorators.ts, line 150

A class decorator function

function
Example
// Add event handlers to a model

# uilayout(tag, colsopt, rowsopt, breakpointopt) → {function}

Combines UI model functionality with layout grid configuration This decorator creates a UI model that acts as a layout container with specified column and row configurations. It's a convenience decorator that combines

Decorator that creates a layout container with grid specifications

sequenceDiagram participant System participant uilayout participant uimodel participant Model participant RenderingEngine System->>uilayout: apply to Model uilayout->>uimodel: call with layout props uimodel->>Model: adds model metadata with layout config Model->>RenderingEngine: requests rendering as layout container RenderingEngine->>System: renders grid layout with specified dimensions
Parameters:
Name Type Attributes Default Description
tag string

The HTML tag to use for the layout container
cols number <optional>
 1

Number of columns in the grid layout
rows number | Array.<string> <optional>
 1

Number of rows or array of row definitions
breakpoint UIMediaBreakPoints <optional>
 'm'

Media breakpoint for responsive behavior

View Source model/decorators.ts, line 211

A class decorator function

function
Example
// Create a simple 2-column layout

# uilayoutitem(col, rowopt, propsopt) → {function}

Specifies the column and row position for a property in a UI layout grid This decorator allows you to define the specific position of a property within a grid-based layout system. It specifies which column and row the property should occupy when rendered in the UI.

Decorator that positions a property in a specific grid layout position

sequenceDiagram participant Model participant uilayoutitem participant RenderingEngine participant LayoutContainer Model->>uilayoutitem: Apply to property uilayoutitem->>Model: Add layout item metadata RenderingEngine->>Model: Get layout item metadata Model->>RenderingEngine: Return column, row, and props RenderingEngine->>LayoutContainer: Position element at grid coordinates LayoutContainer->>RenderingEngine: Return positioned element
Parameters:
Name Type Attributes Default Description
col number

The column position in the grid layout
row number <optional>
 1

The row position in the grid layout (defaults to 1)
props Record.<string, any> <optional>
 {}

Additional properties to pass to the layout item

View Source ui/decorators.ts, line 312

A property decorator function

function
Example
// Position properties in a grid layout

# 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