🥮 mooncakes.io

    howtomakeaname/sumi/overlays does not have a README file

    CheckboxMenuGroup

    source
    pub(all) struct CheckboxMenuGroup {
      title : String?
      clear_label : String?
      on_clear : 
    Cmd    ?
      items : Array[CheckboxMenuItem]
    }

    A titled section of a checkbox_menu. Passing clear_label renders the small text action at the title row's right edge (meant to clear the group's selection); without a title it is ignored. A hairline divider is inserted between consecutive groups, never after the last one.

    CheckboxMenuGroup::new

    source
    fn CheckboxMenuGroup::new(items : Array[CheckboxMenuItem], title? : String, clear_label? : String, on_clear? : 
    Cmd    ) -> CheckboxMenuGroup

    CheckboxMenuItem

    source
    pub(all) struct CheckboxMenuItem {
      value : String
      label : String
      icon : 
    Html    ?
      checked : Bool
      disabled : Bool
    }

    One row in a checkbox_menu group: a label with an optional leading icon that toggles independently of the other rows.

    CheckboxMenuItem::new

    source
    fn CheckboxMenuItem::new(value : String, label : String, icon? : 
    Html    , checked? : Bool, disabled? : Bool) -> CheckboxMenuItem

    pub(all) enum MenuAlign {
      Start
      End
    } derive(Eq, 
    Debug    )

    fn MenuAlign::equal(MenuAlign, MenuAlign) -> Bool

    fn MenuAlign::not_equal(x : MenuAlign, y : MenuAlign) -> Bool

    pub(all) enum MenuEntry {
      Item(MenuItem)
      Separator
      SectionLabel(String)
    }

    The content of a menu: a list of selectable items with optional separators and section labels between groups.
    fn MenuEntry::items(items : Array[MenuItem]) -> Array[MenuEntry]

    Convenience for the common case — wrap a plain item list.
    pub(all) struct MenuItem {
      value : String
      label : String
      description : String?
      icon : 
    Html    ?
      shortcut : String?
      disabled : Bool
    }

    One entry in a dropdown_menu. Rendered as a rich row (thumbnail + title + description + check mark) when description is present, otherwise as a compact icon-label row. shortcut renders a muted right-aligned key hint (e.g. "⌘E").
    fn MenuItem::new(value : String, label : String, description? : String, icon? : 
    Html    , shortcut? : String, disabled? : Bool) -> MenuItem

    pub(all) enum MenuSide {
      Bottom
      Top
    } derive(Eq, 
    Debug    )

    fn MenuSide::equal(MenuSide, MenuSide) -> Bool

    fn MenuSide::not_equal(x : MenuSide, y : MenuSide) -> Bool

    ToastVariant

    source
    pub(all) enum ToastVariant {
      Info
      Success
      Error
    } derive(Eq, 
    Debug    )

    ToastVariant::equal

    source

    ToastVariant::not_equal

    source
    fn ToastVariant::not_equal(x : ToastVariant, y : ToastVariant) -> Bool

    ToastVariant::to_repr

    source

    TooltipSide

    source
    pub(all) enum TooltipSide {
      Top
      Bottom
      Left
      Right
    } derive(Eq, 
    Debug    )

    TooltipSide::equal

    source
    fn TooltipSide::equal(TooltipSide, TooltipSide) -> Bool

    TooltipSide::not_equal

    source
    fn TooltipSide::not_equal(x : TooltipSide, y : TooltipSide) -> Bool

    TooltipSide::to_repr

    source

    checkbox_menu

    source
    fn checkbox_menu(groups~ : Array[CheckboxMenuGroup], on_toggle? : 
    Emit    [String], width? : Int, max_height? : Int, footer_label? : String, footer_icon? : 
    Html    , on_footer? : 
    Cmd    , id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A multi-select menu panel: grouped rows with an outline checkbox on the right edge, toggled independently, so picking a row never closes anything. Fully controlled — the caller owns each row's checked flag; on_toggle emits the value of the row that was clicked. Unchecked rows reveal an empty box on hover/press; checked rows always show the ticked box.

    width follows the design's size steps (160 / 200 / 240 / 320, default 200); the body scrolls once the content exceeds max_height (default 480). footer_label pins a plain row (optional footer_icon, activated through on_footer) below the scroll area, under a hairline.

    The panel is unpositioned: wrap it in a dropdown/popover container to anchor it to a trigger.

    checkbox_menu(
      groups=[
        CheckboxMenuGroup::new(
          [
            CheckboxMenuItem::new("text", "Text", checked=true),
            CheckboxMenuItem::new("date", "Date"),
          ],
          title="Fields",
          clear_label="Clear",
          on_clear=clear_fields,
        ),
      ],
      on_toggle=toggle_field.map(v => _ => v),
    )

    context_menu

    source
    fn[C : 
    IsChildren    ] context_menu(entries~ : Array[MenuEntry], open~ : Bool, on_open_change? : 
    Emit    [Bool], selected? : String, on_select? : 
    Emit    [String], id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String], menu_style? : Array[String], children : C) -> 
    Html

    A right-click menu wrapping any target. Fully controlled: the caller owns open; right-clicking the target emits on_open_change(true) while the theme's static event layer suppresses the native menu and records the pointer position into the --sumi-ctx-x/y variables the panel reads. Closes on outside click, Escape, and selection; arrow keys move focus.

    context_menu(
      entries=[
        Item(MenuItem::new("rename", "Rename", shortcut="R")),
        Separator,
        Item(MenuItem::new("delete", "Delete", shortcut="⌫")),
      ],
      open=ctx_open,
      on_open_change=set_ctx_open.map(v => _ => v),
      on_select=set_action.map(v => _ => v),
      [canvas_card],
    )

    dialog

    source
    fn[C : 
    IsChildren    ] dialog(id~ : String, title_text? : String, description? : String, show_close? : Bool, spacious? : Bool, closedby? : String, on_close? : 
    Emit    [String], on_cancel? : 
    Cmd    , class? : String, attrs? : 
    Attrs    , style? : Array[String], children : C) -> 
    Html

    Render a styled native dialog without component state.

    The browser owns visibility and focus: open it with the host framework's dialog command (or the open attribute for SSR), and close it with a <form method="dialog"> submit button. closedby controls native dismissal: "any" allows outside clicks and Escape, "closerequest" allows Escape, and "none" requires an explicit close.

    spacious=true widens the panel from the default 480px to 616px.
    fn dropdown_menu(items~ : Array[MenuEntry], trigger~ : 
    Html    , open~ : Bool, on_open_change? : 
    Emit    [Bool], selected? : String, on_select? : 
    Emit    [String], align? : MenuAlign, side? : MenuSide, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String], trigger_style? : Array[String], menu_style? : Array[String]) -> 
    Html

    A dropdown menu with a caller-supplied trigger. Fully controlled: the caller owns both the open flag (open + on_open_change) and the selected value (selected + on_select). Closes on outside click and Escape; when open, Arrow/Home/End keys move focus between items and Enter activates the focused item (handled by the theme's static event layer, so callers wire nothing extra).

    side=Top opens the panel above the trigger (input docks at the bottom of the page); the enter animation's transform origin follows side and align. menu_style appends overrides to the panel (e.g. a width).

    dropdown_menu(
      trigger=button(variant=Ghost, [text(model_label), menu_chevron()]),
      open=menu_open,
      on_open_change=set_menu_open.map(v => _ => v),
      items=MenuEntry::items([MenuItem::new("sd", "Sketch Diffusion")]),
      selected=model,
      on_select=set_model.map(v => _ => v),
    )
    fn menu_chevron(size? : Int) -> 
    Html

    The chevron for menu triggers. It carries the menu-chevron slot, so the interaction sheet rotates it 180° while the parent dropdown is open.

    popover

    source
    fn[C : 
    IsChildren    ] popover(trigger~ : 
    Html    , open~ : Bool, on_open_change? : 
    Emit    [Bool], align? : MenuAlign, side? : MenuSide, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String], panel_style? : Array[String], children : C) -> 
    Html

    A generic anchored floating panel with a caller-supplied trigger — the base for composite pickers that are not plain option lists (sliders, forms, previews). Same overlay/motion model as dropdown_menu: fully controlled (open + on_open_change), closes on outside click, enters with the scale animation whose origin follows side and align.

    popover(
      trigger=button(variant=Ghost, [text("16:9 · 2K"), menu_chevron()]),
      open=panel_open,
      on_open_change=set_panel_open.map(v => _ => v),
      [my_panel_content],
    )

    toast

    source
    fn toast(message~ : String, open~ : Bool, variant? : ToastVariant, on_close? : 
    Cmd    , id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A transient notification rendered in a fixed top-center viewport. Controlled: the caller owns open; the enter/exit fade runs in the interaction sheet (mount-stable + hidden toggle). Combine with @cmd.delay to auto-dismiss.

    // show for 2.4s
    @cmd.batch([set_toast(_ => true), @cmd.delay(set_toast(_ => false), 2400)])

    tooltip

    source
    fn[C : 
    IsChildren    ] tooltip(content~ : String, side? : TooltipSide, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String], children : C) -> 
    Html

    A hover tooltip. The bubble reveals via the interaction sheet (pure CSS), so no state is involved. Wrap any trigger element:

    tooltip(content="Upscale to 4K", button(variant=Ghost, "4K"))

    Source Files

    Powered by MoonBit

    Site sourceReport issuePackagesBuild queueSkillsStatistics

    © 2026 mooncakes.io