std-drawer

Level: Atom | Entity: DrawerContent | Persistence: runtime

2 states, 3 events, 3 transitions

Live Preview

orbital DrawerContentOrbital {
  entity DrawerContent [runtime] {
    id : string
    name : string
    description : string
    status : string
    createdAt : string
  }
  trait DrawerContentDrawer -> DrawerContent [interaction] {
    initial: closed
    state closed {
      INIT -> closed
        (fetch DrawerContent)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "md", align: "center", children: [{ type: "icon", name: "panel-right", size: "lg" }, { type: "typography", content: "Details", variant: "h2" }] }, { type: "button", label: "Open", event: "OPEN", variant: "primary", icon: "panel-right" }] }, { type: "divider" }, { type: "data-grid", entity: "DrawerContent", emptyIcon: "inbox", emptyTitle: "No drawercontents yet", emptyDescription: "Add drawercontents to see them here.", renderItem: ["fn", "item", { type: "stack", direction: "vertical", gap: "sm", children: [{ type: "typography", variant: "h4", content: "@item.name" }] }] }] })
      OPEN -> open
        (fetch DrawerContent)
        (render-ui drawer { type: "stack", direction: "vertical", gap: "none", children: [{ type: "drawer", title: "Details", isOpen: true, children: [{ type: "stack", direction: "vertical", gap: "md", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "typography", variant: "caption", content: "Name" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "name"] }] }, { type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "typography", variant: "caption", content: "Description" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "description"] }] }, { type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "typography", variant: "caption", content: "Status" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "status"] }] }, { type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "typography", variant: "caption", content: "CreatedAt" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "createdAt"] }] }, { type: "divider" }, { type: "stack", direction: "horizontal", gap: "sm", justify: "end", children: [{ type: "button", label: "Close", event: "CLOSE", variant: "ghost" }] }] }] }, { type: "side-panel", title: "Details", isOpen: true, position: "right", children: [{ type: "stack", direction: "vertical", gap: "md", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "typography", variant: "caption", content: "Name" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "name"] }] }, { type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "typography", variant: "caption", content: "Description" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "description"] }] }, { type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "typography", variant: "caption", content: "Status" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "status"] }] }, { type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "typography", variant: "caption", content: "CreatedAt" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "createdAt"] }] }] }] }] })
    }
    state open {
      CLOSE -> closed
        (render-ui drawer null)
        (fetch DrawerContent)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "md", align: "center", children: [{ type: "icon", name: "panel-right", size: "lg" }, { type: "typography", content: "Details", variant: "h2" }] }, { type: "button", label: "Open", event: "OPEN", variant: "primary", icon: "panel-right" }] }, { type: "divider" }, { type: "data-grid", entity: "DrawerContent", emptyIcon: "inbox", emptyTitle: "No drawercontents yet", emptyDescription: "Add drawercontents to see them here.", renderItem: ["fn", "item", { type: "stack", direction: "vertical", gap: "sm", children: [{ type: "typography", variant: "h4", content: "@item.name" }] }] }] })
    }
  }
  page "/drawercontents/drawer" -> DrawerContentDrawer
}

Loading preview...

Orbital Visualization

Loading visualization...

Entity Fields

Field	Type	Default
id	string	-
name	string	-
description	string	-
status	string	"active"
createdAt	string	-

States

State	Type
closed	Initial
open	-

Events

Event	Payload
INIT	-
OPEN	-
CLOSE	-

Transitions

From	Event	To	Effects
closed	INIT	closed	2 effects
closed	OPEN	open	2 effects
open	CLOSE	closed	3 effects