diff --git a/crate/Cargo.lock b/crate/Cargo.lock index 6946cfd..82a4967 100644 --- a/crate/Cargo.lock +++ b/crate/Cargo.lock @@ -1044,7 +1044,7 @@ dependencies = [ [[package]] name = "yew_style_page" -version = "0.7.2" +version = "0.7.3" dependencies = [ "Inflector", "cfg-if", @@ -1065,7 +1065,7 @@ dependencies = [ [[package]] name = "yew_styles" -version = "0.7.2" +version = "0.7.3" dependencies = [ "getrandom", "rand", diff --git a/crate/Cargo.toml b/crate/Cargo.toml index b1f169b..b929928 100644 --- a/crate/Cargo.toml +++ b/crate/Cargo.toml @@ -6,7 +6,7 @@ license = "MIT/Apache-2.0" name = "yew_style_page" readme = "./README.md" repository = "https://github.com/spielrs/yew-styles-page.git" -version = "0.7.2" +version = "0.7.3" [lib] crate-type = ["cdylib"] diff --git a/crate/src/page/navbar_page.rs b/crate/src/page/navbar_page.rs index 243f198..fd66be0 100644 --- a/crate/src/page/navbar_page.rs +++ b/crate/src/page/navbar_page.rs @@ -1,4 +1,6 @@ use super::highlighters::{navbar_code, navbar_with_a_tag}; +use wasm_bindgen::JsCast; +use web_sys::Element; use yew::prelude::*; use yew_prism::Prism; use yew_styles::{ @@ -15,6 +17,7 @@ pub struct NavbarPage { link: ComponentLink, navbar_menu: Vec, item_menu: Vec>, + close_navbar_mobile: bool, } #[derive(Clone)] @@ -35,6 +38,7 @@ struct ElementRender { pub enum Msg { ChangeType(usize, usize, String), + CloseNavarMobile(MouseEvent), } #[derive(Clone, Properties)] @@ -49,6 +53,7 @@ impl Component for NavbarPage { link, navbar_menu: vec![String::from("home"); 50], item_menu: vec![vec![true, false, false, false]; 50], + close_navbar_mobile: false, } } @@ -65,6 +70,29 @@ impl Component for NavbarPage { } self.item_menu[index][item_index] = true; } + Msg::CloseNavarMobile(mouse_event) => { + let target_class = mouse_event + .target() + .unwrap() + .dyn_into::() + .unwrap() + .class_list(); + + let target_parent = mouse_event + .target() + .unwrap() + .dyn_into::() + .unwrap() + .parent_element() + .unwrap() + .tag_name(); + + if !target_class.value().contains("navbar-menu") && target_parent != "svg" { + self.close_navbar_mobile = true; + } else { + self.close_navbar_mobile = false + } + } }; true @@ -72,7 +100,7 @@ impl Component for NavbarPage { fn view(&self) -> Html { html! { - <> +

{"Navbar Components"}

{"Features required"}

@@ -88,6 +116,7 @@ impl Component for NavbarPage {
  • {"navbar_palette: "}{"type navbar style. Options included in "}{"Pallete"}{". Default "}{"Standard"}
  • {"button_style: "}{"navbar styles. Options included in "}{"Style"}{". Default "}{"Regular"}{"."}
    • +
  • {"hide_navbar_items_mobile: "}{"Hide Navbar items in mobile. Default "}{"false"}
  • {"fixed: "}{"the location of the navbar which is fixed .Options included in "}{"Fixed"}{". Default "}{"Top"}{"."}
  • {"branch: "}{"vnode embedded in the beginning of the navbar, useful to include a branch logo. Optional"}
  • {"key: "}{"general property to add keys."}
    • @@ -126,8 +155,8 @@ impl Component for NavbarPage { language="rust"/>

    {"Visual examples"}

    - {get_style(self.link.clone(), self.navbar_menu.clone(), self.item_menu.clone())} - + {get_style(self.link.clone(), self.navbar_menu.clone(), self.item_menu.clone(), self.close_navbar_mobile)} +
} } } @@ -136,6 +165,7 @@ fn get_style( link: ComponentLink, navbar_menu: Vec, item_menu: Vec>, + close_navbar_mobile: bool, ) -> Html { let styles = vec![ NavbarStyle { @@ -162,6 +192,7 @@ fn get_style( navbar_menu.clone(), item_menu.clone(), index, + close_navbar_mobile, ); index = navbar.index + 1; @@ -177,6 +208,7 @@ fn get_navbar_palette( navbar_menu: Vec, item_menu: Vec>, index: usize, + close_navbar_mobile: bool, ) -> ElementRender { let mut navbar_palette_rendered = index; let types = vec![ @@ -224,6 +256,7 @@ fn get_navbar_palette( fixed=Fixed::None navbar_style=style.style.clone() navbar_palette=navbar_palette.navbar_palette + hide_navbar_items_mobile = close_navbar_mobile branch=html!{} > diff --git a/crate/yew_styles/Cargo.lock b/crate/yew_styles/Cargo.lock index dfb02a5..6e70619 100644 --- a/crate/yew_styles/Cargo.lock +++ b/crate/yew_styles/Cargo.lock @@ -660,7 +660,7 @@ dependencies = [ [[package]] name = "yew_styles" -version = "0.7.2" +version = "0.7.3" dependencies = [ "getrandom", "rand", diff --git a/crate/yew_styles/Cargo.toml b/crate/yew_styles/Cargo.toml index 4c869aa..647e0ac 100644 --- a/crate/yew_styles/Cargo.toml +++ b/crate/yew_styles/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "yew_styles" -version = "0.7.2" +version = "0.7.3" description = "Framework styles for yew" documentation = "https://docs.rs/crate/yew_styles" authors = ["Francisco Jesus Navarro Cortes "] diff --git a/crate/yew_styles/src/components/button.rs b/crate/yew_styles/src/components/button.rs index 3c3139d..15e4d70 100644 --- a/crate/yew_styles/src/components/button.rs +++ b/crate/yew_styles/src/components/button.rs @@ -102,7 +102,7 @@ impl From for ButtonProps { #[derive(Clone, Properties)] pub struct Props { - /// Type botton style. Options included in `Pallete` + /// Type botton style. Default `Palette::Standard` #[prop_or(Palette::Standard)] pub button_palette: Palette, /// General property to add custom class styles @@ -117,10 +117,10 @@ pub struct Props { /// General property to add keys #[prop_or_default] pub key: String, - /// Three diffent button standard sizes. Options included in `Size` + /// Three diffent button standard sizes. Default `Size::Medium` #[prop_or(Size::Medium)] pub button_size: Size, - /// Button styles. Options included in `Style` + /// Button styles. Default `Style::Regular` #[prop_or(Style::Regular)] pub button_style: Style, /// Click event for button. Required diff --git a/crate/yew_styles/src/components/card.rs b/crate/yew_styles/src/components/card.rs index 332cd94..02a1aae 100644 --- a/crate/yew_styles/src/components/card.rs +++ b/crate/yew_styles/src/components/card.rs @@ -139,7 +139,7 @@ pub struct Card { props: Props, } -#[derive(Clone, Properties)] +#[derive(Clone, PartialEq, Properties)] pub struct Props { /// A dragged item (element or text selection) is dragged #[prop_or(Callback::noop())] @@ -169,40 +169,40 @@ pub struct Props { /// Click event for card #[prop_or(Callback::noop())] pub onclick_signal: Callback, - /// If the item is draggable + /// If the item is draggable. Default `false` #[prop_or(false)] pub draggable: bool, - /// Header content of the card + /// Header content of the card. Default `None` #[prop_or(None)] pub header: Option, - /// The size of the header card based in Flexbox + /// The size of the header card based in Flexbox. Default `4` #[prop_or(4)] pub header_size: i8, - /// Body content of the card + /// Body content of the card. Default None #[prop_or(None)] pub body: Option, - /// The size of the body card based in Flexbox + /// The size of the body card based in Flexbox. Default `6` #[prop_or(6)] pub body_size: i8, /// Footer content of the card #[prop_or(None)] pub footer: Option, - /// The size of the footer card based in Flexbox + /// The size of the footer card based in Flexbox. Default `2` #[prop_or(2)] pub footer_size: i8, - /// Without split in parts, only a single content + /// Without split in parts, only a single content. Default `None` #[prop_or(None)] pub single_content: Option, - /// Type card purpose style + /// Type card purpose style. Default `Palette::Standard` #[prop_or(Palette::Standard)] pub card_palette: Palette, - /// Card styles + /// Card styles. Default `Style::Regular` #[prop_or(Style::Regular)] pub card_style: Style, - /// three diffent card standard sizes + /// three diffent card standard sizes. Default `Size::Medium` #[prop_or(Size::Medium)] pub card_size: Size, - /// if hove, focus, active effects are enable + /// if hove, focus, active effects are enable. Default `true` #[prop_or(true)] pub interaction_effect: bool, /// General property to get the ref of the component @@ -272,8 +272,12 @@ impl Component for Card { } fn change(&mut self, props: Self::Properties) -> ShouldRender { - self.props = props; - true + if self.props != props { + self.props = props; + true + } else { + false + } } fn view(&self) -> Html { diff --git a/crate/yew_styles/src/components/forms/form_component.rs b/crate/yew_styles/src/components/forms/form_component.rs index 0bb4784..ab3770b 100644 --- a/crate/yew_styles/src/components/forms/form_component.rs +++ b/crate/yew_styles/src/components/forms/form_component.rs @@ -350,16 +350,16 @@ pub struct Form { props: Props, } -#[derive(Clone, Properties)] +#[derive(Clone, PartialEq, Properties)] pub struct Props { - /// Signal to emit the event submit. + /// Signal to emit the event submit. Default #[prop_or(Callback::noop())] pub onsubmit_signal: Callback, pub children: Children, /// The URL that processes the form submission #[prop_or_default] pub action: String, - /// The HTTP method to submit the form + /// The HTTP method to submit the form. Default `Method::Post` #[prop_or(Method::Post)] pub method: Method, /// The name of the form @@ -379,7 +379,7 @@ pub struct Props { pub id: String, } -#[derive(Clone)] +#[derive(Clone, PartialEq)] pub enum Method { Post, Get, @@ -409,8 +409,12 @@ impl Component for Form { } fn change(&mut self, props: Self::Properties) -> ShouldRender { - self.props = props; - true + if self.props != props { + self.props = props; + true + } else { + false + } } fn view(&self) -> Html { diff --git a/crate/yew_styles/src/components/forms/form_file.rs b/crate/yew_styles/src/components/forms/form_file.rs index ef0faed..547bbfb 100644 --- a/crate/yew_styles/src/components/forms/form_file.rs +++ b/crate/yew_styles/src/components/forms/form_file.rs @@ -9,14 +9,14 @@ pub struct FormFile { props: Props, } -#[derive(Clone, Properties)] +#[derive(Clone, PartialEq, Properties)] pub struct Props { - /// One or more unique file type specifiers describing file types to allow + /// One or more unique file type specifiers describing file types to allow. Required pub accept: Vec, - /// The input style according with the purpose + /// The input style according with the purpose. Default `Palette::Standard` #[prop_or(Palette::Standard)] pub input_palette: Palette, - /// The size of the input + /// The size of the input. Default `Size::Medium` #[prop_or(Size::Medium)] pub input_size: Size, /// Signal to emit the event change @@ -25,16 +25,16 @@ pub struct Props { #[prop_or_default] pub capture: String, /// Whether to allow multiple values - #[prop_or_default] + #[prop_or(false)] pub multiple: bool, - /// Hide the file input element + /// Hide the file input element. Default `false` #[prop_or(false)] pub hidden: bool, - /// Underline style instead of box, like Material - #[prop_or_default] + /// Underline style instead of box, like Material. Default `false` + #[prop_or(false)] pub underline: bool, - /// Error state for validation - #[prop_or_default] + /// Error state for validation. Default `false` + #[prop_or(false)] pub error_state: bool, /// Show error message when error_state is true #[prop_or_default] @@ -42,20 +42,20 @@ pub struct Props { /// Alt attribute for the image type #[prop_or_default] pub alt: String, - /// Automatically focus the form control when the page is loaded - #[prop_or_default] + /// Automatically focus the form control when the page is loaded. Default `false` + #[prop_or(false)] pub autofocus: bool, /// The name of the input #[prop_or_default] pub name: String, - /// A value is required or must be check for the form to be submittable + /// A value is required or must be check for the form to be submittable. Default `false` #[prop_or(false)] pub required: bool, - /// The value is not editable - #[prop_or_default] + /// The value is not editable. Default `false` + #[prop_or(false)] pub readonly: bool, - /// Whether the form control is disabled - #[prop_or_default] + /// Whether the form control is disabled. Default `false` + #[prop_or(false)] pub disabled: bool, /// General property to get the ref of the component #[prop_or_default] @@ -95,8 +95,12 @@ impl Component for FormFile { } fn change(&mut self, props: Self::Properties) -> ShouldRender { - self.props = props; - true + if self.props != props { + self.props = props; + true + } else { + false + } } fn view(&self) -> Html { diff --git a/crate/yew_styles/src/components/forms/form_group.rs b/crate/yew_styles/src/components/forms/form_group.rs index 99d25e2..47c3b7b 100644 --- a/crate/yew_styles/src/components/forms/form_group.rs +++ b/crate/yew_styles/src/components/forms/form_group.rs @@ -70,15 +70,15 @@ pub struct FormGroup { } /// Orientation type -#[derive(Clone)] +#[derive(Clone, PartialEq)] pub enum Orientation { Horizontal, Vertical, } -#[derive(Clone, Properties)] +#[derive(Clone, PartialEq, Properties)] pub struct Props { - /// In which orientation will show the inputs, select and labels + /// In which orientation will show the inputs, select and labels. Default `Orientation::Vertical` #[prop_or(Orientation::Vertical)] pub orientation: Orientation, /// General property to get the ref of the component @@ -109,8 +109,12 @@ impl Component for FormGroup { } fn change(&mut self, props: Self::Properties) -> ShouldRender { - self.props = props; - true + if self.props != props { + self.props = props; + true + } else { + false + } } fn view(&self) -> Html { diff --git a/crate/yew_styles/src/components/forms/form_input.rs b/crate/yew_styles/src/components/forms/form_input.rs index 28fee80..1c7dd08 100644 --- a/crate/yew_styles/src/components/forms/form_input.rs +++ b/crate/yew_styles/src/components/forms/form_input.rs @@ -68,7 +68,7 @@ pub struct FormInput { } /// Different type inputs supported. You can find more information [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) -#[derive(Clone)] +#[derive(Clone, PartialEq)] pub enum InputType { Button, Checkbox, @@ -93,17 +93,17 @@ pub enum InputType { Week, } -#[derive(Clone, Properties)] +#[derive(Clone, PartialEq, Properties)] pub struct Props { /// Current value of the form control. Required pub value: String, - /// The input type + /// The input type. Default `InputType::Text` #[prop_or(InputType::Text)] pub input_type: InputType, - /// The input style according with the purpose + /// The input style according with the purpose. Default `Palette::Standard` #[prop_or(Palette::Standard)] pub input_palette: Palette, - /// The size of the input + /// The size of the input. Default `Size::Medium` #[prop_or(Size::Medium)] pub input_size: Size, /// Signal to emit the event input @@ -139,11 +139,11 @@ pub struct Props { /// Alt attribute for the image type #[prop_or_default] pub alt: String, - /// Automatically focus the form control when the page is loaded - #[prop_or_default] + /// Automatically focus the form control when the page is loaded. Default `false` + #[prop_or(false)] pub autofocus: bool, - /// Hint for form autofill feature - #[prop_or_default] + /// Hint for form autofill feature. . Default `false` + #[prop_or(false)] pub autocomplete: bool, /// Value of the id attribute of the "datalist" of autocomplete options #[prop_or_default] @@ -157,29 +157,29 @@ pub struct Props { /// Minimum length (number of characters) of value #[prop_or_default] pub minlength: u16, - /// Maximum length (number of characters) of value + /// Maximum length (number of characters) of value. Default `1000` #[prop_or(1000)] pub maxlength: u16, - /// Pattern the value must match to be valid + /// Pattern the value must match to be valid. Default `"[\\s\\S]*".to_string()` #[prop_or("[\\s\\S]*".to_string())] pub pattern: String, - /// The value is not editable - #[prop_or_default] + /// The value is not editable. Default `false` + #[prop_or(false)] pub readonly: bool, - /// A value is required or must be check for the form to be submittable + /// A value is required or must be check for the form to be submittable. Default `false` #[prop_or(false)] pub required: bool, - /// Whether the form control is disabled + /// Whether the form control is disabled. Default `false` #[prop_or(false)] pub disabled: bool, - /// Underline style instead of box, like Material - #[prop_or_default] + /// Underline style instead of box, like Material. Default `false` + #[prop_or(false)] pub underline: bool, /// Incremental values that are valid #[prop_or_default] pub step: i16, - /// Error state for validation - #[prop_or_default] + /// Error state for validation. Default `false` + #[prop_or(false)] pub error_state: bool, /// Show error message when error_state is true #[prop_or_default] @@ -218,8 +218,12 @@ impl Component for FormInput { } fn change(&mut self, props: Self::Properties) -> ShouldRender { - self.props = props; - true + if self.props != props { + self.props = props; + true + } else { + false + } } fn view(&self) -> Html { diff --git a/crate/yew_styles/src/components/forms/form_label.rs b/crate/yew_styles/src/components/forms/form_label.rs index 221e0b7..e6e7ed0 100644 --- a/crate/yew_styles/src/components/forms/form_label.rs +++ b/crate/yew_styles/src/components/forms/form_label.rs @@ -69,7 +69,7 @@ pub struct FormLabel { props: Props, } -#[derive(Clone, Properties)] +#[derive(Clone, PartialEq, Properties)] pub struct Props { /// text of the label. Required pub text: String, @@ -103,9 +103,12 @@ impl Component for FormLabel { } fn change(&mut self, props: Self::Properties) -> ShouldRender { - self.props = props; - - true + if self.props != props { + self.props = props; + true + } else { + false + } } fn view(&self) -> Html { diff --git a/crate/yew_styles/src/components/forms/form_select.rs b/crate/yew_styles/src/components/forms/form_select.rs index 0f53d30..5f6f4a8 100644 --- a/crate/yew_styles/src/components/forms/form_select.rs +++ b/crate/yew_styles/src/components/forms/form_select.rs @@ -77,7 +77,7 @@ pub struct FormSelect { props: Props, } -#[derive(Clone, Properties)] +#[derive(Clone, PartialEq, Properties)] pub struct Props { /// Different options to select. Required pub options: Html, @@ -85,25 +85,25 @@ pub struct Props { /// Whether or not the selector should be disabled. #[prop_or_default] pub disabled: bool, - /// The size of the select + /// The size of the select. Default `Size::Medium` #[prop_or(Size::Medium)] pub select_size: Size, /// The name of the input #[prop_or_default] pub name: String, - /// A value is required or must be check for the form to be submittable - #[prop_or_default] + /// A value is required or must be check for the form to be submittable. Default `false` + #[prop_or(false)] pub required: bool, - /// Whether to allow multiple values - #[prop_or_default] + /// Whether to allow multiple values. Default `false` + #[prop_or(false)] pub multiple: bool, /// If the control is presented as a scrolling list box, /// this attribute represents the number of rows in the /// list that should be visible at one time #[prop_or_default] pub size: u16, - /// Automatically focus the form control when the page is loaded - #[prop_or_default] + /// Automatically focus the form control when the page is loaded. Default `false` + #[prop_or(false)] pub autofocus: bool, /// General property to get the ref of the component #[prop_or_default] @@ -114,8 +114,8 @@ pub struct Props { /// General property to add custom class styles #[prop_or_default] pub class_name: String, - /// Error state for validation - #[prop_or_default] + /// Error state for validation. Default `false` + #[prop_or(false)] pub error_state: bool, /// show error message when error_state is true. #[prop_or_default] @@ -147,8 +147,12 @@ impl Component for FormSelect { } fn change(&mut self, props: Self::Properties) -> ShouldRender { - self.props = props; - true + if self.props != props { + self.props = props; + true + } else { + false + } } fn view(&self) -> Html { diff --git a/crate/yew_styles/src/components/forms/form_submit.rs b/crate/yew_styles/src/components/forms/form_submit.rs index e3aaaa7..01f9c67 100644 --- a/crate/yew_styles/src/components/forms/form_submit.rs +++ b/crate/yew_styles/src/components/forms/form_submit.rs @@ -14,20 +14,20 @@ pub struct FormSubmit { props: Props, } -#[derive(Clone, Properties)] +#[derive(Clone, PartialEq, Properties)] pub struct Props { /// Text of submit. Required pub value: String, - /// Type submit style + /// Type submit style. Default `Palette::Standard` #[prop_or(Palette::Standard)] pub submit_palette: Palette, - /// the submit style according with the purpose + /// the submit style according with the purpose. Default `Style::Regular` #[prop_or(Style::Regular)] pub submit_style: Style, - /// the size of the submit + /// the size of the submit. Default `Size::Medium` #[prop_or(Size::Medium)] pub size: Size, - /// Whether the form control is disabled + /// Whether the form control is disabled. Default `false` #[prop_or(false)] pub disabled: bool, /// General property to get the ref of the component @@ -57,9 +57,12 @@ impl Component for FormSubmit { } fn change(&mut self, props: Self::Properties) -> ShouldRender { - self.props = props; - - true + if self.props != props { + self.props = props; + true + } else { + false + } } fn view(&self) -> Html { diff --git a/crate/yew_styles/src/components/forms/form_textarea.rs b/crate/yew_styles/src/components/forms/form_textarea.rs index 8c81cd7..7d561ce 100644 --- a/crate/yew_styles/src/components/forms/form_textarea.rs +++ b/crate/yew_styles/src/components/forms/form_textarea.rs @@ -64,14 +64,14 @@ pub struct FormTextArea { } /// Type of wraps. You can find more information [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) -#[derive(Clone)] +#[derive(Clone, PartialEq)] pub enum WrapText { Hard, Soft, Off, } -#[derive(Clone, Properties)] +#[derive(Clone, PartialEq, Properties)] pub struct Props { /// Current value of the form control. Required pub value: String, @@ -90,35 +90,35 @@ pub struct Props { /// Content to be appear in the form control when the form control is empty #[prop_or_default] pub placeholder: String, - /// The input style according with the purpose + /// The input style according with the purpose. Default `Palette::Standard` #[prop_or(Palette::Standard)] pub textarea_style: Palette, - /// The size of the input + /// The size of the input. Default `Size::Medium` #[prop_or(Size::Medium)] pub textarea_size: Size, - /// Maximum length (number of characters) of value + /// Maximum length (number of characters) of value. Default `1000` #[prop_or(1000)] pub maxlength: u32, /// Minimum length (number of characters) of value #[prop_or_default] pub minlength: u16, - /// Whether the form control is disabled - #[prop_or_default] + /// Whether the form control is disabled. Default `false` + #[prop_or(false)] pub disabled: bool, /// The name of the textarea #[prop_or_default] pub name: String, - /// The value is not editable - #[prop_or_default] + /// The value is not editable. Default `false` + #[prop_or(false)] pub readonly: bool, - /// A value is required or must be check for the form to be submittable - #[prop_or_default] + /// A value is required or must be check for the form to be submittable. Default `false` + #[prop_or(false)] pub required: bool, - /// Automatically focus the form control when the page is loaded - #[prop_or_default] + /// Automatically focus the form control when the page is loaded. Default `false` + #[prop_or(false)] pub autofocus: bool, - /// Hint for form autofill feature - #[prop_or_default] + /// Hint for form autofill feature. Default `false` + #[prop_or(false)] pub autocomplete: bool, /// The visible width of the text control #[prop_or_default] @@ -127,8 +127,8 @@ pub struct Props { #[prop_or_default] pub rows: u16, /// Specifies whether the "textarea" - /// is subject to spell checking by the underlying browser/OS - #[prop_or_default] + /// is subject to spell checking by the underlying browser/OS. Default `false` + #[prop_or(false)] pub spellcheck: bool, /// Signal to emit the event input #[prop_or(Callback::noop())] @@ -139,13 +139,13 @@ pub struct Props { /// Signal to emit the event keypress #[prop_or(Callback::noop())] pub onkeydown_signal: Callback, - /// Error state for validation - #[prop_or_default] + /// Error state for validation. Default `false` + #[prop_or(false)] pub error_state: bool, /// Show error message when error_state is true #[prop_or_default] pub error_message: String, - /// Indicates how the control wraps text + /// Indicates how the control wraps text. Default `WrapText::Soft` #[prop_or(WrapText::Soft)] pub wrap: WrapText, } @@ -182,8 +182,12 @@ impl Component for FormTextArea { } fn change(&mut self, props: Self::Properties) -> ShouldRender { - self.props = props; - true + if self.props != props { + self.props = props; + true + } else { + false + } } fn view(&self) -> Html { diff --git a/crate/yew_styles/src/components/layouts/container.rs b/crate/yew_styles/src/components/layouts/container.rs index 3908a5c..8b5efaf 100644 --- a/crate/yew_styles/src/components/layouts/container.rs +++ b/crate/yew_styles/src/components/layouts/container.rs @@ -74,7 +74,7 @@ pub struct Container { struct ContainerModel; /// Which direction are placing the items -#[derive(Clone)] +#[derive(Clone, PartialEq)] pub enum Direction { Row, RowReverse, @@ -83,14 +83,14 @@ pub enum Direction { } /// Set a wrap for the items -#[derive(Clone)] +#[derive(Clone, PartialEq)] pub enum Wrap { Nowrap, Wrap, WrapReverse, } -#[derive(Clone)] +#[derive(Clone, PartialEq)] pub enum Mode { SafeMode, UnsafeMode, @@ -98,7 +98,7 @@ pub enum Mode { } /// Set how will be justified the content -#[derive(Clone)] +#[derive(Clone, PartialEq)] pub enum JustifyContent { FlexStart(Mode), FlexEnd(Mode), @@ -113,7 +113,7 @@ pub enum JustifyContent { } /// Set how will be aligned the items -#[derive(Clone)] +#[derive(Clone, PartialEq)] pub enum AlignItems { Stretch(Mode), FlexStart(Mode), @@ -129,7 +129,7 @@ pub enum AlignItems { } /// set how will be aligned the content -#[derive(Clone)] +#[derive(Clone, PartialEq)] pub enum AlignContent { FlexStart(Mode), FlexEnd(Mode), @@ -147,19 +147,19 @@ pub enum AlignContent { pub enum Msg {} -#[derive(Clone, Properties)] +#[derive(Clone, PartialEq, Properties)] pub struct Props { /// Which direction are placing the items. Required pub direction: Direction, /// Set a wrap for the items. Required pub wrap: Wrap, - /// Set how will be justified the content + /// Set how will be justified the content. Default `JustifyContent::FlexStart(Mode::NoMode)` #[prop_or(JustifyContent::FlexStart(Mode::NoMode))] pub justify_content: JustifyContent, - /// Set how will be aligned the content + /// Set how will be aligned the content. Default `AlignContent::Stretch(Mode::NoMode)` #[prop_or(AlignContent::Stretch(Mode::NoMode))] pub align_content: AlignContent, - /// Set how will be aligned the items + /// Set how will be aligned the items. Default `AlignItems::Stretch(Mode::NoMode)` #[prop_or(AlignItems::Stretch(Mode::NoMode))] pub align_items: AlignItems, /// General property to get the ref of the component @@ -198,8 +198,12 @@ impl Component for Container { } fn change(&mut self, props: Self::Properties) -> ShouldRender { - self.props = props; - true + if self.props != props { + self.props = props; + true + } else { + false + } } fn view(&self) -> Html { diff --git a/crate/yew_styles/src/components/layouts/item.rs b/crate/yew_styles/src/components/layouts/item.rs index c912935..ea72880 100644 --- a/crate/yew_styles/src/components/layouts/item.rs +++ b/crate/yew_styles/src/components/layouts/item.rs @@ -5,7 +5,7 @@ use yew::prelude::*; use yew::{utils, App}; /// Percent of the layout that will take the item. -#[derive(Clone)] +#[derive(Clone, PartialEq)] pub enum ItemLayout { ItXs(i8), ItS(i8), @@ -15,7 +15,7 @@ pub enum ItemLayout { } /// Align the item itself -#[derive(Clone)] +#[derive(Clone, PartialEq)] pub enum AlignSelf { Auto, FlexStart, @@ -97,7 +97,7 @@ pub struct Item { pub key: String, } -#[derive(Clone)] +#[derive(Clone, PartialEq)] struct ItemProps { layouts_classes: String, class_name: String, @@ -106,12 +106,12 @@ struct ItemProps { #[derive(Clone, Copy)] struct ItemModel; -#[derive(Clone, Properties)] +#[derive(Clone, PartialEq, Properties)] pub struct Props { /// Percent of the layout that will take the item. Required pub layouts: Vec, + /// Align the item itself. Default `AlignSelf::Auto` #[prop_or(AlignSelf::Auto)] - /// Align the item itself pub align_self: AlignSelf, /// General property to get the ref of the component #[prop_or_default] @@ -158,8 +158,12 @@ impl Component for Item { } fn change(&mut self, props: Self::Properties) -> ShouldRender { - self.props = props; - true + if self.props != props { + self.props = props; + true + } else { + false + } } fn view(&self) -> Html { diff --git a/crate/yew_styles/src/components/modal.rs b/crate/yew_styles/src/components/modal.rs index 500042e..0e07e4c 100644 --- a/crate/yew_styles/src/components/modal.rs +++ b/crate/yew_styles/src/components/modal.rs @@ -114,13 +114,13 @@ pub struct Modal { props: Props, } -#[derive(Clone, Properties)] +#[derive(Clone, PartialEq, Properties)] pub struct Props { - /// Header of the modal + /// Header of the modal. Required pub header: Html, - /// body of the modal + /// body of the modal. Required pub body: Html, - /// if it is true, shows the modal otherwise is hidden + /// if it is true, shows the modal otherwise is hidden. Required pub is_open: bool, /// click event for modal (usually to close the modal) #[prop_or(Callback::noop())] @@ -128,31 +128,31 @@ pub struct Props { /// keyboard event for modal (usually to close the modal) #[prop_or(Callback::noop())] pub onkeydown_signal: Callback, - /// Type modal background style + /// Type modal background style. Default `Palette::Standard` #[prop_or(Palette::Standard)] pub modal_palette: Palette, - /// Three diffent modal standard sizes + /// Three diffent modal standard sizes. Default `Size::Medium` #[prop_or(Size::Medium)] pub modal_size: Size, - /// Type modal header style + /// Type modal header style. Default `Palette::Standard` #[prop_or(Palette::Standard)] pub header_palette: Palette, - /// Modal header styles + /// Modal header styles. Default `Style::Regular` #[prop_or(Style::Regular)] pub header_style: Style, - /// If hove, focus, active effects are enable in the header + /// If hove, focus, active effects are enable in the header. Default `false` #[prop_or(false)] pub header_interaction: bool, - /// Type modal body style + /// Type modal body style. Default `Palette::Standard` #[prop_or(Palette::Standard)] pub body_palette: Palette, - /// Modal body styles + /// Modal body styles. Default `Style::Regular` #[prop_or(Style::Regular)] pub body_style: Style, - /// If hove, focus, active effects are enable in the body + /// If hove, focus, active effects are enable in the body. Default `false` #[prop_or(false)] pub body_interaction: bool, - /// If the modal content get the focus. Set to false if the modal includes input events + /// If the modal content get the focus. Set to false if the modal includes input events. Default `true` #[prop_or(true)] pub auto_focus: bool, /// General property to get the ref of the component @@ -204,8 +204,12 @@ impl Component for Modal { } fn change(&mut self, props: Self::Properties) -> ShouldRender { - self.props = props; - true + if self.props != props { + self.props = props; + true + } else { + false + } } fn rendered(&mut self, _first_render: bool) { diff --git a/crate/yew_styles/src/components/navbar/navbar_component.rs b/crate/yew_styles/src/components/navbar/navbar_component.rs index a7366a5..30f9763 100644 --- a/crate/yew_styles/src/components/navbar/navbar_component.rs +++ b/crate/yew_styles/src/components/navbar/navbar_component.rs @@ -7,18 +7,6 @@ use yew::prelude::*; use yew::Children; use yew_assets::ux_assets::{UxAssets, UxIcon}; -/// the location of the navbar which is fixed -#[derive(Clone, PartialEq)] -pub enum Fixed { - None, - Top, - Bottom, -} - -pub enum Msg { - TroggleMenu, -} - /// # Navbar component /// /// ## Features required @@ -44,10 +32,12 @@ pub enum Msg { /// /// pub struct App { /// link: ComponentLink, +/// close_navbar_mobile: bool, /// } /// /// pub enum Msg { /// ChangeMenu(String), +/// CloseNavarMobile(MouseEvent), /// } /// #[derive(Clone, Properties)] /// pub struct Props {} @@ -68,6 +58,28 @@ pub enum Msg { /// let mut console = ConsoleService::new(); /// console.log(format!("{}", menu)) /// } +/// }Msg::CloseNavarMobile(mouse_event) => { +/// let target_class = mouse_event +/// .target() +/// .unwrap() +/// .dyn_into::() +/// .unwrap() +/// .class_list(); +/// +/// let target_parent = mouse_event +/// .target() +/// .unwrap() +/// .dyn_into::() +/// .unwrap() +/// .parent_element() +/// .unwrap() +/// .tag_name(); +/// +/// if !target_class.value().contains("navbar-menu") && target_parent != "svg" { +/// self.close_navbar_mobile = true; +/// } else { +/// self.close_navbar_mobile = false +/// } /// } /// false /// } @@ -78,34 +90,37 @@ pub enum Msg { /// /// fn view(&self) -> Html { /// html! { -/// }> -/// -/// -/// {"Home"} -/// -/// -/// {"Shop"} -/// -/// -/// {"Shop"} -/// -/// -/// {"About us"} -/// -/// -/// {"Contact"} -/// -/// -/// +///
+/// }> +/// +/// +/// {"Home"} +/// +/// +/// {"Shop"} +/// +/// +/// {"Shop"} +/// +/// +/// {"About us"} +/// +/// +/// {"Contact"} +/// +/// +/// +///
/// } /// } /// } @@ -120,10 +135,13 @@ struct NavbarModel; #[derive(Clone, Properties)] pub struct Props { - /// Type navbar style + /// Type navbar style. Default `Standard` #[prop_or(Palette::Standard)] pub navbar_palette: Palette, - /// Navbar styles + /// Hide Navbar items in mobile. Default `false` + #[prop_or(false)] + pub hide_navbar_items_mobile: bool, + /// Navbar styles. Default Regular #[prop_or(Style::Regular)] pub navbar_style: Style, /// General property to get the ref of the component @@ -138,7 +156,7 @@ pub struct Props { /// General property to add custom id #[prop_or_default] pub id: String, - /// The location of the navbar which is fixed + /// The location of the navbar which is fixed. Default `Fixed::Top` #[prop_or(Fixed::Top)] pub fixed: Fixed, /// Vnode embedded in the beginning of the navbar, useful to include a branch logo @@ -151,6 +169,7 @@ pub struct Props { pub struct NavbarProps { pub navbar_palette: String, pub navbar_style: String, + pub hide_navbar_items_mobile: bool, pub key: String, pub code_ref: NodeRef, pub id: String, @@ -165,6 +184,7 @@ impl From for NavbarProps { NavbarProps { navbar_palette: get_pallete(props.navbar_palette), navbar_style: get_style(props.navbar_style), + hide_navbar_items_mobile: props.hide_navbar_items_mobile, key: props.key, code_ref: props.code_ref, id: props.id, @@ -176,6 +196,18 @@ impl From for NavbarProps { } } +/// the location of the navbar which is fixed +#[derive(Clone, PartialEq)] +pub enum Fixed { + None, + Top, + Bottom, +} + +pub enum Msg { + TroggleMenu, +} + impl Component for Navbar { type Message = Msg; type Properties = Props; @@ -207,6 +239,9 @@ impl Component for Navbar { fn change(&mut self, props: Self::Properties) -> ShouldRender { NavbarModel.init(self.props.clone()); self.props = NavbarProps::from(props); + if self.props.hide_navbar_items_mobile && self.display_menu { + self.display_menu = false; + } true } @@ -230,6 +265,7 @@ impl Component for Navbar { class_name="navbar-container-mobile"> ShouldRender { - self.props = props; - true + if self.props != props { + self.props = props; + true + } else { + false + } } fn view(&self) -> Html { diff --git a/crate/yew_styles/src/components/navbar/navbar_item.rs b/crate/yew_styles/src/components/navbar/navbar_item.rs index 7988cda..25775d2 100644 --- a/crate/yew_styles/src/components/navbar/navbar_item.rs +++ b/crate/yew_styles/src/components/navbar/navbar_item.rs @@ -103,7 +103,7 @@ pub struct NavbarItem { props: Props, } -#[derive(Clone, Properties)] +#[derive(Clone, PartialEq, Properties)] pub struct Props { /// General property to get the ref of the component #[prop_or_default] @@ -117,10 +117,10 @@ pub struct Props { /// General property to add custom id #[prop_or_default] pub id: String, - /// Active nav item style + /// Active nav item style. Default false #[prop_or(false)] pub active: bool, - /// click event for navbar item + /// Click event for navbar item #[prop_or(Callback::noop())] pub onclick_signal: Callback, pub children: Children, @@ -145,8 +145,12 @@ impl Component for NavbarItem { } fn change(&mut self, props: Self::Properties) -> ShouldRender { - self.props = props; - true + if self.props != props { + self.props = props; + true + } else { + false + } } fn view(&self) -> Html { diff --git a/crate/yew_styles/src/components/text.rs b/crate/yew_styles/src/components/text.rs index 9e64a68..de46e06 100644 --- a/crate/yew_styles/src/components/text.rs +++ b/crate/yew_styles/src/components/text.rs @@ -155,7 +155,7 @@ pub struct Text { props: Props, } -#[derive(Clone)] +#[derive(Clone, PartialEq)] pub enum Header { H1, H2, @@ -165,7 +165,7 @@ pub enum Header { H6, } -#[derive(Clone)] +#[derive(Clone, PartialEq)] pub enum TextType { Title(Header), Plain, @@ -174,13 +174,13 @@ pub enum TextType { Tag, } -#[derive(Clone, Properties)] +#[derive(Clone, PartialEq, Properties)] pub struct Props { - /// Text to show + /// Text to show. Required pub text: String, - /// How is showing the text + /// How is showing the text. Required pub text_type: TextType, - /// if hove, focus, active effects are enable. Only for tag type + /// if hove, focus, active effects are enable. Only for tag type. Default `false` #[prop_or(false)] pub interaction_effect: bool, /// A dragged item (element or text selection) is dragged. Only for tag type @@ -214,19 +214,19 @@ pub struct Props { /// Click event only for text tag type with removable in true #[prop_or(Callback::noop())] pub ondelete_signal: Callback, - /// If the item is draggable. Only for tag type + /// If the item is draggable. Only for tag type. Default `false` #[prop_or(false)] pub draggable: bool, - /// If the tag can be deleted + /// If the tag can be deleted. Default `false` #[prop_or(false)] pub removable: bool, - /// Type text purpose style. Only for tag and alert type + /// Type text purpose style. Only for tag and alert type. Default `Palette::Standard` #[prop_or(Palette::Standard)] pub text_palette: Palette, - /// Text styles. Only for tag and alert type + /// Text styles. Only for tag and alert type. Default `Style::Regular` #[prop_or(Style::Regular)] pub text_style: Style, - /// Three diffent text standard sizes. Not for title type + /// Three diffent text standard sizes. Not for title type. Default `Size::Medium` #[prop_or(Size::Medium)] pub text_size: Size, /// General property to get the ref of the component @@ -298,8 +298,12 @@ impl Component for Text { } fn change(&mut self, props: Self::Properties) -> ShouldRender { - self.props = props; - true + if self.props != props { + self.props = props; + true + } else { + false + } } fn view(&self) -> Html { diff --git a/crate/yew_styles/src/styles.rs b/crate/yew_styles/src/styles.rs index 7339efc..226a13e 100644 --- a/crate/yew_styles/src/styles.rs +++ b/crate/yew_styles/src/styles.rs @@ -1,5 +1,5 @@ /// Palette of styles according with the purpose -#[derive(Clone)] +#[derive(Clone, PartialEq)] pub enum Palette { Primary, Secondary, @@ -33,7 +33,7 @@ pub enum Size { } /// Standars button styles -#[derive(Clone)] +#[derive(Clone, PartialEq)] pub enum Style { Regular, Outline,