std-input

Level: Atom | Entity: TextInput | Persistence: runtime

3 states, 5 events, 8 transitions

Live Preview

orbital TextInputOrbital {
  entity TextInput [runtime] {
    id : string
    name : string
    description : string
    status : string
    createdAt : string
    value : string
    inputStatus : string
  }
  trait TextInputInput -> TextInput [interaction] {
    initial: idle
    state idle {
      INIT -> idle
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "text-cursor-input", size: "lg" }, { type: "typography", content: "TextInput", variant: "h2" }] }, { type: "divider" }, { type: "form-field", label: "TextInput", hint: "Type to enter a value.", children: [{ type: "input", placeholder: "Enter textinput...", event: "CHANGE" }] }, { type: "typography", variant: "caption", color: "muted", content: ["object/get", ["array/first", "@entity"], "value"] }] })
      FOCUS -> focused
        (set @entity.inputStatus focused)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "text-cursor-input", size: "lg" }, { type: "typography", content: "TextInput", variant: "h2" }] }, { type: "divider" }, { type: "form-field", label: "TextInput", hint: "Type to enter a value.", children: [{ type: "input", placeholder: "Enter textinput...", event: "CHANGE" }] }, { type: "typography", variant: "caption", color: "muted", content: ["object/get", ["array/first", "@entity"], "value"] }] })
    }
    state focused {
      CHANGE -> focused
        (set @entity.value @payload.value)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "text-cursor-input", size: "lg" }, { type: "typography", content: "TextInput", variant: "h2" }] }, { type: "divider" }, { type: "form-field", label: "TextInput", hint: "Type to enter a value.", children: [{ type: "input", placeholder: "Enter textinput...", event: "CHANGE" }] }, { type: "typography", variant: "caption", color: "muted", content: ["object/get", ["array/first", "@entity"], "value"] }] })
      BLUR -> idle
        (set @entity.inputStatus idle)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "text-cursor-input", size: "lg" }, { type: "typography", content: "TextInput", variant: "h2" }] }, { type: "divider" }, { type: "form-field", label: "TextInput", hint: "Type to enter a value.", children: [{ type: "input", placeholder: "Enter textinput...", event: "CHANGE" }] }, { type: "typography", variant: "caption", color: "muted", content: ["object/get", ["array/first", "@entity"], "value"] }] })
      VALIDATE -> validating
        (set @entity.inputStatus validating)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "text-cursor-input", size: "lg" }, { type: "typography", content: "TextInput", variant: "h2" }] }, { type: "divider" }, { type: "form-field", label: "TextInput", hint: "Validating...", children: [{ type: "input", placeholder: "Enter textinput...", event: "CHANGE" }] }, { type: "alert", variant: "info", message: "Validating input..." }] })
      INIT -> focused
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "text-cursor-input", size: "lg" }, { type: "typography", content: "TextInput", variant: "h2" }] }, { type: "divider" }, { type: "form-field", label: "TextInput", hint: "Type to enter a value.", children: [{ type: "input", placeholder: "Enter textinput...", event: "CHANGE" }] }, { type: "typography", variant: "caption", color: "muted", content: ["object/get", ["array/first", "@entity"], "value"] }] })
    }
    state validating {
      BLUR -> idle
        (set @entity.inputStatus idle)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "text-cursor-input", size: "lg" }, { type: "typography", content: "TextInput", variant: "h2" }] }, { type: "divider" }, { type: "form-field", label: "TextInput", hint: "Type to enter a value.", children: [{ type: "input", placeholder: "Enter textinput...", event: "CHANGE" }] }, { type: "typography", variant: "caption", color: "muted", content: ["object/get", ["array/first", "@entity"], "value"] }] })
      INIT -> validating
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "text-cursor-input", size: "lg" }, { type: "typography", content: "TextInput", variant: "h2" }] }, { type: "divider" }, { type: "form-field", label: "TextInput", hint: "Validating...", children: [{ type: "input", placeholder: "Enter textinput...", event: "CHANGE" }] }, { type: "alert", variant: "info", message: "Validating input..." }] })
    }
  }
  page "/textinputs/input" -> TextInputInput
}

Loading preview...

Orbital Visualization

Loading visualization...

Entity Fields

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

States

State	Type
idle	Initial
focused	-
validating	-

Events

Event	Payload
INIT	-
FOCUS	-
BLUR	-
CHANGE	value: string
VALIDATE	-

Transitions

From	Event	To	Effects
idle	INIT	idle	1 effect
idle	FOCUS	focused	2 effects
focused	CHANGE	focused	2 effects
focused	BLUR	idle	2 effects
focused	VALIDATE	validating	2 effects
validating	BLUR	idle	2 effects
focused	INIT	focused	1 effect
validating	INIT	validating	1 effect