Add class param to first components (#39)

* Add class param to first components

* fix: auto complete input failed

---------

Co-authored-by: Cristobal Andrada <kandrelczyk@gmail.com>
Co-authored-by: luoxiao <luoxiaozero@163.com>

demo/src/pages/alert/mod.rs

@@ -44,6 +44,12 @@ pub fn AlertPage() -> impl IntoView {
                     </tr>
                 </thead>
                 <tbody>
+                    <tr>
+                        <td>"class"</td>
+                        <td>"MaybeSignal<String>"</td>
+                        <td>"Default::default()"</td>
+                        <td>"Additional classes for the alert element."</td>
+                    </tr>
                     <tr>
                         <td>"title"</td>
                         <td>"MaybeSignal<String>"</td>

demo/src/pages/auto_complete/mod.rs

@@ -131,6 +131,12 @@ pub fn AutoCompletePage() -> impl IntoView {
                         <td>"None"</td>
                         <td>"On select callback function."</td>
                     </tr>
+                    <tr>
+                        <td>"class"</td>
+                        <td>"MaybeSignal<String>"</td>
+                        <td>"Default::default()"</td>
+                        <td>"Additional classes for the autocomplete element."</td>
+                    </tr>
                 </tbody>
             </Table>
             <h3>"AutoCompleteOption Properties"</h3>

demo/src/pages/avatar/mod.rs

@@ -58,6 +58,12 @@ pub fn AvatarPage() -> impl IntoView {
                         <td>"30"</td>
                         <td>"Avatar's size."</td>
                     </tr>
+                    <tr>
+                        <td>"class"</td>
+                        <td>"MaybeSignal<String>"</td>
+                        <td>"Default::default()"</td>
+                        <td>"Addtional classes for the avatar element."</td>
+                    </tr>
                 </tbody>
             </Table>
         </div>

demo/src/pages/button/mod.rs

@@ -262,6 +262,16 @@ pub fn ButtonPage() -> impl IntoView {
                         </td>
                         <td>"Button's style."</td>
                     </tr>
+                    <tr>
+                        <td>"class"</td>
+                        <td>
+                            <Text code=true>"MaybeSignal<String>"</Text>
+                        </td>
+                        <td>
+                            <Text code=true>"Default::default()"</Text>
+                        </td>
+                        <td>"Additional classes for the button element."</td>
+                    </tr>
                     <tr>
                         <td>"variant"</td>
                         <td>

src/alert/mod.rs

@@ -38,6 +38,7 @@ impl AlertVariant {
 
 #[component]
 pub fn Alert(
+    #[prop(optional, into)] class: MaybeSignal<String>,
     #[prop(optional, into)] title: MaybeSignal<String>,
     #[prop(into)] variant: MaybeSignal<AlertVariant>,
     children: Children,
@@ -79,7 +80,10 @@ pub fn Alert(
         .into()
     });
     view! {
-        <div class="thaw-alert" style=move || css_vars.get()>
+        <div 
+            class=move || class.get()
+            class:thaw-alert=true
+            style=move || css_vars.get()>
             <Icon icon class="thaw-alert__icon"/>
             <div>
 

src/auto_complete/mod.rs

@@ -24,6 +24,7 @@ pub fn AutoComplete(
     #[prop(optional, into)] on_select: Option<Callback<String>>,
     #[prop(optional, into)] disabled: MaybeSignal<bool>,
     #[prop(optional, into)] invalid: MaybeSignal<bool>,
+    #[prop(optional, into)] class: MaybeSignal<String>,
 ) -> impl IntoView {
     mount_style("auto-complete", include_str!("./auto-complete.css"));
     let theme = use_theme(Theme::light);
@@ -109,7 +110,7 @@ pub fn AutoComplete(
 
     view! {
         <Binder target_ref=auto_complete_ref>
-            <div class="thaw-auto-complete" ref=auto_complete_ref on:keydown=on_keydown>
+            <div class=move || class.get() class:thaw-auto-complete=true ref=auto_complete_ref on:keydown=on_keydown>
                 <Input
                     value
                     placeholder
@@ -193,3 +194,5 @@ pub fn AutoComplete(
         </Binder>
     }
 }
+
+

src/avatar/mod.rs

@@ -9,6 +9,7 @@ pub fn Avatar(
     #[prop(optional, into)] src: MaybeSignal<String>,
     #[prop(optional, into)] round: MaybeSignal<bool>,
     #[prop(default = MaybeSignal::Static(30), into)] size: MaybeSignal<u16>,
+    #[prop(optional, into)] class: MaybeSignal<String>,
 ) -> impl IntoView {
     let theme = use_theme(Theme::light);
     let css_vars = create_memo(move |_| {
@@ -28,7 +29,7 @@ pub fn Avatar(
     });
     mount_style("avatar", include_str!("./avatar.css"));
     view! {
-        <span class="thaw-avatar" style=move || css_vars.get()>
+        <span class=move || class.get() class:thaw-avatar=true style=move || css_vars.get()>
             {move || {
                 let src = src.get();
                 (!src.is_empty()).then(|| view! { <img src=src/> })

src/button/mod.rs

@@ -98,6 +98,7 @@ impl ButtonSize {
 #[component]
 pub fn Button(
     #[prop(optional, into)] style: MaybeSignal<String>,
+    #[prop(optional, into)] class: MaybeSignal<String>,
     #[prop(optional, into)] variant: MaybeSignal<ButtonVariant>,
     #[prop(optional, into)] color: MaybeSignal<ButtonColor>,
     #[prop(optional, into)] size: MaybeSignal<ButtonSize>,
@@ -221,6 +222,7 @@ pub fn Button(
 
     view! {
         <button
+            class=move || class.get()
             class:thaw-button=true
             class=("thaw-button--solid", move || variant.get() == ButtonVariant::Solid)
             class=("thaw-button--text", move || variant.get() == ButtonVariant::Text)

src/utils/mount_style.rs

@@ -27,8 +27,7 @@ pub fn mount_style(id: &str, content: &'static str) {
                 .expect("create style element error");
             _ = style.set_attribute("csr-id", &format!("thaw-{id}"));
             style.set_text_content(Some(content));
-
-            _ = head.append_child(&style);
+            _ = head.prepend_with_node_1(&style);
         }
     }
 }