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 80

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 6

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 224

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 118

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, colsModeopt, 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
colsMode number | boolean <optional>
 1

Number of columns in the grid layout or a boolean for flex mode
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

# uilayoutprop(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 uilayoutprop participant RenderingEngine participant LayoutContainer Model->>uilayoutprop: Apply to property uilayoutprop->>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 349

A property decorator function

function
Example
// Position properties in a grid layout

# uilistmodel(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 uilistmodel participant Model participant RenderingEngine System->>uilistmodel: apply to Model uilistmodel->>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 @uilistmodel.

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 @uilistmodel 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 291

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)

# uion(event, handler)

A decorator factory that binds a UI event to a specified handler function.

A decorator factory that binds a UI event to a specified handler function. This is used to attach event handlers to specific lifecycle events of a DecafComponent, such as render or initialize.

Parameters:
Name Type Description
event

The name of the lifecycle event to bind the handler to. Must be one of the keys in Pick<DecafComponent, 'render' | 'initialize'>.
handler

The function to be executed when the specified event occurs.

View Source ui/decorators.ts, line 495

A decorator function that applies the event-handler binding to the target object.

Example
```typescript
class MyComponent {

# uionrender(handler)

A decorator function that associates a UI rendering handler with the 'render' event.

A decorator function that associates a UI rendering handler with the 'render' event.

Parameters:
Name Type Description
handler

A function that conforms to the UIFunctionLike type, which will be executed when the 'render' event is triggered.

View Source ui/decorators.ts, line 507

A decorated function that binds the handler to the 'render' event.

# uiorder(orderopt) → {function}

Specifies the rendering order for UI components This decorator applies metadata to the property or class, indicating its order in the UI rendering sequence.

Decorator that sets the order of a UI element

sequenceDiagram participant System participant uiorder participant property System->>uiorder:do(property) uiorder->>property: sets order metadata uiorder->>System: returns decorated property
Parameters:
Name Type Attributes Default Description
order number <optional>
 1

The order value for the UI element (default is 1)

View Source ui/decorators.ts, line 46

A property or class decorator function

function
Example
// Set order for a field

# uipageprop(pageopt) → {function}

Specifies which page a property should appear on in paginated UI layouts This decorator applies metadata to the property, indicating which page number it belongs to in a multi-page form or wizard. Properties with the same page number are grouped together and rendered on the same page. This is typically used in conjunction with @uisteppedmodel to organize large forms into manageable sections.

Decorator that assigns a property to a specific page in multi-page forms

sequenceDiagram participant Model participant uipageprop participant RenderingEngine participant PaginationController participant UI Model->>uipageprop: Apply to property uipageprop->>Model: Add page metadata RenderingEngine->>Model: Get page metadata Model->>RenderingEngine: Return page number RenderingEngine->>PaginationController: Group properties by page PaginationController->>UI: Render current page properties
Parameters:
Name Type Attributes Default Description
page number <optional>
 1

The page number where the property should appear (default is 1)

View Source ui/decorators.ts, line 410

A property decorator function

function
Example
// Create a multi-step registration form with page-based layout

# 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 172

A property decorator function

function
Example
// Map model properties to component properties

# uisteppedmodel(tag, pagesopt, paginatedopt, propsopt) → {function}

Combines UI model functionality with stepped/wizard form configuration This decorator creates a UI model that acts as a multi-step container with page navigation capabilities. It is designed for wizard-style forms or multi-page workflows where users progress through sequential steps. The decorator combines @uimodel with page-specific properties and optional pagination controls.

Decorator that creates a multi-step form model with page navigation

sequenceDiagram participant System participant uisteppedmodel participant uimodel participant Model participant RenderingEngine participant PaginationController System->>uisteppedmodel: apply to Model uisteppedmodel->>uimodel: call with page config uimodel->>Model: adds model metadata with pages and pagination Model->>RenderingEngine: requests rendering as stepped form RenderingEngine->>PaginationController: initialize page navigation PaginationController->>System: renders current page with navigation controls
Parameters:
Name Type Attributes Default Description
tag string

The HTML tag to use for the stepped form container
pages number | Array.<IPagedComponentProperties> <optional>
 1

Number of pages or an array of page definitions with metadata
paginated boolean <optional>
 false

Whether to show pagination controls (e.g., prev/next buttons)
props any <optional>
 {}

Additional properties to pass to the container element

View Source model/decorators.ts, line 286

A class decorator function

function
Example
// Create a simple 3-step wizard form