xilem_web: Add a few boolean attribute modifiers for HtmlInputElement and factor element state flags out of these modifiers into ElementFlags

xilem_web/src/elements.rs

@@ -11,7 +11,7 @@ use wasm_bindgen::{JsCast, UnwrapThrowExt};
 use crate::{
     core::{AppendVec, ElementSplice, MessageResult, Mut, View, ViewId, ViewMarker},
     document,
-    modifiers::{Children, With},
+    modifiers::{Children, WithModifier},
     vec_splice::VecSplice,
     AnyPod, DomFragment, DomNode, DynMessage, FromWithContext, Pod, ViewCtx, HTML_NS,
 };
@@ -262,11 +262,11 @@ pub(crate) fn rebuild_element<State, Action, Element>(
     State: 'static,
     Action: 'static,
     Element: 'static,
-    Element: DomNode<Props: With<Children>>,
+    Element: DomNode<Props: WithModifier<Children>>,
 {
     let mut dom_children_splice = DomChildrenSplice::new(
         &mut state.append_scratch,
-        With::<Children>::modifier(element.props),
+        WithModifier::<Children>::modifier(element.props).modifier,
         &mut state.vec_splice_scratch,
         element.node.as_ref(),
         ctx.fragment.clone(),
@@ -290,11 +290,11 @@ pub(crate) fn teardown_element<State, Action, Element>(
     State: 'static,
     Action: 'static,
     Element: 'static,
-    Element: DomNode<Props: With<Children>>,
+    Element: DomNode<Props: WithModifier<Children>>,
 {
     let mut dom_children_splice = DomChildrenSplice::new(
         &mut state.append_scratch,
-        With::<Children>::modifier(element.props),
+        WithModifier::<Children>::modifier(element.props).modifier,
         &mut state.vec_splice_scratch,
         element.node.as_ref(),
         ctx.fragment.clone(),

xilem_web/src/interfaces.rs

@@ -16,10 +16,8 @@ use std::borrow::Cow;
 
 use crate::{
     events,
-    modifiers::{
-        Attr, Attributes, Class, ClassIter, Classes, Rotate, Scale, ScaleValue, Style, StyleIter,
-        Styles, With,
-    },
+    modifiers::{Attr, Class, ClassIter, Rotate, Scale, ScaleValue, Style, StyleIter},
+    props::{WithElementProps, WithHtmlInputElementProps},
     DomNode, DomView, IntoAttributeValue, OptionalAction, Pointer, PointerMsg,
 };
 use wasm_bindgen::JsCast;
@@ -51,13 +49,7 @@ macro_rules! event_handler_mixin {
 }
 
 pub trait Element<State, Action = ()>:
-    Sized
-    + DomView<
-        State,
-        Action,
-        DomNode: DomNode<Props: With<Attributes> + With<Classes> + With<Styles>>
-                     + AsRef<web_sys::Element>,
-    >
+    Sized + DomView<State, Action, DomNode: DomNode<Props: WithElementProps> + AsRef<web_sys::Element>>
 {
     /// Set an attribute for an [`Element`]
     ///
@@ -331,7 +323,7 @@ pub trait Element<State, Action = ()>:
 impl<State, Action, T> Element<State, Action> for T
 where
     T: DomView<State, Action>,
-    <T::DomNode as DomNode>::Props: With<Attributes> + With<Classes> + With<Styles>,
+    <T::DomNode as DomNode>::Props: WithElementProps,
     T::DomNode: AsRef<web_sys::Element>,
 {
 }
@@ -758,17 +750,100 @@ where
 {
 }
 
+use crate::modifiers::html_input_element;
 // #[cfg(feature = "HtmlInputElement")]
 pub trait HtmlInputElement<State, Action = ()>:
-    HtmlElement<State, Action, DomNode: AsRef<web_sys::HtmlInputElement>>
+    HtmlElement<
+    State,
+    Action,
+    DomNode: DomNode<Props: WithHtmlInputElementProps> + AsRef<web_sys::HtmlInputElement>,
+>
 {
+    /// See <https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checked> for more details.
+    ///
+    /// # Examples
+    ///
+    /// ```
+    /// use xilem_web::{interfaces::{Element, HtmlInputElement}, elements::html::input};
+    ///
+    /// # fn component() -> impl HtmlInputElement<()> {
+    /// input(()).attr("type", "checkbox").checked(true) // results in <input type="checkbox" checked></input>
+    /// # }
+    /// ```
+    fn checked(self, checked: bool) -> html_input_element::view::Checked<Self, State, Action> {
+        html_input_element::view::Checked::new(self, checked)
+    }
+
+    /// See <https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checked> for more details.
+    ///
+    /// # Examples
+    ///
+    /// ```
+    /// use xilem_web::{interfaces::{Element, HtmlInputElement}, elements::html::input};
+    ///
+    /// # fn component() -> impl HtmlInputElement<()> {
+    /// input(()).attr("type", "radio").default_checked(true) // results in <input type="radio" checked></input>
+    /// # }
+    /// ```
+    fn default_checked(
+        self,
+        default_checked: bool,
+    ) -> html_input_element::view::DefaultChecked<Self, State, Action> {
+        html_input_element::view::DefaultChecked::new(self, default_checked)
+    }
+
+    /// See <https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/disabled> for more details.
+    ///
+    /// # Examples
+    ///
+    /// ```
+    /// use xilem_web::{interfaces::{Element, HtmlInputElement}, elements::html::input};
+    ///
+    /// # fn component() -> impl HtmlInputElement<()> {
+    /// input(()).disabled(true) // results in <input disabled></input>
+    /// # }
+    /// ```
+    fn disabled(self, disabled: bool) -> html_input_element::view::Disabled<Self, State, Action> {
+        html_input_element::view::Disabled::new(self, disabled)
+    }
+
+    /// See <https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/disabled> for more details.
+    ///
+    /// # Examples
+    ///
+    /// ```
+    /// use xilem_web::{interfaces::{Element, HtmlInputElement}, elements::html::input};
+    ///
+    /// # fn component() -> impl HtmlInputElement<()> {
+    /// input(()).required(true) // results in <input required></input>
+    /// # }
+    /// ```
+    fn required(self, required: bool) -> html_input_element::view::Required<Self, State, Action> {
+        html_input_element::view::Required::new(self, required)
+    }
+
+    /// See <https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/multiple> for more details.
+    ///
+    /// # Examples
+    ///
+    /// ```
+    /// use xilem_web::{interfaces::{Element, HtmlInputElement}, elements::html::input};
+    ///
+    /// # fn component() -> impl HtmlInputElement<()> {
+    /// input(()).multiple(true) // results in <input multiple></input>
+    /// # }
+    /// ```
+    fn multiple(self, multiple: bool) -> html_input_element::view::Multiple<Self, State, Action> {
+        html_input_element::view::Multiple::new(self, multiple)
+    }
 }
 
 // #[cfg(feature = "HtmlInputElement")]
 impl<State, Action, T> HtmlInputElement<State, Action> for T
 where
     T: HtmlElement<State, Action>,
     T::DomNode: AsRef<web_sys::HtmlInputElement>,
+    <T::DomNode as DomNode>::Props: WithHtmlInputElementProps,
 {
 }