Struct ValidationMessage 

pub struct ValidationMessage {
    pub severity: ValidationSeverity,
    pub message: String,
}

Fields

severity: ValidationSeverity

message: String

Implementations

impl ValidationMessage

pub fn error(message: impl Into<String>) -> Self

Examples found in repository

examples/showcase.rs (line 4707)

fn form_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section(ui, parent, "forms", "Forms");
    let section = widgets::form_section(
        ui,
        body,
        "forms.profile",
        Some("Profile".to_string()),
        widgets::FormSectionOptions::default().with_layout(
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_padding(12.0)
                .with_gap(10.0),
        ),
    );
    let name = widgets::form_row(
        ui,
        section.root,
        "forms.profile.name",
        widgets::FormRowOptions::default(),
    );
    widgets::field_label(
        ui,
        name,
        "forms.profile.name.label",
        "Name",
        widgets::FieldLabelOptions::default().required(),
    );
    widgets::field_help_text(
        ui,
        name,
        "forms.profile.name.help",
        "Shown in window titles and project lists.",
        widgets::FieldHelpOptions::default(),
    );
    form_text_field(ui, name, "forms.profile.name.input", "Ada Lovelace");

    let email = widgets::form_row(
        ui,
        section.root,
        "forms.profile.email",
        widgets::FormRowOptions::default()
            .required()
            .invalid("Use a complete email address"),
    );
    widgets::field_label(
        ui,
        email,
        "forms.profile.email.label",
        "Email",
        widgets::FieldLabelOptions::default().required(),
    );
    widgets::field_validation_message(
        ui,
        email,
        "forms.profile.email.validation",
        ValidationMessage::error("Use a complete email address"),
        widgets::ValidationMessageOptions::default(),
    );
    form_text_field(ui, email, "forms.profile.email.input", "ada@");

    let role = widgets::form_row(
        ui,
        section.root,
        "forms.profile.role",
        widgets::FormRowOptions::default(),
    );
    widgets::field_label(
        ui,
        role,
        "forms.profile.role.label",
        "Role",
        widgets::FieldLabelOptions::default(),
    );
    widgets::field_help_text(
        ui,
        role,
        "forms.profile.role.help",
        "Form rows compose labels, controls, help, and validation text.",
        widgets::FieldHelpOptions::default(),
    );
    form_text_field(ui, role, "forms.profile.role.input", "Maintainer");

    widgets::form_error_summary(
        ui,
        section.root,
        "forms.profile.errors",
        &state.form,
        widgets::FormErrorSummaryOptions::default(),
    );
    widgets::form_action_buttons(
        ui,
        section.root,
        "forms.profile.actions",
        &state.form,
        widgets::FormActionButtonsOptions::default()
            .include_reset(true)
            .with_action_prefix("forms.profile"),
    );
    widgets::label(
        ui,
        section.root,
        "forms.profile.status",
        format!("Status: {}", state.form_status),
        text(11.0, color(154, 166, 184)),
        LayoutStyle::new().with_width_percent(1.0),
    );
}

fn overlay_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section(ui, parent, "overlays", "Overlays");
    let header = widgets::collapsing_header(
        ui,
        body,
        "overlays.collapsing",
        "Collapsing header",
        widgets::CollapsingHeaderOptions::default()
            .expanded(state.overlay_expanded)
            .with_toggle_action("overlays.collapsing.toggle"),
    );
    if let Some(panel) = header.body {
        widgets::label(
            ui,
            panel,
            "overlays.collapsing.body",
            "Expanded content lives under the header.",
            text(12.0, color(196, 210, 230)),
            LayoutStyle::new().with_width_percent(1.0),
        );
    }

    let controls = row(ui, body, "overlays.controls", 8.0);
    button(
        ui,
        controls,
        "overlays.popup.toggle",
        if state.overlay_popup_open {
            "Close popup"
        } else {
            "Open popup"
        },
        "overlays.popup.toggle",
        button_visual(48, 112, 184),
    );
    button(
        ui,
        controls,
        "overlays.modal.open",
        "Open modal",
        "overlays.modal.open",
        button_visual(58, 78, 96),
    );

    let tooltip = TooltipContent::new("Tooltip")
        .body("Tooltip boxes are overlay surfaces with title, body, and shortcut text.")
        .shortcut_label("Ctrl+K");
    let mut tooltip_options = widgets::TooltipBoxOptions::default()
        .with_layout(
            LayoutStyle::column()
                .with_width(280.0)
                .with_padding(8.0)
                .with_gap(4.0),
        )
        .with_animation(None);
    tooltip_options.layer = UiLayer::AppContent;
    tooltip_options.z_index = 0;
    widgets::tooltip_box(ui, body, "overlays.tooltip", tooltip, tooltip_options);

    if state.overlay_popup_open {
        let popup = widgets::popup_panel(
            ui,
            parent,
            "overlays.popup_panel",
            UiRect::new(0.0, 20.0, 160.0, 96.0),
            widgets::PopupOptions {
                z_index: 20,
                accessibility: Some(
                    AccessibilityMeta::new(AccessibilityRole::Dialog).label("Popup"),
                ),
                ..Default::default()
            },
        );
        let popup_body = ui.add_child(
            popup,
            UiNode::container(
                "overlays.popup_panel.body",
                LayoutStyle::column()
                    .with_width_percent(1.0)
                    .with_height_percent(1.0)
                    .with_padding(10.0)
                    .with_gap(6.0),
            ),
        );
        let popup_header = row(ui, popup_body, "overlays.popup_panel.header", 8.0);
        widgets::label(
            ui,
            popup_header,
            "overlays.popup_panel.label",
            "Popup panel",
            text(12.0, color(220, 228, 238)),
            LayoutStyle::new().with_width_percent(1.0),
        );
        let mut close = widgets::ButtonOptions::new(LayoutStyle::size(26.0, 22.0))
            .with_action("overlays.popup.close");
        close.visual = UiVisual::panel(color(28, 34, 43), None, 3.0);
        close.hovered_visual = Some(button_visual(54, 70, 92));
        close.text_style = text(12.0, color(220, 228, 238));
        widgets::button(ui, popup_header, "overlays.popup_panel.close", "x", close);
        widgets::label(
            ui,
            popup_body,
            "overlays.popup_panel.body_text",
            "Popup content is conditionally rendered.",
            text(11.0, color(196, 210, 230)),
            LayoutStyle::new().with_width_percent(1.0),
        );
    }

    if state.overlay_modal_open {
        let modal = widgets::modal_dialog(
            ui,
            body,
            "overlays.modal",
            "Modal dialog",
            widgets::ModalDialogOptions::default()
                .with_size(320.0, 180.0)
                .with_close_action("overlays.modal.close")
                .with_dismissal(widgets::DialogDismissal::STANDARD)
                .with_focus_restore(FocusRestoreTarget::Previous)
                .modeless(),
        );
        widgets::label(
            ui,
            modal.body,
            "overlays.modal.body.text",
            "Dialog body",
            text(12.0, color(220, 228, 238)),
            LayoutStyle::new().with_width_percent(1.0),
        );
    }
}

fn drag_drop_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section(ui, parent, "drag_drop", "Drag and drop");
    widgets::dnd_drag_source(
        ui,
        body,
        "drag_drop.text_source",
        "Drag text payload",
        DragPayload::text("Operad payload"),
        widgets::DragSourceOptions::default()
            .with_kind(DragDropSurfaceKind::ListRow)
            .with_action("drag_drop.text_source")
            .with_accessibility_hint("Start a text drag operation"),
    );

    let accepted_options = widgets::DropZoneOptions::default()
        .with_kind(DragDropSurfaceKind::EditorSurface)
        .with_accepted_payload(DropPayloadFilter::empty().text())
        .with_action("drag_drop.accept_text")
        .with_accessibility_hint("Accepts text payloads");
    let accepted = widgets::dnd_drop_zone(
        ui,
        body,
        "drag_drop.accept_text",
        "Drop text here",
        accepted_options.clone(),
    );
    widgets::dnd_apply_drop_zone_preview(
        ui,
        accepted.root,
        &accepted_options,
        widgets::DropZonePreviewState::Accepted,
    );

    let rejected_options = widgets::DropZoneOptions::default()
        .with_layout(
            LayoutStyle::column()
                .with_width(240.0)
                .with_height(82.0)
                .with_padding(12.0),
        )
        .with_kind(DragDropSurfaceKind::Asset)
        .with_accepted_payload(DropPayloadFilter::empty().files())
        .with_action("drag_drop.files_only");
    let rejected = widgets::dnd_drop_zone(
        ui,
        body,
        "drag_drop.files_only",
        "Files only",
        rejected_options.clone(),
    );
    widgets::dnd_apply_drop_zone_preview(
        ui,
        rejected.root,
        &rejected_options,
        widgets::DropZonePreviewState::Rejected,
    );
    widgets::label(
        ui,
        body,
        "drag_drop.status",
        format!("Status: {}", state.drag_drop_status),
        text(11.0, color(154, 166, 184)),
        LayoutStyle::new().with_width_percent(1.0),
    );
}

fn media_widgets(ui: &mut UiDocument, parent: UiNodeId) {
    let body = section(ui, parent, "media", "Media");
    let icons = row(ui, body, "media.icons", 10.0);
    widgets::image(
        ui,
        icons,
        "media.image.play",
        icon_image(BuiltInIcon::Play),
        widgets::ImageOptions::default()
            .with_layout(LayoutStyle::size(42.0, 42.0))
            .with_accessibility_label("Play icon"),
    );
    widgets::image(
        ui,
        icons,
        "media.image.warning",
        ImageContent::new(BuiltInIcon::Warning.key()).tinted(color(232, 186, 88)),
        widgets::ImageOptions::default()
            .with_layout(LayoutStyle::size(42.0, 42.0))
            .with_accessibility_label("Warning icon"),
    );
    widgets::image(
        ui,
        icons,
        "media.image.info",
        ImageContent::new(BuiltInIcon::Info.key()).tinted(color(118, 183, 255)),
        widgets::ImageOptions::default()
            .with_layout(LayoutStyle::size(42.0, 42.0))
            .with_accessibility_label("Info icon"),
    );
    widgets::label(
        ui,
        body,
        "media.image.note",
        "Image widgets reference stable resource keys; the host resolves them to textures or vector assets.",
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width_percent(1.0),
    );
}

fn timeline_ruler(ui: &mut UiDocument, parent: UiNodeId) {
    let mut layout = LayoutStyle::column()
        .with_width_percent(1.0)
        .with_height(40.0)
        .with_flex_shrink(0.0);
    layout.as_taffy_style_mut().min_size.width = operad::length(0.0);
    layout.as_taffy_style_mut().min_size.height = operad::length(0.0);
    let body = widgets::scroll_area(ui, parent, "timeline", ScrollAxes::BOTH, layout);
    widgets::timeline_ruler(
        ui,
        body,
        "timeline.ruler",
        widgets::RulerSpec {
            range: widgets::TimelineRange::new(0.0, 12.0),
            width: 600.0,
            major_step: 2.0,
            minor_step: 0.5,
            label_every: 1,
        },
        widgets::TimelineRulerOptions::default(),
    );
}

fn toast_controls(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section(ui, parent, "toasts", "Toasts");
    let controls = row(ui, body, "toasts.controls", 10.0);
    button(
        ui,
        controls,
        "toasts.show",
        "Show toast",
        "toast.show",
        button_visual(48, 112, 184),
    );
    button(
        ui,
        controls,
        "toasts.hide",
        "Hide",
        "toast.hide",
        button_visual(58, 78, 96),
    );
    widgets::label(
        ui,
        body,
        "toasts.status",
        if state.toast_visible {
            "Toast overlay is visible."
        } else {
            "Toast overlay is hidden."
        },
        text(12.0, color(196, 210, 230)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    widgets::label(
        ui,
        body,
        "toasts.action_status",
        format!("Action: {}", state.toast_action_status),
        text(12.0, color(154, 166, 184)),
        LayoutStyle::new().with_width_percent(1.0),
    );
}

fn popup_controls(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section(ui, parent, "popup_panel", "Popup panel");
    let controls = row(ui, body, "popup_panel.controls", 8.0);
    button(
        ui,
        controls,
        "popup_panel.toggle",
        if state.popup_open {
            "Close popup"
        } else {
            "Open popup"
        },
        "popup.toggle",
        button_visual(48, 112, 184),
    );
    if state.popup_open {
        let mut close =
            widgets::ButtonOptions::new(LayoutStyle::size(30.0, 30.0)).with_action("popup.close");
        close.visual = UiVisual::panel(color(28, 34, 43), None, 3.0);
        close.hovered_visual = Some(button_visual(54, 70, 92));
        close.text_style = text(13.0, color(220, 228, 238));
        widgets::button(ui, controls, "popup_panel.inline_close", "x", close);
    }
    widgets::label(
        ui,
        body,
        "popup_panel.status",
        if state.popup_open {
            "Popup overlay is open."
        } else {
            "Popup overlay is closed."
        },
        text(12.0, color(196, 210, 230)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    if state.popup_open {
        let panel = widgets::popup_panel(
            ui,
            parent,
            "popup_panel.inline_preview",
            UiRect::new(0.0, 20.0, 160.0, 104.0),
            widgets::PopupOptions {
                z_index: 4,
                accessibility: Some(
                    AccessibilityMeta::new(AccessibilityRole::Dialog).label("Popup preview"),
                ),
                ..Default::default()
            },
        );
        let content = ui.add_child(
            panel,
            UiNode::container(
                "popup_panel.inline_preview.body",
                LayoutStyle::column()
                    .with_width_percent(1.0)
                    .with_height_percent(1.0)
                    .with_padding(10.0)
                    .with_gap(8.0),
            ),
        );
        let header = row(ui, content, "popup_panel.inline_preview.header", 8.0);
        widgets::label(
            ui,
            header,
            "popup_panel.inline_preview.title",
            "Popup panel",
            text(12.0, color(226, 234, 246)),
            LayoutStyle::new().with_width_percent(1.0),
        );
        let mut close =
            widgets::ButtonOptions::new(LayoutStyle::size(26.0, 22.0)).with_action("popup.close");
        close.visual = UiVisual::panel(color(28, 34, 43), None, 3.0);
        close.hovered_visual = Some(button_visual(54, 70, 92));
        close.text_style = text(12.0, color(220, 228, 238));
        widgets::button(ui, header, "popup_panel.inline_preview.close", "x", close);
        widgets::label(
            ui,
            content,
            "popup_panel.inline_preview.text",
            "Overlay content",
            text(11.0, color(196, 210, 230)),
            LayoutStyle::new().with_width_percent(1.0),
        );
        widgets::spacer(
            ui,
            body,
            "popup_panel.inline_preview.space",
            LayoutStyle::new()
                .with_width_percent(1.0)
                .with_height(112.0)
                .with_flex_shrink(0.0),
        );
    }
}

fn styling_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
    let body = section(ui, parent, "styling", "Styling");
    let grid = ui.add_child(
        body,
        UiNode::container(
            "styling.grid",
            LayoutStyle::row()
                .with_width_percent(1.0)
                .with_height_percent(1.0)
                .gap(16.0),
        ),
    );
    let controls = ui.add_child(
        grid,
        UiNode::container(
            "styling.controls",
            LayoutStyle::column()
                .with_width(330.0)
                .with_height_percent(1.0)
                .with_flex_shrink(0.0)
                .gap(6.0),
        ),
    );
    style_checkbox(
        ui,
        controls,
        "styling.inner_same",
        "Inner margin same",
        state.styling.inner_same,
    );
    style_slider(
        ui,
        controls,
        "styling.inner",
        "Inner left",
        state.styling.inner_margin,
        0.0..32.0,
    );
    if !state.styling.inner_same {
        style_slider(
            ui,
            controls,
            "styling.inner_right",
            "Inner right",
            state.styling.inner_right,
            0.0..32.0,
        );
        style_slider(
            ui,
            controls,
            "styling.inner_top",
            "Inner top",
            state.styling.inner_top,
            0.0..32.0,
        );
        style_slider(
            ui,
            controls,
            "styling.inner_bottom",
            "Inner bottom",
            state.styling.inner_bottom,
            0.0..32.0,
        );
    }
    style_checkbox(
        ui,
        controls,
        "styling.outer_same",
        "Outer margin same",
        state.styling.outer_same,
    );
    style_slider(
        ui,
        controls,
        "styling.outer",
        "Outer left",
        state.styling.outer_margin,
        0.0..40.0,
    );
    if !state.styling.outer_same {
        style_slider(
            ui,
            controls,
            "styling.outer_right",
            "Outer right",
            state.styling.outer_right,
            0.0..40.0,
        );
        style_slider(
            ui,
            controls,
            "styling.outer_top",
            "Outer top",
            state.styling.outer_top,
            0.0..40.0,
        );
        style_slider(
            ui,
            controls,
            "styling.outer_bottom",
            "Outer bottom",
            state.styling.outer_bottom,
            0.0..40.0,
        );
    }
    style_checkbox(
        ui,
        controls,
        "styling.radius_same",
        "Corner radius same",
        state.styling.radius_same,
    );
    style_slider(
        ui,
        controls,
        "styling.radius",
        "Radius NW",
        state.styling.corner_radius,
        0.0..28.0,
    );
    if !state.styling.radius_same {
        style_slider(
            ui,
            controls,
            "styling.radius_ne",
            "Radius NE",
            state.styling.corner_ne,
            0.0..28.0,
        );
        style_slider(
            ui,
            controls,
            "styling.radius_sw",
            "Radius SW",
            state.styling.corner_sw,
            0.0..28.0,
        );
        style_slider(
            ui,
            controls,
            "styling.radius_se",
            "Radius SE",
            state.styling.corner_se,
            0.0..28.0,
        );
    }
    style_slider(
        ui,
        controls,
        "styling.shadow_x",
        "Shadow x",
        state.styling.shadow_x,
        -24.0..24.0,
    );
    style_slider(
        ui,
        controls,
        "styling.shadow_y",
        "Shadow y",
        state.styling.shadow_y,
        -24.0..24.0,
    );
    style_slider(
        ui,
        controls,
        "styling.shadow",
        "Shadow blur",
        state.styling.shadow_blur,
        0.0..32.0,
    );
    style_slider(
        ui,
        controls,
        "styling.shadow_spread",
        "Shadow spread",
        state.styling.shadow_spread,
        0.0..16.0,
    );
    style_slider(
        ui,
        controls,
        "styling.shadow_alpha",
        "Shadow color",
        state.styling.shadow_alpha,
        0.0..220.0,
    );
    style_slider(
        ui,
        controls,
        "styling.fill",
        "Fill color",
        state.styling.fill_tint,
        0.0..1.0,
    );
    style_slider(
        ui,
        controls,
        "styling.stroke_color",
        "Stroke color",
        state.styling.stroke_tint,
        0.0..1.0,
    );
    style_slider(
        ui,
        controls,
        "styling.stroke",
        "Stroke",
        state.styling.stroke_width,
        0.0..4.0,
    );

    let preview = ui.add_child(
        grid,
        UiNode::container(
            "styling.preview",
            LayoutStyle::column()
                .with_width_percent(1.0)
                .with_height_percent(1.0)
                .padding(8.0),
        )
        .with_visual(UiVisual::panel(
            color(17, 20, 25),
            Some(StrokeStyle::new(color(56, 66, 82), 1.0)),
            4.0,
        )),
    );
    style_preview(ui, preview, state.styling);
}

fn style_slider(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    value: f32,
    range: std::ops::Range<f32>,
) {
    let row = row(ui, parent, format!("{name}.row"), 8.0);
    widgets::label(
        ui,
        row,
        format!("{name}.label"),
        label,
        text(12.0, color(166, 176, 190)),
        LayoutStyle::new().with_width(118.0),
    );
    widgets::label(
        ui,
        row,
        format!("{name}.value"),
        if range.end <= 1.0 {
            format!("{value:.2}")
        } else {
            format!("{value:.0}")
        },
        text(12.0, color(226, 232, 242)),
        LayoutStyle::new().with_width(42.0),
    );
    let mut options = widgets::SliderOptions::default()
        .with_layout(
            LayoutStyle::new()
                .with_width(112.0)
                .with_height(20.0)
                .with_flex_shrink(0.0),
        )
        .with_value_edit_action(name);
    options.fill_color = color(120, 170, 230);
    widgets::slider(
        ui,
        row,
        format!("{name}.slider"),
        ((value - range.start) / (range.end - range.start).max(f32::EPSILON)).clamp(0.0, 1.0),
        0.0..1.0,
        options,
    );
}

fn style_checkbox(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    checked: bool,
) {
    let mut options = widgets::CheckboxOptions::default().with_action(name);
    options.layout = LayoutStyle::new().with_width_percent(1.0).with_height(22.0);
    options.text_style = text(12.0, color(220, 228, 238));
    widgets::checkbox(ui, parent, name, label, checked, options);
}

fn style_preview(ui: &mut UiDocument, parent: UiNodeId, styling: StylingState) {
    let outer = styling.outer_edges();
    let inner = styling.inner_edges();
    let frame = UiRect::new(
        22.0 + outer[0],
        28.0 + outer[2],
        108.0 + inner[0] + inner[1],
        40.0 + inner[2] + inner[3],
    );
    let text_rect = UiRect::new(
        frame.x + inner[0],
        frame.y + inner[2],
        (frame.width - inner[0] - inner[1]).max(1.0),
        (frame.height - inner[2] - inner[3]).max(1.0),
    );
    ui.add_child(
        parent,
        UiNode::scene(
            "styling.preview.scene",
            vec![
                ScenePrimitive::Rect(
                    PaintRect::solid(frame, styling.fill_color())
                        .stroke(AlignedStroke::inside(StrokeStyle::new(
                            styling.stroke_color(),
                            styling.stroke_width,
                        )))
                        .corner_radii(styling.radii())
                        .effect(PaintEffect::shadow(
                            styling.shadow_color(),
                            UiPoint::new(styling.shadow_x, styling.shadow_y),
                            styling.shadow_blur,
                            styling.shadow_spread,
                        )),
                ),
                ScenePrimitive::Text(
                    PaintText::new("Content", text_rect, text(13.0, color(255, 255, 255)))
                        .horizontal_align(TextHorizontalAlign::Center)
                        .vertical_align(TextVerticalAlign::Center)
                        .multiline(false),
                ),
            ],
            LayoutStyle::new()
                .with_width_percent(1.0)
                .with_height(180.0)
                .with_flex_shrink(0.0),
        ),
    );
}

fn slider_options(state: &ShowcaseState, width: f32) -> widgets::SliderOptions {
    let mut options = widgets::SliderOptions::default().with_layout(
        LayoutStyle::new()
            .with_width(width)
            .with_height(24.0)
            .with_flex_shrink(0.0),
    );
    options.fill_color = if state.slider_trailing_color {
        state.slider_trailing_picker.value
    } else {
        color(42, 49, 58)
    };
    options.thumb_shape = match state.slider_thumb_shape {
        SliderThumbChoice::Circle => widgets::SliderThumbShape::Circle,
        SliderThumbChoice::Square => widgets::SliderThumbShape::Square,
        SliderThumbChoice::Rectangle => widgets::SliderThumbShape::Rectangle,
    };
    options
}

fn slider_number_input(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    input: &TextInputState,
    focused: FocusedTextInput,
    state: &ShowcaseState,
    width: f32,
) {
    let mut options = TextInputOptions::default();
    options.layout = LayoutStyle::new().with_width(width).with_height(28.0);
    options.text_style = text(12.0, color(230, 236, 246));
    options.placeholder_style = text(12.0, color(144, 156, 174));
    options.edit_action = Some(format!("{name}.edit").into());
    options.focused = state.focused_text == Some(focused);
    options.caret_visible = caret_visible(state.caret_phase);
    widgets::text_input(ui, parent, name, input, options);
}

fn form_text_field(ui: &mut UiDocument, parent: UiNodeId, name: &'static str, value: &'static str) {
    let mut options = TextInputOptions::default();
    options.layout = LayoutStyle::new().with_width_percent(1.0).with_height(30.0);
    options.text_style = text(12.0, color(230, 236, 246));
    options.read_only = true;
    widgets::text_input(ui, parent, name, &TextInputState::new(value), options);
}

fn slider_checkbox(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    checked: bool,
) {
    slider_checkbox_with_layout(
        ui,
        parent,
        name,
        label,
        checked,
        LayoutStyle::new().with_width_percent(1.0).with_height(30.0),
    );
}

fn slider_checkbox_with_layout(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    checked: bool,
    layout: LayoutStyle,
) {
    let mut options = widgets::CheckboxOptions::default().with_action(name);
    options.layout = layout;
    options.text_style = text(12.0, color(220, 228, 238));
    widgets::checkbox(ui, parent, name, label, checked, options);
}

fn choice_button(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    label: &'static str,
    selected: bool,
) {
    let mut options =
        widgets::ButtonOptions::new(LayoutStyle::new().with_width(78.0).with_height(28.0))
            .with_action(name);
    options.visual = if selected {
        button_visual(48, 112, 184)
    } else {
        button_visual(38, 46, 58)
    };
    options.hovered_visual = Some(button_visual(65, 86, 106));
    options.pressed_visual = Some(button_visual(34, 54, 84));
    options.text_style = text(12.0, color(238, 244, 252));
    widgets::button(ui, parent, name, label, options);
}

fn divider(ui: &mut UiDocument, parent: UiNodeId, name: &'static str) {
    ui.add_child(
        parent,
        UiNode::container(
            name,
            LayoutStyle::new()
                .with_width_percent(1.0)
                .with_height(1.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(color(48, 58, 72), None, 0.0)),
    );
}

fn canvas(ui: &mut UiDocument, parent: UiNodeId) {
    let body = section(ui, parent, "canvas", "Canvas");
    let mut options = widgets::CanvasOptions::default()
        .with_accessibility_label("Shader canvas")
        .with_action("canvas.rotate")
        .with_aspect_ratio(16.0 / 9.0);
    options.layout = LayoutStyle::new()
        .with_width_percent(1.0)
        .with_height_percent(1.0)
        .with_flex_grow(1.0)
        .with_flex_shrink(1.0);
    options.visual = UiVisual::panel(
        color(18, 22, 28),
        Some(StrokeStyle::new(color(58, 68, 84), 1.0)),
        4.0,
    );
    widgets::canvas(
        ui,
        body,
        "canvas.shader",
        CanvasContent::new("canvas.shader").gpu_context(),
        options,
    );
}

fn render_showcase_canvas(
    state: &mut ShowcaseState,
    context: NativeWgpuCanvasRenderContext<'_>,
) -> Result<CanvasRenderOutput, RenderError> {
    let size = context.surface_size();
    if state.cube.needs_render(size) {
        render_showcase_canvas_surface(state.cube, &context.surface)?;
        state.cube.mark_rendered(size);
    }
    Ok(CanvasRenderOutput::new())
}

fn render_showcase_canvas_surface(
    cube: CanvasCubeState,
    surface: &WgpuCanvasContext<'_>,
) -> Result<(), RenderError> {
    let uniforms = canvas_cube_uniform_bytes(cube);
    surface.render_pass(
        WgpuCanvasRenderPass::wgsl(include_str!("shaders/showcase_canvas.wgsl"))
            .label(Some("showcase.canvas"))
            .uniform_bytes(&uniforms[..])
            .clear_color(Some(color(18, 22, 28))),
    )
}

fn canvas_cube_uniform_bytes(cube: CanvasCubeState) -> [u8; 16] {
    let mut bytes = [0_u8; 16];
    bytes[0..4].copy_from_slice(&cube.yaw.to_ne_bytes());
    bytes[4..8].copy_from_slice(&cube.pitch.to_ne_bytes());
    bytes
}

fn section(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    _title: impl Into<String>,
) -> UiNodeId {
    let name = name.into();
    let mut layout = LayoutStyle::column()
        .with_width_percent(1.0)
        .with_height_percent(1.0)
        .with_flex_grow(1.0)
        .gap(10.0);
    layout.as_taffy_style_mut().min_size.width = operad::length(0.0);
    layout.as_taffy_style_mut().min_size.height = operad::length(0.0);
    widgets::scroll_area(
        ui,
        parent,
        format!("{name}.section_scroll"),
        ScrollAxes::VERTICAL,
        layout,
    )
}

fn row(ui: &mut UiDocument, parent: UiNodeId, name: impl Into<String>, gap: f32) -> UiNodeId {
    ui.add_child(
        parent,
        UiNode::container(name, LayoutStyle::row().with_width_percent(1.0).gap(gap)),
    )
}

fn wrapping_row(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    gap: f32,
) -> UiNodeId {
    let mut layout = LayoutStyle::row().with_width_percent(1.0).gap(gap);
    layout.as_taffy_style_mut().flex_wrap = LayoutFlexWrap::Wrap.to_taffy();
    ui.add_child(parent, UiNode::container(name, layout))
}

fn egui_panel_contents(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: &'static str,
    title: &'static str,
    offset_y: f32,
) {
    let header = ui.add_child(
        parent,
        UiNode::container(
            format!("{name}.egui_header"),
            LayoutStyle::row()
                .with_width_percent(1.0)
                .with_height(28.0)
                .with_padding(6.0)
                .with_flex_shrink(0.0),
        )
        .with_visual(UiVisual::panel(
            color(21, 26, 34),
            Some(StrokeStyle::new(color(54, 65, 80), 1.0)),
            0.0,
        )),
    );
    widgets::label(
        ui,
        header,
        format!("{name}.egui_title"),
        title,
        text(12.0, color(226, 234, 246)),
        LayoutStyle::new().with_width_percent(1.0),
    );
    let scroll = widgets::scroll_area(
        ui,
        parent,
        format!("{name}.scroll_area"),
        ScrollAxes::VERTICAL,
        LayoutStyle::column()
            .with_width_percent(1.0)
            .with_height(0.0)
            .with_flex_grow(1.0)
            .with_padding(8.0)
            .with_gap(6.0),
    );
    ui.node_mut(scroll).action = Some(format!("{name}.scroll").into());
    if let Some(scroll_state) = ui.node_mut(scroll).scroll.as_mut() {
        scroll_state.offset.y = offset_y;
    }
    for (index, line) in lorem_lines().iter().take(8).enumerate() {
        widgets::label(
            ui,
            scroll,
            format!("{name}.egui_line.{index}"),
            *line,
            TextStyle {
                wrap: TextWrap::None,
                ..text(11.0, color(190, 202, 218))
            },
            LayoutStyle::new()
                .with_width_percent(1.0)
                .with_height(22.0)
                .with_flex_shrink(0.0),
        );
    }
}

fn button(
    ui: &mut UiDocument,
    parent: UiNodeId,
    name: impl Into<String>,
    label: impl Into<String>,
    action: impl Into<String>,
    visual: UiVisual,
) -> UiNodeId {
    let mut options = widgets::ButtonOptions::new(LayoutStyle::new().with_height(32.0))
        .with_action(action.into());
    options.visual = visual;
    options.hovered_visual = Some(adjusted_button_visual(visual, 58));
    options.pressed_visual = Some(adjusted_button_visual(visual, -62));
    options.pressed_hovered_visual = Some(adjusted_button_visual(visual, 8));
    options.text_style = text(13.0, color(246, 249, 252));
    widgets::button(ui, parent, name, label, options)
}

fn button_visual(r: u8, g: u8, b: u8) -> UiVisual {
    UiVisual::panel(
        color(r, g, b),
        Some(StrokeStyle::new(color(86, 102, 124), 1.0)),
        4.0,
    )
}

fn color_square_button_options(action: &'static str) -> widgets::ColorButtonOptions {
    widgets::ColorButtonOptions::default()
        .with_layout(LayoutStyle::size(30.0, 30.0).with_flex_shrink(0.0))
        .with_swatch_size(UiSize::new(30.0, 30.0))
        .with_action(action)
        .show_label(false)
}

fn color_value_button_options(action: &'static str, width: f32) -> widgets::ColorButtonOptions {
    widgets::ColorButtonOptions::default()
        .with_layout(
            LayoutStyle::new()
                .with_width(width)
                .with_height(30.0)
                .with_flex_shrink(0.0),
        )
        .with_action(action)
}

fn icon_image(icon: BuiltInIcon) -> ImageContent {
    ImageContent::new(icon.key()).tinted(color(220, 228, 238))
}

fn adjusted_button_visual(visual: UiVisual, delta: i16) -> UiVisual {
    UiVisual::panel(
        adjust_color(visual.fill, delta),
        visual.stroke.map(|stroke| StrokeStyle {
            color: adjust_color(stroke.color, delta / 2),
            width: stroke.width,
        }),
        visual.corner_radius,
    )
}

fn adjust_color(color: ColorRgba, delta: i16) -> ColorRgba {
    let channel = |value: u8| -> u8 { (i16::from(value) + delta).clamp(0, u8::MAX as i16) as u8 };
    ColorRgba::new(
        channel(color.r),
        channel(color.g),
        channel(color.b),
        color.a,
    )
}

fn select_options() -> Vec<widgets::SelectOption> {
    vec![
        widgets::SelectOption::new("compact", "Compact"),
        widgets::SelectOption::new("comfortable", "Comfortable"),
        widgets::SelectOption::new("spacious", "Spacious"),
        widgets::SelectOption::new("disabled", "Disabled").disabled(),
    ]
}

fn label_locale_options() -> Vec<widgets::SelectOption> {
    vec![
        widgets::SelectOption::new("en-US", "English"),
        widgets::SelectOption::new("es-MX", "Español"),
        widgets::SelectOption::new("fr-FR", "Français"),
        widgets::SelectOption::new("de-DE", "Deutsch"),
        widgets::SelectOption::new("it-IT", "Italiano"),
        widgets::SelectOption::new("pt-BR", "Português"),
        widgets::SelectOption::new("nl-NL", "Nederlands"),
    ]
}

fn localized_label(locale_id: &str) -> &'static str {
    match locale_id {
        "en-US" => "Interface language: English",
        "fr-FR" => "Langue de l'interface : français",
        "de-DE" => "Sprache der Oberfläche: Deutsch",
        "it-IT" => "Lingua dell'interfaccia: italiano",
        "pt-BR" => "Idioma da interface: português",
        "nl-NL" => "Interfacetaal: Nederlands",
        _ => "Idioma de interfaz: español de México",
    }
}

fn lorem_lines() -> [&'static str; 8] {
    [
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        "Integer vitae arcu at neque feugiat posuere.",
        "Suspendisse potenti. Praesent eget sem non mauris luctus.",
        "Curabitur blandit, justo non gravida tristique, mi nunc.",
        "Donec at nibh vel sapien facilisis feugiat.",
        "Aliquam erat volutpat. Nam porttitor sem at ligula.",
        "Vivamus dictum eros vitae tortor aliquet, in tempor urna.",
        "Sed finibus velit non lectus efficitur, sed tempor orci.",
    ]
}

fn menu_bar_menus(autosave: bool, grid: bool) -> Vec<widgets::MenuBarMenu> {
    vec![
        widgets::MenuBarMenu::new("file", "File", menu_items(autosave)),
        widgets::MenuBarMenu::new(
            "edit",
            "Edit",
            vec![
                widgets::MenuItem::command("undo", "Undo").shortcut("Ctrl+Z"),
                widgets::MenuItem::command("redo", "Redo").shortcut("Ctrl+Shift+Z"),
            ],
        ),
        widgets::MenuBarMenu::new(
            "view",
            "View",
            vec![widgets::MenuItem::check("grid", "Grid", grid)],
        ),
    ]
}

fn menu_items(autosave: bool) -> Vec<widgets::MenuItem> {
    vec![
        widgets::MenuItem::command("new", "New").shortcut("Ctrl+N"),
        widgets::MenuItem::command("open", "Open").shortcut("Ctrl+O"),
        widgets::MenuItem::separator(),
        widgets::MenuItem::check("autosave", "Autosave", autosave),
        widgets::MenuItem::submenu(
            "recent",
            "Recent",
            vec![
                widgets::MenuItem::command("recent.one", "demo.rs"),
                widgets::MenuItem::command("recent.two", "notes.md"),
            ],
        ),
        widgets::MenuItem::command("delete", "Delete").destructive(),
        widgets::MenuItem::command("disabled", "Disabled").disabled(),
    ]
}

fn menu_item_top_offset(items: &[widgets::MenuItem], index: usize) -> f32 {
    items
        .iter()
        .take(index)
        .map(|item| menu_item_height(Some(item)))
        .sum()
}

fn menu_item_height(item: Option<&widgets::MenuItem>) -> f32 {
    if item.is_some_and(widgets::MenuItem::is_separator) {
        8.0
    } else {
        28.0
    }
}

fn command_palette_items() -> Vec<widgets::CommandPaletteItem> {
    vec![
        widgets::CommandPaletteItem::new("open", "Open")
            .subtitle("Open a document")
            .shortcut("Ctrl+O")
            .keyword("file"),
        widgets::CommandPaletteItem::new("save", "Save")
            .subtitle("Write current changes")
            .shortcut("Ctrl+S"),
        widgets::CommandPaletteItem::new("format", "Format document")
            .subtitle("Apply source formatting")
            .keyword("code"),
        widgets::CommandPaletteItem::new("rename", "Rename symbol")
            .subtitle("Change every reference")
            .shortcut("F2"),
        widgets::CommandPaletteItem::new("toggle_sidebar", "Toggle sidebar")
            .subtitle("Show or hide the widget panel")
            .shortcut("Ctrl+B"),
        widgets::CommandPaletteItem::new("run", "Run current example")
            .subtitle("Launch showcase")
            .shortcut("Ctrl+R"),
        widgets::CommandPaletteItem::new("focus_canvas", "Focus canvas")
            .subtitle("Move interaction to the canvas window"),
        widgets::CommandPaletteItem::new("reset_layout", "Reset window layout")
            .subtitle("Restore the default showcase positions"),
        widgets::CommandPaletteItem::new("disabled", "Disabled command").disabled(),
    ]
}

fn table_columns() -> Vec<widgets::TableColumn> {
    vec![
        widgets::TableColumn {
            id: "name".to_string(),
            label: "Name".to_string(),
            width: 160.0,
        },
        widgets::TableColumn {
            id: "status".to_string(),
            label: "Status".to_string(),
            width: 140.0,
        },
        widgets::TableColumn {
            id: "value".to_string(),
            label: "Value".to_string(),
            width: 100.0,
        },
    ]
}

fn tree_items() -> Vec<widgets::TreeItem> {
    vec![
        widgets::TreeItem::new("root", "Project").with_children(vec![
            widgets::TreeItem::new("src", "src").with_children(vec![
                widgets::TreeItem::new("lib", "lib.rs"),
                widgets::TreeItem::new("widgets", "widgets.rs"),
            ]),
            widgets::TreeItem::new("assets", "assets").with_children(vec![
                widgets::TreeItem::new("shader", "shader.wgsl"),
                widgets::TreeItem::new("logo", "logo.png"),
            ]),
            widgets::TreeItem::new("target", "target").disabled(),
        ]),
    ]
}

fn parse_calendar_date(value: &str) -> Option<CalendarDate> {
    let mut parts = value.split('-');
    let year = parts.next()?.parse().ok()?;
    let month = parts.next()?.parse().ok()?;
    let day = parts.next()?.parse().ok()?;
    CalendarDate::new(year, month, day)
}

fn parse_table_cell(value: &str) -> Option<widgets::DataTableCellIndex> {
    let mut parts = value.split('.');
    let row = parts.next()?.parse().ok()?;
    let column = parts.next()?.parse().ok()?;
    if parts.next().is_some() {
        return None;
    }
    Some(widgets::DataTableCellIndex::new(row, column))
}

fn unit(value: f32) -> f32 {
    value.clamp(0.0, 1.0)
}

fn smooth_loop(phase: f32, offset: f32) -> f32 {
    0.5 - ((phase + offset).cos() * 0.5)
}

fn create_system_clipboard() -> Option<arboard::Clipboard> {
    arboard::Clipboard::new().ok()
}

fn profile_form_state() -> FormState {
    let mut form = FormState::new("profile")
        .with_field("name", "Operad")
        .with_field("email", "invalid@example")
        .with_field("role", "Designer");
    form.update_field("email", "invalid@example").unwrap();
    let request = form.begin_form_validation();
    let _ = form.apply_form_validation(
        FormValidationResult::new(request.generation)
            .with_field_messages(
                "email",
                vec![ValidationMessage::error("Use a complete email address")],
            )
            .with_form_message(ValidationMessage::warning("Unsaved profile changes")),
    );
    form
}

pub fn warning(message: impl Into<String>) -> Self

Examples found in repository

examples/showcase.rs (line 6051)

fn profile_form_state() -> FormState {
    let mut form = FormState::new("profile")
        .with_field("name", "Operad")
        .with_field("email", "invalid@example")
        .with_field("role", "Designer");
    form.update_field("email", "invalid@example").unwrap();
    let request = form.begin_form_validation();
    let _ = form.apply_form_validation(
        FormValidationResult::new(request.generation)
            .with_field_messages(
                "email",
                vec![ValidationMessage::error("Use a complete email address")],
            )
            .with_form_message(ValidationMessage::warning("Unsaved profile changes")),
    );
    form
}

pub fn info(message: impl Into<String>) -> Self

Trait Implementations

impl Clone for ValidationMessage

fn clone(&self) -> ValidationMessage

Returns a duplicate of the value.

fn clone_from(&mut self, source: &Self)

Performs copy-assignment from source.

impl Debug for ValidationMessage

fn fmt(&self, f: &mut Formatter<'_>) -> Result

Formats the value using the given formatter.

impl PartialEq for ValidationMessage

fn eq(&self, other: &ValidationMessage) -> bool

Tests for self and other values to be equal, and is used by ==.

fn ne(&self, other: &Rhs) -> bool

Tests for !=. The default implementation is almost always sufficient, and should not be overridden without very good reason.

impl Eq for ValidationMessage

impl StructuralPartialEq for ValidationMessage