Reworked TextInput -> Input, and UIElementId -> UIKey

Author: davesmith00000

sandbox-ui/src/main/scala/example/Model.scala

@@ -4,11 +4,11 @@ import cats.effect.IO
 import tyrian.*
 import tyrian.next.*
 import tyrian.ui.*
-import tyrian.ui.input.TextInput
+import tyrian.ui.input.Input
 
 final case class Model(
     topNav: TopNav,
-    nameInput: TextInput
+    nameInput: Input
 ):
 
   def update: GlobalMsg => Outcome[Model] =
@@ -34,7 +34,11 @@ final case class Model(
 
 object Model:
   val init: Model =
-    Model(TopNav.initial, TextInput(UIElementId("name-input")).withPlaceholder("Type here..."))
+    Model(
+      TopNav.initial,
+      Input(UIKey("name-input"))
+        .withPlaceholder("Type here...")
+    )
 
   def tmpView(m: Model)(using Theme): HtmlFragment =
     HtmlFragment(

tyrian-next/src/main/scala/tyrian/ui/UIElement.scala

@@ -20,21 +20,18 @@ object UIElement:
 
   trait Stateful[T] extends UIElement[T]:
 
-    def id: UIElementId
-    def withId(value: UIElementId): T
+    def key: UIKey
+    def withKey(value: UIKey): T
 
     def update: GlobalMsg => Outcome[T]
 
-opaque type UIElementId = String
-object UIElementId:
-
-  given CanEqual[UIElementId, UIElementId] = CanEqual.derived
+/*
 
-  def apply(value: String): UIElementId = value
+Theme
 
-  extension (id: UIElementId) def value: String = id
+  - NoStyles
 
-/*
+---
 
 Stateless Components
 	-	Text - DONE

tyrian-next/src/main/scala/tyrian/ui/UIKey.scala

@@ -0,0 +1,11 @@
+package tyrian.ui
+
+opaque type UIKey = String
+
+object UIKey:
+
+  given CanEqual[UIKey, UIKey] = CanEqual.derived
+
+  def apply(value: String): UIKey = value
+
+  extension (key: UIKey) def value: String = key

tyrian-next/src/main/scala/tyrian/ui/input/Input.scala

@@ -0,0 +1,92 @@
+package tyrian.ui.input
+
+import tyrian.Elem
+import tyrian.EmptyAttribute
+import tyrian.Html.*
+import tyrian.next.GlobalMsg
+import tyrian.next.Outcome
+import tyrian.ui
+import tyrian.ui.Theme
+import tyrian.ui.UIElement
+import tyrian.ui.UIKey
+
+final case class Input(
+    key: UIKey,
+    placeholder: String,
+    isDisabled: Boolean,
+    isReadOnly: Boolean,
+    value: String,
+    classNames: Set[String],
+    overrideLocalTheme: Option[Theme => Theme]
+) extends UIElement.Stateful[Input]:
+
+  def withPlaceholder(placeholder: String): Input =
+    this.copy(placeholder = placeholder)
+
+  def withDisabled(disabled: Boolean): Input =
+    this.copy(isDisabled = disabled)
+  def enabled: Input =
+    withDisabled(false)
+  def disabled: Input =
+    withDisabled(true)
+
+  def withReadonly(readOnly: Boolean): Input =
+    this.copy(isReadOnly = readOnly)
+  def readOnly: Input =
+    withReadonly(true)
+  def editable: Input =
+    withReadonly(false)
+
+  def withValue(value: String): Input =
+    this.copy(value = value)
+
+  def withKey(value: UIKey): Input =
+    this.copy(key = value)
+
+  def withClassNames(classes: Set[String]): Input =
+    this.copy(classNames = classes)
+
+  def withThemeOverride(f: Theme => Theme): Input =
+    this.copy(overrideLocalTheme = Some(f))
+
+  def update: GlobalMsg => Outcome[Input] =
+    case TextInputMsg.Changed(_key, v) if _key == key =>
+      Outcome(this.copy(value = v))
+
+    case TextInputMsg.Clear(_key) if _key == key =>
+      Outcome(this.copy(value = ""))
+
+    case _ =>
+      Outcome(this)
+
+  def view: Theme ?=> Elem[GlobalMsg] =
+    val disabledAttr = if isDisabled then attribute("disabled", "true") else EmptyAttribute
+    val readonlyAttr = if isReadOnly then attribute("readonly", "true") else EmptyAttribute
+
+    val inputAttrs = List(
+      tyrian.Html.placeholder := placeholder,
+      tyrian.Html.value       := value,
+      typ                     := "text",
+      onInput((s: String) => TextInputMsg.Changed(key, s)),
+      disabledAttr,
+      readonlyAttr
+    )
+
+    input(inputAttrs*)
+
+object Input:
+
+  def apply(key: UIKey): Input =
+    Input(
+      key,
+      placeholder = "",
+      isDisabled = false,
+      isReadOnly = false,
+      value = "",
+      Set.empty,
+      None
+    )
+
+enum TextInputMsg extends GlobalMsg:
+  case Changed(id: UIKey, value: String)
+  case Clear(id: UIKey)