all lists on lists.proxmox.com
 help / color / mirror / Atom feed
From: Dominik Csapak <d.csapak@proxmox.com>
To: yew-devel@lists.proxmox.com
Subject: [yew-devel] [PATCH yew-widget-toolkit 09/11] touch: fab: convert to widget macro
Date: Fri, 27 Jun 2025 14:08:57 +0200	[thread overview]
Message-ID: <20250627120859.3723554-16-d.csapak@proxmox.com> (raw)
In-Reply-To: <20250627120859.3723554-1-d.csapak@proxmox.com>

This does most of the things we did manually here.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/touch/fab.rs | 117 +++++++----------------------------------------
 1 file changed, 16 insertions(+), 101 deletions(-)

diff --git a/src/touch/fab.rs b/src/touch/fab.rs
index 2ae1551..1e6d5e8 100644
--- a/src/touch/fab.rs
+++ b/src/touch/fab.rs
@@ -1,12 +1,11 @@
-use std::rc::Rc;
-
 use yew::html::{IntoEventCallback, IntoPropValue};
 use yew::prelude::*;
-use yew::virtual_dom::{Key, VComp, VNode};
 
-use crate::props::{AsClassesMut, WidgetBuilder};
+use crate::props::{EventSubscriber, WidgetBuilder};
 use crate::widget::Button;
 
+use pwt_macros::{builder, widget};
+
 #[derive(Clone, Copy, PartialEq, Eq, Default)]
 pub enum FabSize {
     Small,
@@ -16,14 +15,13 @@ pub enum FabSize {
 }
 
 /// Favorite action button.
+#[widget(pwt=crate, comp=PwtFab, @element)]
 #[derive(Properties, Clone, PartialEq)]
+#[builder]
 pub struct Fab {
-    /// The yew component key.
-    #[prop_or_default]
-    pub key: Option<Key>,
-
     /// The size of the FAB
     #[prop_or_default]
+    #[builder]
     pub size: FabSize,
 
     /// Icon (CSS class).
@@ -31,27 +29,15 @@ pub struct Fab {
 
     /// Optional Button text (for small buttons)
     #[prop_or_default]
+    #[builder(IntoPropValue, into_prop_value)]
     pub text: Option<AttrValue>,
 
-    /// CSS class.
-    #[prop_or_default]
-    pub class: Classes,
-
-    /// Style attribute (use this to set button position)
-    #[prop_or_default]
-    pub style: Option<AttrValue>,
-
     /// Click callback
     #[prop_or_default]
+    #[builder_cb(IntoEventCallback, into_event_callback, MouseEvent)]
     pub on_activate: Option<Callback<MouseEvent>>,
 }
 
-impl AsClassesMut for Fab {
-    fn as_classes_mut(&mut self) -> &mut yew::Classes {
-        &mut self.class
-    }
-}
-
 impl Fab {
     /// Create a new instance.
     pub fn new(icon_class: impl Into<Classes>) -> Self {
@@ -60,39 +46,6 @@ impl Fab {
         })
     }
 
-    /// Builder style method to set the yew `key` property
-    pub fn key(mut self, key: impl IntoPropValue<Option<Key>>) -> Self {
-        self.set_key(key);
-        self
-    }
-
-    /// Method to set the yew `key` property
-    pub fn set_key(&mut self, key: impl IntoPropValue<Option<Key>>) {
-        self.key = key.into_prop_value();
-    }
-
-    /// Builder style method to add a html class
-    pub fn class(mut self, class: impl Into<Classes>) -> Self {
-        self.add_class(class);
-        self
-    }
-
-    /// Method to add a html class.
-    pub fn add_class(&mut self, class: impl Into<Classes>) {
-        self.class.push(class);
-    }
-
-    /// Builder style method to set the html style
-    pub fn style(mut self, style: impl IntoPropValue<Option<AttrValue>>) -> Self {
-        self.set_style(style);
-        self
-    }
-
-    /// Method to set the html style
-    pub fn set_style(&mut self, style: impl IntoPropValue<Option<AttrValue>>) {
-        self.style = style.into_prop_value();
-    }
-
     /// Builder style method to add the "pwt-fab-small" class
     pub fn small(mut self) -> Self {
         self.size = FabSize::Small;
@@ -104,34 +57,6 @@ impl Fab {
         self.size = FabSize::Large;
         self
     }
-
-    /// Builder method to set the FAB size.
-    pub fn size(mut self, size: FabSize) -> Self {
-        self.set_size(size);
-        self
-    }
-
-    /// Method to set the FAB size.
-    pub fn set_size(&mut self, size: FabSize) {
-        self.size = size;
-    }
-
-    /// Builder style method to set the button text
-    pub fn text(mut self, text: impl IntoPropValue<Option<AttrValue>>) -> Self {
-        self.set_text(text);
-        self
-    }
-
-    /// Method to set the button text
-    pub fn set_text(&mut self, text: impl IntoPropValue<Option<AttrValue>>) {
-        self.text = text.into_prop_value();
-    }
-
-    /// Builder style method to set the on_activate callback.
-    pub fn on_activate(mut self, cb: impl IntoEventCallback<MouseEvent>) -> Self {
-        self.on_activate = cb.into_event_callback();
-        self
-    }
 }
 
 #[doc(hidden)]
@@ -151,8 +76,7 @@ impl Component for PwtFab {
         let mut icon_class = props.icon_class.clone();
         icon_class.push("pwt-fab-icon");
 
-        let mut class = props.class.clone();
-        class.push("pwt-fab");
+        let mut class = classes!("pwt-fab");
 
         match props.size {
             FabSize::Small => {
@@ -164,16 +88,15 @@ impl Component for PwtFab {
             }
         }
 
-        let button = match &props.text {
-            Some(text) => Button::new(text)
-                .icon_class(icon_class)
-                .class("pwt-fab-extended"),
-            None => Button::new_icon(icon_class),
-        };
+        if props.text.is_some() {
+            class.push("pwt-fab-extended");
+        }
 
-        button
+        Button::new(&props.text)
+            .icon_class(icon_class)
+            .with_std_props(&props.std_props)
+            .listeners(&props.listeners)
             .class(class)
-            .attribute("style", props.style.clone())
             .on_activate(Callback::from({
                 let on_activate = props.on_activate.clone();
                 move |event: MouseEvent| {
@@ -185,11 +108,3 @@ impl Component for PwtFab {
             .into()
     }
 }
-
-impl From<Fab> for VNode {
-    fn from(val: Fab) -> Self {
-        let key = val.key.clone();
-        let comp = VComp::new::<PwtFab>(Rc::new(val), key);
-        VNode::from(comp)
-    }
-}
-- 
2.39.5



_______________________________________________
yew-devel mailing list
yew-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel


  parent reply	other threads:[~2025-06-27 12:08 UTC|newest]

Thread overview: 25+ messages / expand[flat|nested]  mbox.gz  Atom feed  top
2025-06-27 12:08 [yew-devel] [PATCH yew-widget-toolkit/yew-widget-toolkit-assets 00/17] various touch improvements Dominik Csapak
2025-06-27 12:08 ` [yew-devel] [PATCH yew-widget-toolkit-assets 1/6] reset: remove the tap highlight color for chrome Dominik Csapak
2025-06-27 12:08 ` [yew-devel] [PATCH yew-widget-toolkit-assets 2/6] page: add more page animation styles Dominik Csapak
2025-06-27 12:08 ` [yew-devel] [PATCH yew-widget-toolkit-assets 3/6] page: animations: reverse the direction on X axis for RTL mode Dominik Csapak
2025-06-27 12:08 ` [yew-devel] [PATCH yew-widget-toolkit-assets 4/6] application bar: reduce horizontal padding Dominik Csapak
2025-06-27 12:08 ` [yew-devel] [PATCH yew-widget-toolkit-assets 5/6] application bar: reverse back arrow for rtl Dominik Csapak
2025-06-27 12:54   ` Shannon Sterz
2025-06-27 13:38     ` Dominik Csapak
2025-06-27 12:08 ` [yew-devel] [PATCH yew-widget-toolkit-assets 6/6] buttons: rework fab menu Dominik Csapak
2025-06-27 12:08 ` [yew-devel] [PATCH yew-widget-toolkit 01/11] widget: implement Image widget Dominik Csapak
2025-06-27 12:08 ` [yew-devel] [PATCH yew-widget-toolkit 02/11] widget: button: don't hardcode icons font size Dominik Csapak
2025-06-27 12:08 ` [yew-devel] [PATCH yew-widget-toolkit 03/11] touch: page stack: add more animations Dominik Csapak
2025-06-27 12:08 ` [yew-devel] [PATCH yew-widget-toolkit 04/11] touch: application bar: set custom class on back button Dominik Csapak
2025-06-27 12:08 ` [yew-devel] [PATCH yew-widget-toolkit 05/11] touch: material app: allow pass through of page animation style Dominik Csapak
2025-06-27 13:37   ` Shannon Sterz
2025-06-27 13:38     ` Dominik Csapak
2025-06-27 14:32     ` Dietmar Maurer
2025-06-27 14:40       ` Shannon Sterz
2025-06-27 12:08 ` [yew-devel] [PATCH yew-widget-toolkit 06/11] touch: scaffold: fix overflow setting for body Dominik Csapak
2025-06-27 12:08 ` [yew-devel] [PATCH yew-widget-toolkit 07/11] touch: scaffold: use direction independent positioning for the FAB Dominik Csapak
2025-06-27 12:08 ` [yew-devel] [PATCH yew-widget-toolkit 08/11] touch: fab: add size option Dominik Csapak
2025-06-27 12:08 ` Dominik Csapak [this message]
2025-06-27 12:08 ` [yew-devel] [PATCH yew-widget-toolkit 10/11] touch: fab menu: convert to widget macro Dominik Csapak
2025-06-27 12:08 ` [yew-devel] [PATCH yew-widget-toolkit 11/11] touch: fab menu: rework fab menu Dominik Csapak
2025-06-30  8:25 ` [yew-devel] [PATCH yew-widget-toolkit/yew-widget-toolkit-assets 00/17] various touch improvements Dominik Csapak

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

  Avoid top-posting and favor interleaved quoting:
  https://en.wikipedia.org/wiki/Posting_style#Interleaved_style

* Reply using the --to, --cc, and --in-reply-to
  switches of git-send-email(1):

  git send-email \
    --in-reply-to=20250627120859.3723554-16-d.csapak@proxmox.com \
    --to=d.csapak@proxmox.com \
    --cc=yew-devel@lists.proxmox.com \
    /path/to/YOUR_REPLY

  https://kernel.org/pub/software/scm/git/docs/git-send-email.html

* If your mail client supports setting the In-Reply-To header
  via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line before the message body.
This is an external index of several public inboxes,
see mirroring instructions on how to clone and mirror
all data and code used by this external index.
Service provided by Proxmox Server Solutions GmbH | Privacy | Legal