Styles

Styling system for UI components in the UI Generator.

This module provides a comprehensive styling framework for controlling the visual presentation and interactive behavior of UI elements. It includes style classes, alignment options, editor configurations, and conditional formatting rules.

Main Components

Alignment Enums:

HorizontalAlignment: LEFT, CENTER, RIGHT, START, END
VerticalAlignment: TOP, MIDDLE, BOTTOM

Style Classes:

Hierarchical styling system for UI components:

BaseStyle: Foundation styling (fonts, colors, alignment, borders)
CellStyle: Extends BaseStyle with cell-specific features (formatting, filtering)
ColumnStyle: Extends CellStyle with column features (frozen, editors, header styles)

Editor Classes:

Custom input editors for specialized data types:

Editor: Abstract base class for all editors
PercentageEditor: For percentage value input
MonthEditor: For month selection
IconEditor: For icon selection/display
IconCheckboxEditor: Toggle between two icons (checkbox behavior)

Editor Types:

EditorType enum defines available editor types: PERCENTAGE, MONTH, ICON, ICON_CHECKBOX

Conditional Formatting:

ConditionalFormattingType: BOOLEAN, AFTER_TODAY, BEFORE_TODAY
ConditionalFormattingRule: Applies styles based on column value conditions

Additional Components:

IconConfig: Icon configuration with source and color
Title: Title element with styling and positioning
Position: Title positioning (ABOVE_CONTENT, BELOW_CONTENT)

Style Hierarchy

Styles follow an inheritance hierarchy allowing progressive refinement:

BaseStyle
└── CellStyle
    └── ColumnStyle

Each level adds more specialized attributes: - BaseStyle: Universal styling (fonts, colors, alignment, borders) - CellStyle: Cell-specific (display formatting, field mapping, filtering) - ColumnStyle: Column-specific (frozen state, editors, header/read-only overrides)

Alignment System

Two-dimensional alignment control:

Horizontal alignment:

LEFT/CENTER/RIGHT: Absolute positioning
START/END: Layout-direction-aware (supports RTL languages)
Note: START/END not supported in BaseStyle; use LEFT/RIGHT instead

Vertical alignment:

TOP: Align to top edge
MIDDLE: Center vertically
BOTTOM: Align to bottom edge

Editor System

Editors control how users interact with data in cells:

PercentageEditor: Specialized input for percentage values (0-100%)
MonthEditor: Month picker for month-based data
IconEditor: Icon selector from available icon set
IconCheckboxEditor: Binary toggle using custom on/off icons

Each editor can be assigned to a column via ColumnStyle.editor.

Conditional Formatting

Apply styles dynamically based on data conditions:

Condition Types:

BOOLEAN: Apply style if condition column is True
AFTER_TODAY: Apply if date is after current date
BEFORE_TODAY: Apply if date is before current date

Rule Evaluation:

Rules evaluated in order of definition
stop_if_true prevents subsequent rule evaluation
Multiple rules can apply unless stopped

Examples

Creating basic styles:

from daitum_ui.styles import BaseStyle, HorizontalAlignment

# Basic text styling
header_style = BaseStyle(
    font_family="Arial",
    font_size=16,
    font_weight="bold",
    font_color="#333333",
    background_color="#f0f0f0",
    horizontal_alignment=HorizontalAlignment.CENTER
)

Creating cell styles with formatting:

from daitum_ui.styles import CellStyle

# Currency cell with custom formatting
price_cell_style = CellStyle(
    display_format="${value}",
    font_color="#2e7d32",
    horizontal_alignment=HorizontalAlignment.RIGHT,
    can_filter=True
)

# Date cell with formatting
date_cell_style = CellStyle(
    display_format="yyyy-MM-dd",
    horizontal_alignment=HorizontalAlignment.CENTER
)

Creating column styles with editors:

from daitum_ui.styles import ColumnStyle, PercentageEditor, MonthEditor

# Percentage column with specialized editor
completion_column = ColumnStyle(
    editor=PercentageEditor(),
    display_format="{value}%",
    frozen=False,
    can_filter=True
)

# Month column with month picker
month_column = ColumnStyle(
    editor=MonthEditor(),
    frozen=True
)

Using icon editors:

from daitum_ui.styles import IconCheckboxEditor, IconConfig
from daitum_ui.icons import Icon

# Checkbox column with custom icons
status_column = ColumnStyle(
    editor=IconCheckboxEditor(
        on_icon=IconConfig(source=Icon.CHECK_CIRCLE, color="#4caf50"),
        off_icon=IconConfig(source=Icon.CANCEL, color="#f44336")
    )
)

Conditional formatting examples:

from daitum_ui.styles import (
    ConditionalFormattingRule,
    ConditionalFormattingType,
    ColumnStyle
)

# Highlight overdue items (date before today)
overdue_rule = ConditionalFormattingRule(
    condition_column="due_date",
    override_styles=ColumnStyle(
        background_color="#ffebee",
        font_color="#c62828"
    ),
    type=ConditionalFormattingType.BEFORE_TODAY,
    stop_if_true=True
)

# Highlight completed items (boolean condition)
completed_rule = ConditionalFormattingRule(
    condition_column="is_completed",
    override_styles=ColumnStyle(
        background_color="#e8f5e9",
        strikethrough=True
    ),
    type=ConditionalFormattingType.BOOLEAN,
    stop_if_true=False
)

Creating headers with custom styles:

# Column with distinct header style
column_with_header = ColumnStyle(
    font_size=12,
    font_color="#333333",
    header_style=CellStyle(
        font_size=14,
        font_weight="bold",
        background_color="#1976d2",
        font_color="#ffffff",
        horizontal_alignment=HorizontalAlignment.CENTER
    )
)

Frozen columns:

# Frozen ID column that stays visible during scrolling
id_column = ColumnStyle(
    frozen=True,
    font_weight="bold",
    width=80,
    can_filter=False
)

Read-only column styling:

# Column with distinct read-only appearance
calculated_column = ColumnStyle(
    font_color="#666666",
    read_only_style=CellStyle(
        background_color="#fafafa",
        italic=True
    )
)

Title styling:

from daitum_ui.styles import Title, Position

# Title above content
view_title = Title(
    value="Sales Dashboard",
    style=BaseStyle(
        font_size=24,
        font_weight="bold",
        font_color="#1a237e"
    ),
    position=Position.ABOVE_CONTENT
)

Border styling:

# Cell with custom borders
bordered_cell = CellStyle(
    border_top="2px solid #e0e0e0",
    border_bottom="2px solid #e0e0e0",
    border_left="1px solid #f5f5f5",
    border_right="1px solid #f5f5f5"
)

class HorizontalAlignment(*values)[source]

Bases: Enum

Specifies the horizontal alignment of an element within its container.

Options:

LEFT:: Aligns the element to the left side.
CENTER:: Centers the element horizontally.
RIGHT:: Aligns the element to the right side.
START:: Aligns the element to the start edge, depending on layout direction.
END:: Aligns the element to the end edge, depending on layout direction.

LEFT = 'LEFT'

CENTER = 'CENTER'

RIGHT = 'RIGHT'

START = 'START'

END = 'END'

class VerticalAlignment(*values)[source]

Bases: Enum

Specifies vertical alignment options for text or content within a UI element.

TOP: Aligns content to the top edge.

MIDDLE: Centers content vertically.

BOTTOM: Aligns content to the bottom edge.

TOP = 'TOP'

MIDDLE = 'MIDDLE'

BOTTOM = 'BOTTOM'

class BaseStyle(font_family=None, font_size=None, font_weight=None, italic=None, underline=None, strikethrough=None, width=None, font_color=None, background_color=None, horizontal_alignment=None, vertical_alignment=None, border_top=None, border_right=None, border_bottom=None, border_left=None)[source]

Bases: Buildable

Defines base-level styling attributes for UI components such as cells, headers, or columns.

Includes options for font appearance, text alignment, colors, dimensions, and borders.

font_family

Name of the font family to use (e.g., “Arial”, “Roboto”).

Type:: Optional[str]

font_size

Size of the font in points or pixels.

Type:: Optional[int]

font_weight

Weight of the font, typically values like “normal”, “bold”, or numeric strings like “400”.

Type:: Optional[str]

italic

Whether the text should be rendered in italics.

Type:: Optional[bool]

underline

Whether the text should be underlined.

Type:: Optional[bool]

strikethrough

Whether the text should have a strikethrough line.

Type:: Optional[bool]

width

Optional fixed width of the UI element in pixels.

Type:: Optional[int]

font_color

Color of the text, usually a hex code or CSS color string.

Type:: Optional[str]

background_color

Background color of the element, also typically a hex or CSS color.

Type:: Optional[str]

horizontal_alignment

Horizontal alignment of the content (e.g., left, center, right).

Type:: Optional[HorizontalAlignment]

vertical_alignment

Vertical alignment of the content (e.g., top, middle, bottom).

Type:: Optional[VerticalAlignment]

border_top

Style or color for the top border (e.g., “1px solid #000”).

Type:: Optional[str]

border_right

Style or color for the right border.

Type:: Optional[str]

border_bottom

Style or color for the bottom border.

Type:: Optional[str]

border_left

Style or color for the left border.

Type:: Optional[str]

font_family: str | None = None

font_size: int | None = None

font_weight: str | None = None

italic: bool | None = None

underline: bool | None = None

strikethrough: bool | None = None

width: int | None = None

font_color: str | None = None

background_color: str | None = None

horizontal_alignment: HorizontalAlignment | None = None

vertical_alignment: VerticalAlignment | None = None

border_top: str | None = None

border_right: str | None = None

border_bottom: str | None = None

border_left: str | None = None

class CellStyle(font_family=None, font_size=None, font_weight=None, italic=None, underline=None, strikethrough=None, width=None, font_color=None, background_color=None, horizontal_alignment=None, vertical_alignment=None, border_top=None, border_right=None, border_bottom=None, border_left=None, display_format=None, display_field=None, map_key_reference_field=None, can_filter=None, tooltip_field=None, time_interval=None)[source]

Bases: BaseStyle

Defines styling and behavioral options for a single cell in a table, extending BaseStyle.

In addition to basic font, alignment, and color settings from BaseStyle, CellStyle includes options specific to how data is rendered and interacted with in a tabular UI context.

display_format

A format string used to render the display value of the cell. This is typically used for numeric, date, or time formatting (e.g., “0.00” for two decimal places or “yyyy-MM-dd” for dates).

Type:: Optional[str]

display_field

For map fields or object references, specifies the field in the underlying table whose value should be displayed in the cell.

Type:: Optional[str]

map_key_reference_field

For cells representing map-type fields, this refers to another field in the same row whose value is used as the key to extract from the map. Typically this is a reference to a field holding the key dynamically.

Type:: Optional[str]

can_filter

Whether the column is user-filterable in the UI. If True, a filter control will be enabled for this column. Defaults to None.

Type:: Optional[bool]

tooltip_field

The field ID or named value ID containing the value to display in the tooltip.

Type:: Optional[str]

time_interval

If provided, sets the time interval of the time picker in minutes for times and date times. Not valid for date pickers. Defaults to 30 minutes if not provided.

Type:: Optional[int]

display_format: str | None = None

display_field: str | None = None

map_key_reference_field: str | None = None

can_filter: bool | None = None

tooltip_field: str | None = None

time_interval: int | None = None

class IconConfig(source, color=None)[source]

Bases: Buildable

Configuration for an icon used in UI elements.

source

The identifier for the icon.

Type:: Icon

color

Optional color override for the icon, specified as a string (e.g., hex code or color name).

Type:: Optional[str]

source: Icon

color: str | None = None

class EditorType(*values)[source]

Bases: Enum

Enumeration of supported editor types for UI fields.

PERCENTAGE: Editor specialized for percentage input.

MONTH: Editor specialized for month selection.

ICON: Editor that allows selection or display of an icon.

ICON_CHECKBOX: Editor that toggles between two icons, functioning like a checkbox.

PERCENTAGE = 'PERCENTAGE'

MONTH = 'MONTH'

ICON = 'ICON'

ICON_CHECKBOX = 'ICON_CHECKBOX'

class Editor[source]

Bases: ABC, Buildable

Abstract base class for all editor types used in UI fields.

Subclasses should represent specific editor configurations and must provide the corresponding editor type through the editor_type attribute.

This class acts as a marker and common base to enable polymorphic handling of different editor types.

class PercentageEditor(editor_type=EditorType.PERCENTAGE)[source]

Bases: Editor

Editor configuration for input fields that accept percentages.

editor_type

Constant identifying this as a percentage editor.

Type:: EditorType

editor_type: EditorType = 'PERCENTAGE'

class MonthEditor(editor_type=EditorType.MONTH)[source]

Bases: Editor

Editor configuration for input fields that accept month values.

editor_type

Constant identifying this as a month editor.

Type:: EditorType

editor_type: EditorType = 'MONTH'

class IconEditor(editor_type=EditorType.ICON)[source]

Bases: Editor

Editor configuration for input fields that allow icon selection or display.

editor_type

Constant identifying this as an icon editor.

Type:: EditorType

editor_type: EditorType = 'ICON'

class IconCheckboxEditor(on_icon, off_icon, editor_type=EditorType.ICON_CHECKBOX)[source]

Bases: Editor

Editor configuration for a toggleable icon checkbox input.

on_icon

Configuration for the icon to display when checked/on.

Type:: IconConfig

off_icon

Configuration for the icon to display when unchecked/off.

Type:: IconConfig

editor_type

Constant identifying this as an icon checkbox editor.

Type:: EditorType

on_icon: IconConfig

off_icon: IconConfig

editor_type: EditorType = 'ICON_CHECKBOX'

class ColumnStyle(font_family=None, font_size=None, font_weight=None, italic=None, underline=None, strikethrough=None, width=None, font_color=None, background_color=None, horizontal_alignment=None, vertical_alignment=None, border_top=None, border_right=None, border_bottom=None, border_left=None, display_format=None, display_field=None, map_key_reference_field=None, can_filter=None, tooltip_field=None, time_interval=None, frozen=False, editor=None, header_style=None, read_only_style=None)[source]

Bases: CellStyle

Defines styling and behavior specific to table columns, extending the generic cell styling with additional properties related to column interactivity and presentation.

frozen

Indicates whether the column is frozen. Frozen columns remain visible when horizontally scrolling through the table.

Type:: bool

editor

Configuration for the editor used in cells of this column. Defines how users can interact with or edit the column’s data.

Type:: Optional[Editor]

header_style

Styling overrides specifically applied to the column header cell, allowing for distinct header appearance separate from regular cells.

Type:: Optional[CellStyle]

read_only_style

Styling overrides applied when the column is in a read-only state, typically used to visually distinguish non-editable columns.

Type:: Optional[CellStyle]

frozen: bool = False

editor: Editor | None = None

header_style: CellStyle | None = None

read_only_style: CellStyle | None = None

class ConditionalFormattingType(*values)[source]

Bases: Enum

Enumeration of supported conditional formatting types.

BOOLEAN: The condition is treated as a boolean. If True, the style is applied.

AFTER_TODAY: Applies the style if the date in the condition column is after today’s date.

BEFORE_TODAY: Applies the style if the date in the condition column is before today’s date.

BOOLEAN = 'BOOLEAN'

AFTER_TODAY = 'AFTER_TODAY'

BEFORE_TODAY = 'BEFORE_TODAY'

class ConditionalFormattingRule(condition_column, override_styles, element_states=None, stop_if_true=False, type=ConditionalFormattingType.BOOLEAN)[source]

Bases: Buildable

Defines a rule for conditionally applying styles to a column based on the value in another column.

condition_column

The ID or name of the column used to evaluate the condition.

Type:: str

override_styles

The styles to apply if the condition is met. These override the default column style.

Type:: ColumnStyle

element_states

The element state to apply if the condition is met.

Type:: ElementStates | None

stop_if_true

If True, no subsequent formatting rules are evaluated once this rule is satisfied.

Type:: bool

type

The type of condition logic to apply. Defaults to BOOLEAN.

Type:: ConditionalFormattingType

condition_column: str

override_styles: ColumnStyle

element_states: ElementStates | None = None

stop_if_true: bool = False

type: ConditionalFormattingType = 'BOOLEAN'

class Position(*values)[source]

Bases: Enum

Enumeration to position a Title.

ABOVE_CONTENT: Display the title above the view.

BELOW_CONTENT: Display the title below the view.

ABOVE_CONTENT = 'ABOVE_CONTENT'

BELOW_CONTENT = 'BELOW_CONTENT'

class Title(value, style=None, position=Position.ABOVE_CONTENT)[source]

Bases: Buildable

Represents a title with associated styling and positioning.

value str: The text content of the title.

style

The style to apply to the title text.

Type:: Optional[BaseStyle]

position

The position of the title relative to content. Defaults to Position.ABOVE_CONTENT.

Type:: Position

value: str

style: BaseStyle | None = None

position: Position = 'ABOVE_CONTENT'