From 51bfb3c05a60799e00ac64c251fcc0b50e2bb824 Mon Sep 17 00:00:00 2001 From: Mike Myers Date: Mon, 29 Apr 2024 02:15:07 -0400 Subject: [PATCH 01/20] Remove fixed width on version switcher (#184) --- demo/src/components/site_header.rs | 3 --- 1 file changed, 3 deletions(-) diff --git a/demo/src/components/site_header.rs b/demo/src/components/site_header.rs index 5777aef..dad18b3 100644 --- a/demo/src/components/site_header.rs +++ b/demo/src/components/site_header.rs @@ -103,9 +103,6 @@ pub fn SiteHeader() -> impl IntoView { .demo-header__menu-popover-mobile { padding: 0; } - .demo-header__right-btn .thaw-select { - width: 60px; - } @media screen and (max-width: 600px) { .demo-header { padding: 0 8px; From 18658044c2a2d3d9fbf0297606922d7604789d80 Mon Sep 17 00:00:00 2001 From: Yu Sun Date: Tue, 7 May 2024 23:36:36 +0800 Subject: [PATCH 02/20] Use fully qualified syntax in the example of Drawer (#187) * perf: replace `expect` with `unwrap_or_else` The macro/functions in `expect` is not lazy, which means it will always be called * style: remove needless borrowing * perf: remove needless clone * style: remove needless `format!` * style: use `and_then` instead * style: use `?` instead * style: remove needless closure * fix: use fully qualified syntax instead https://github.com/rust-lang/rust/issues/48919 * style: formatted * style: fix some other clippy issues --- demo/src/pages/nav_bar/mod.rs | 1 - demo_markdown/docs/drawer/mod.md | 8 +++---- demo_markdown/src/lib.rs | 2 +- demo_markdown/src/markdown/code_block.rs | 12 ++++------ demo_markdown/src/markdown/mod.rs | 23 ++++++++++++-------- thaw/src/back_top/mod.rs | 3 ++- thaw/src/back_top/theme.rs | 1 - thaw_utils/src/class_list.rs | 6 +++++ thaw_utils/src/dom/get_scroll_parent.rs | 4 +--- thaw_utils/src/hooks/use_click_position.rs | 4 +--- thaw_utils/src/hooks/use_lock_html_scroll.rs | 2 +- thaw_utils/src/hooks/use_next_frame.rs | 2 +- thaw_utils/src/throttle.rs | 2 +- 13 files changed, 36 insertions(+), 34 deletions(-) diff --git a/demo/src/pages/nav_bar/mod.rs b/demo/src/pages/nav_bar/mod.rs index 9d15988..79709a7 100644 --- a/demo/src/pages/nav_bar/mod.rs +++ b/demo/src/pages/nav_bar/mod.rs @@ -4,7 +4,6 @@ use leptos::*; use thaw::mobile::{NavBar, NavBarRight}; use thaw::Icon; - #[component] pub fn NavBarPage() -> impl IntoView { view! { diff --git a/demo_markdown/docs/drawer/mod.md b/demo_markdown/docs/drawer/mod.md index 234fd4e..01d2c34 100644 --- a/demo_markdown/docs/drawer/mod.md +++ b/demo_markdown/docs/drawer/mod.md @@ -13,10 +13,10 @@ let open = Callback::new(move |new_placement: DrawerPlacement| { view! { - - - - + + + + "Hello" diff --git a/demo_markdown/src/lib.rs b/demo_markdown/src/lib.rs index 30e7bd7..e5322c7 100644 --- a/demo_markdown/src/lib.rs +++ b/demo_markdown/src/lib.rs @@ -96,7 +96,7 @@ pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenSt links ); syn::parse_str::(&toc) - .expect(&format!("Cannot be resolved as a function: \n {toc}")) + .unwrap_or_else(|_| panic!("Cannot be resolved as a function: \n {toc}")) }; let demos: Vec = demos diff --git a/demo_markdown/src/markdown/code_block.rs b/demo_markdown/src/markdown/code_block.rs index 92afdab..6f3db63 100644 --- a/demo_markdown/src/markdown/code_block.rs +++ b/demo_markdown/src/markdown/code_block.rs @@ -18,8 +18,7 @@ pub fn to_tokens(code_block: &NodeCodeBlock, demos: &mut Vec) -> TokenSt let literal = langs .iter() .find(|lang| lang != &&"demo") - .map(|lang| highlight_to_html(&code_block.literal, lang)) - .flatten() + .and_then(|lang| highlight_to_html(&code_block.literal, lang)) .unwrap_or_else(|| { is_highlight = false; code_block.literal.clone() @@ -37,8 +36,7 @@ pub fn to_tokens(code_block: &NodeCodeBlock, demos: &mut Vec) -> TokenSt let mut is_highlight = true; let literal = langs .first() - .map(|lang| highlight_to_html(&code_block.literal, lang)) - .flatten() + .and_then(|lang| highlight_to_html(&code_block.literal, lang)) .unwrap_or_else(|| { is_highlight = false; code_block.literal.clone() @@ -56,10 +54,8 @@ pub fn to_tokens(code_block: &NodeCodeBlock, demos: &mut Vec) -> TokenSt static SYNTAX_SET: OnceLock = OnceLock::new(); fn highlight_to_html(text: &str, syntax: &str) -> Option { - let syntax_set = SYNTAX_SET.get_or_init(|| SyntaxSet::load_defaults_newlines()); - let Some(syntax) = syntax_set.find_syntax_by_token(syntax) else { - return None; - }; + let syntax_set = SYNTAX_SET.get_or_init(SyntaxSet::load_defaults_newlines); + let syntax = syntax_set.find_syntax_by_token(syntax)?; let mut html_generator = ClassedHTMLGenerator::new_with_class_style( syntax, diff --git a/demo_markdown/src/markdown/mod.rs b/demo_markdown/src/markdown/mod.rs index 95f8d0d..30febb6 100644 --- a/demo_markdown/src/markdown/mod.rs +++ b/demo_markdown/src/markdown/mod.rs @@ -8,7 +8,10 @@ use proc_macro2::{Ident, Span, TokenStream}; use quote::quote; use syn::ItemMacro; -pub fn parse_markdown(md_text: &str) -> Result<(TokenStream, Vec, Vec<(String, String)>), String> { +#[allow(clippy::type_complexity)] +pub fn parse_markdown( + md_text: &str, +) -> Result<(TokenStream, Vec, Vec<(String, String)>), String> { let mut demos: Vec = vec![]; let mut toc: Vec<(String, String)> = vec![]; @@ -16,7 +19,7 @@ pub fn parse_markdown(md_text: &str) -> Result<(TokenStream, Vec, Vec<(S let mut options = comrak::Options::default(); options.extension.table = true; - let root = parse_document(&arena, &md_text, &options); + let root = parse_document(&arena, md_text, &options); let body = iter_nodes(md_text, root, &mut demos, &mut toc); Ok((body, demos, toc)) } @@ -45,10 +48,12 @@ fn iter_nodes<'a>( NodeValue::HtmlBlock(node_html_block) => { let html = syn::parse_str::(&format!("view! {{ {} }}", node_html_block.literal)) - .expect(&format!( - "Cannot be resolved as a macro: \n {}", - node_html_block.literal - )); + .unwrap_or_else(|_| { + panic!( + "Cannot be resolved as a macro: \n {}", + node_html_block.literal + ) + }); quote!( { #html @@ -62,10 +67,10 @@ fn iter_nodes<'a>( ), NodeValue::Heading(node_h) => { let sourcepos = node.data.borrow().sourcepos; - let text = range_text(md_text, sourcepos.start.clone(), sourcepos.end.clone()); + let text = range_text(md_text, sourcepos.start, sourcepos.end); let level = node_h.level as usize + 1; let text = text[level..].to_string(); - let h_id = format!("{}", text.replace(' ', "-").to_ascii_lowercase()); + let h_id = text.replace(' ', "-").to_ascii_lowercase().to_string(); toc.push((h_id.clone(), text)); let h = Ident::new(&format!("h{}", node_h.level), Span::call_site()); quote!( @@ -186,7 +191,7 @@ fn range_text(text: &str, start: LineColumn, end: LineColumn) -> &str { let mut current_line_num = start_line + 1; while current_line_num < end_line { let next_line = lines.next().unwrap_or(""); - start_line_text = &next_line; + start_line_text = next_line; current_line_num += 1; } diff --git a/thaw/src/back_top/mod.rs b/thaw/src/back_top/mod.rs index 639b880..e2e22c6 100644 --- a/thaw/src/back_top/mod.rs +++ b/thaw/src/back_top/mod.rs @@ -6,7 +6,8 @@ use crate::{use_theme, Icon, Theme}; use leptos::{html::ToHtmlElement, *}; use thaw_components::{CSSTransition, Fallback, OptionComp, Teleport}; use thaw_utils::{ - add_event_listener, class_list, get_scroll_parent, mount_style, EventListenerHandle, OptionalProp, + add_event_listener, class_list, get_scroll_parent, mount_style, EventListenerHandle, + OptionalProp, }; #[component] diff --git a/thaw/src/back_top/theme.rs b/thaw/src/back_top/theme.rs index 10cec49..d8e7ebb 100644 --- a/thaw/src/back_top/theme.rs +++ b/thaw/src/back_top/theme.rs @@ -3,7 +3,6 @@ use crate::theme::ThemeMethod; #[derive(Clone)] pub struct BackTopTheme { pub background_color: String, - } impl ThemeMethod for BackTopTheme { diff --git a/thaw_utils/src/class_list.rs b/thaw_utils/src/class_list.rs index 567beac..8ed7894 100644 --- a/thaw_utils/src/class_list.rs +++ b/thaw_utils/src/class_list.rs @@ -5,6 +5,12 @@ use std::{collections::HashSet, rc::Rc}; pub struct ClassList(RwSignal>>); +impl Default for ClassList { + fn default() -> Self { + Self::new() + } +} + impl ClassList { pub fn new() -> Self { Self(RwSignal::new(HashSet::new())) diff --git a/thaw_utils/src/dom/get_scroll_parent.rs b/thaw_utils/src/dom/get_scroll_parent.rs index 29dd9d6..16dfc9e 100644 --- a/thaw_utils/src/dom/get_scroll_parent.rs +++ b/thaw_utils/src/dom/get_scroll_parent.rs @@ -4,9 +4,7 @@ use leptos::{ }; pub fn get_scroll_parent(element: &HtmlElement) -> Option> { - let Some(parent_element) = get_parent_element(element) else { - return None; - }; + let parent_element = get_parent_element(element)?; if parent_element.node_type() == 9 { return Some(parent_element); diff --git a/thaw_utils/src/hooks/use_click_position.rs b/thaw_utils/src/hooks/use_click_position.rs index 49df597..d2aeec2 100644 --- a/thaw_utils/src/hooks/use_click_position.rs +++ b/thaw_utils/src/hooks/use_click_position.rs @@ -12,9 +12,7 @@ pub fn use_click_position() -> ReadSignal> { if event.client_x() > 0 || event.client_y() > 0 { return Some((event.client_x(), event.client_y())); } - let Some(target) = event.target() else { - return None; - }; + let target = event.target()?; let Ok(target) = target.dyn_into::() else { return None; diff --git a/thaw_utils/src/hooks/use_lock_html_scroll.rs b/thaw_utils/src/hooks/use_lock_html_scroll.rs index 091178c..7a9daf2 100644 --- a/thaw_utils/src/hooks/use_lock_html_scroll.rs +++ b/thaw_utils/src/hooks/use_lock_html_scroll.rs @@ -20,7 +20,7 @@ pub fn use_lock_html_scroll(is_lock: MaybeSignal) { let style = document() .create_element("style") .expect("create style element error"); - _ = style.set_attribute("data-id", &format!("thaw-lock-html-scroll")); + _ = style.set_attribute("data-id", "thaw-lock-html-scroll"); style.set_text_content(Some("html { overflow: hidden; }")); _ = head.append_child(&style); style_el.set_value(Some(style)); diff --git a/thaw_utils/src/hooks/use_next_frame.rs b/thaw_utils/src/hooks/use_next_frame.rs index 7b1a60b..efa4673 100644 --- a/thaw_utils/src/hooks/use_next_frame.rs +++ b/thaw_utils/src/hooks/use_next_frame.rs @@ -22,7 +22,7 @@ impl NextFrame { pub fn run(&self, cb: impl FnOnce() + 'static) { self.cancel(); - let next_frame_hadnle = self.0.clone(); + let next_frame_hadnle = self.0; let handle = request_animation_frame_with_handle(move || { let handle = request_animation_frame_with_handle(cb).unwrap(); next_frame_hadnle.set_value(Some(handle)); diff --git a/thaw_utils/src/throttle.rs b/thaw_utils/src/throttle.rs index 0c970ae..ebcb7b7 100644 --- a/thaw_utils/src/throttle.rs +++ b/thaw_utils/src/throttle.rs @@ -1,7 +1,7 @@ use leptos::{leptos_dom::helpers::TimeoutHandle, *}; use std::time::Duration; -pub fn throttle(cb: impl Fn() + 'static, duration: Duration) -> impl Fn() -> () { +pub fn throttle(cb: impl Fn() + 'static, duration: Duration) -> impl Fn() { let cb = Callback::new(move |_| cb()); let timeout_handle = StoredValue::new(None::); on_cleanup(move || { From 30fe3f72bf00e8fa259d97b6332c0e7ff35f0dbd Mon Sep 17 00:00:00 2001 From: Yu Sun Date: Wed, 8 May 2024 22:31:17 +0800 Subject: [PATCH 03/20] fix(Message): interchange the icons of `MessageVariant::Success` and `MessageVariant::Error` (#188) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit It should be the ✓ for success and the ✗ for error to make more intuitive sense. --- thaw/src/message/mod.rs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/thaw/src/message/mod.rs b/thaw/src/message/mod.rs index 58ad70c..cd8a97d 100644 --- a/thaw/src/message/mod.rs +++ b/thaw/src/message/mod.rs @@ -20,9 +20,9 @@ pub enum MessageVariant { impl MessageVariant { fn icon(&self) -> icondata_core::Icon { match self { - MessageVariant::Success => icondata_ai::AiCloseCircleFilled, + MessageVariant::Success => icondata_ai::AiCheckCircleFilled, MessageVariant::Warning => icondata_ai::AiExclamationCircleFilled, - MessageVariant::Error => icondata_ai::AiCheckCircleFilled, + MessageVariant::Error => icondata_ai::AiCloseCircleFilled, } } fn theme_color(&self, theme: &Theme) -> String { From 3edb401f0aeb74a933bcbddc6b3df8e7d528c861 Mon Sep 17 00:00:00 2001 From: kandrelczyk Date: Fri, 17 May 2024 05:04:02 +0200 Subject: [PATCH 04/20] fix scrollbar panic (#193) --- thaw/src/scrollbar/mod.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/thaw/src/scrollbar/mod.rs b/thaw/src/scrollbar/mod.rs index d51c1b2..6ad6411 100644 --- a/thaw/src/scrollbar/mod.rs +++ b/thaw/src/scrollbar/mod.rs @@ -157,7 +157,7 @@ pub fn Scrollbar( sync_scroll_state(); }; let on_mouseleave = move |_| { - thumb_status.update_value(|thumb_status| { + thumb_status.try_update_value(|thumb_status| { if thumb_status.is_some() { *thumb_status = Some(ThumbStatus::DelayLeave); } else { From 9259bdc723cc7c224c900b9f3a72a8a08e4bb415 Mon Sep 17 00:00:00 2001 From: kandrelczyk Date: Fri, 17 May 2024 16:32:29 +0000 Subject: [PATCH 05/20] icon missaligment in message fix (#194) * Hi @luoxiaozero, I've just noticed the same issue as described here (https://github.com/thaw-ui/thaw/issues/190) and tracked it down to tailwindcss. In the output.css generated by it we have: ``` /* 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design. */ img, svg, video, canvas, audio, iframe, embed, object { display: block; /* 1 */ vertical-align: middle; /* 2 */ } ``` Your recent change sets the display to inline-block (https://github.com/thaw-ui/thaw/commit/983e85728a21f0443f1ef0eb02b5da81c54b5ed4) and this collides with the 'vertical-align' set by tailwindcss. Changing the vertical-align property to 'top' fixes the misalignment so I think the simplest fix is to add 'vertical-align: top' to icon.css. I don't see it affecting anything else so it should be safe. * icon missaligment fix --- thaw/src/icon/icon.css | 3 ++- thaw/src/message/message.css | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/thaw/src/icon/icon.css b/thaw/src/icon/icon.css index f941790..1363e76 100644 --- a/thaw/src/icon/icon.css +++ b/thaw/src/icon/icon.css @@ -1,3 +1,4 @@ .thaw-icon { display: inline-block; -} \ No newline at end of file + vertical-align: baseline; +} diff --git a/thaw/src/message/message.css b/thaw/src/message/message.css index 46c3091..997f89e 100644 --- a/thaw/src/message/message.css +++ b/thaw/src/message/message.css @@ -105,6 +105,7 @@ } .thaw-message__icon { + display: flex; width: 20px; height: 20px; margin-right: 10px; From ab3ea810de13ae11f4058283e8efb28a59fc9467 Mon Sep 17 00:00:00 2001 From: luoxiaozero <48741584+luoxiaozero@users.noreply.github.com> Date: Sat, 18 May 2024 16:08:44 +0800 Subject: [PATCH 06/20] fix: Image object-fit (#195) --- demo_markdown/docs/image/mod.md | 2 +- thaw/src/image/mod.rs | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/demo_markdown/docs/image/mod.md b/demo_markdown/docs/image/mod.md index 46bee1f..0a5d888 100644 --- a/demo_markdown/docs/image/mod.md +++ b/demo_markdown/docs/image/mod.md @@ -3,7 +3,7 @@ ```rust demo view! { - + } ``` diff --git a/thaw/src/image/mod.rs b/thaw/src/image/mod.rs index 46eaa75..5cf8337 100644 --- a/thaw/src/image/mod.rs +++ b/thaw/src/image/mod.rs @@ -29,6 +29,12 @@ pub fn Image( style.push_str(&format!("border-radius: {border_radius};")) } + if let Some(object_fit) = object_fit.as_ref().map(|object_fit| object_fit.get()) { + if !object_fit.is_empty() { + style.push_str(&format!("object-fit: {object_fit};")) + } + } + style }; @@ -38,7 +44,6 @@ pub fn Image( src=src.map(|s| move || s.get()) alt=alt.map(|a| move || a.get()) style=style - object_fit=object_fit.map(|o| move || o.get()) /> } } From 3266ac7068fbe7f078013c5ed3df5527ee5147a6 Mon Sep 17 00:00:00 2001 From: luoxiaozero <48741584+luoxiaozero@users.noreply.github.com> Date: Mon, 20 May 2024 14:19:48 +0800 Subject: [PATCH 07/20] feat: Switch adds on_change prop (#196) --- demo_markdown/docs/switch/mod.md | 20 +++++++++++++++----- thaw/src/switch/mod.rs | 10 +++++++++- 2 files changed, 24 insertions(+), 6 deletions(-) diff --git a/demo_markdown/docs/switch/mod.md b/demo_markdown/docs/switch/mod.md index 399d681..b7e0307 100644 --- a/demo_markdown/docs/switch/mod.md +++ b/demo_markdown/docs/switch/mod.md @@ -3,14 +3,24 @@ ```rust demo let value = create_rw_signal(false); +let message = use_message(); +let on_change = move |value: bool| { + message.create( + format!("{value}"), + MessageVariant::Success, + Default::default(), + ); +}; + view! { - + } ``` ### Switch Props -| Name | Type | Default | Description | -| ----- | ----------------------------------- | -------------------- | ----------------------------------------- | -| class | `OptionalProp>` | `Default::default()` | Addtional classes for the switch element. | -| value | `Model` | `false` | Switch's value. | +| Name | Type | Default | Description | +| --------- | ----------------------------------- | -------------------- | ------------------------------------------- | +| class | `OptionalProp>` | `Default::default()` | Addtional classes for the switch element. | +| value | `Model` | `false` | Switch's value. | +| on_change | `Option` | `None` | Trigger when the checked state is changing. | diff --git a/thaw/src/switch/mod.rs b/thaw/src/switch/mod.rs index cee6148..7e51e6d 100644 --- a/thaw/src/switch/mod.rs +++ b/thaw/src/switch/mod.rs @@ -9,6 +9,7 @@ use thaw_utils::{class_list, mount_style, Model, OptionalProp}; #[component] pub fn Switch( #[prop(optional, into)] value: Model, + #[prop(optional, into)] on_change: Option>, #[prop(optional, into)] class: OptionalProp>, ) -> impl IntoView { mount_style("switch", include_str!("./switch.css")); @@ -27,6 +28,13 @@ pub fn Switch( }); css_vars }); + let on_click = move |_| { + let new_value = !value.get_untracked(); + value.set(new_value); + if let Some(on_change) = on_change { + on_change.call(new_value); + } + }; view! {
From bf48bcca827da3f5a942ceed23560fed1e5ca4f5 Mon Sep 17 00:00:00 2001 From: luoxiaozero <48741584+luoxiaozero@users.noreply.github.com> Date: Mon, 20 May 2024 23:18:33 +0800 Subject: [PATCH 08/20] Update README.md --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 11ad274..ac7b174 100644 --- a/README.md +++ b/README.md @@ -4,10 +4,12 @@

Thaw UI

An easy to use leptos component library

-## Documentation +## Documentation & Community [https://thawui.vercel.app](https://thawui.vercel.app) +[Discord](https://discord.gg/YPxuprzu6M) + ## Leptos compatibility | Crate version | Compatible Leptos version | From 5320793ca9420d5a69bf4414823e7e9001a426ee Mon Sep 17 00:00:00 2001 From: luoxiao Date: Tue, 21 May 2024 21:41:48 +0800 Subject: [PATCH 09/20] v0.3.2 --- CHANGELOG.md | 13 +++++++++++++ Cargo.toml | 6 +++--- thaw/Cargo.toml | 2 +- thaw_components/Cargo.toml | 2 +- thaw_utils/Cargo.toml | 2 +- 5 files changed, 19 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 08d75ca..b11da24 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,16 @@ +## [0.3.2](https://github.com/thaw-ui/thaw/compare/v0.3.1...v0.3.2) (2024-05-21) + +### Features + +* `Switch` adds on_change prop, closes [#196](https://github.com/thaw-ui/thaw/pull/196). + +### Bug Fixs + +* `Image` object-fit, closes [#195](https://github.com/thaw-ui/thaw/pull/195). +* `Icon` missaligment in message fix, closes [#194](https://github.com/thaw-ui/thaw/pull/194). +* fix `Scrollbar` panic, closes [#193](https://github.com/thaw-ui/thaw/pull/193). +* interchange the icons of MessageVariant::Success and MessageVariant::Error, closes [#188](https://github.com/thaw-ui/thaw/pull/188). + ## [0.3.1](https://github.com/thaw-ui/thaw/compare/v0.3.0...v0.3.1) (2024-04-27) ### Features diff --git a/Cargo.toml b/Cargo.toml index 72f1c9a..240345e 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -4,6 +4,6 @@ members = ["thaw", "thaw_components", "thaw_utils", "demo", "demo_markdown"] exclude = ["examples"] [workspace.dependencies] -thaw = { version = "0.3.1", path = "./thaw" } -thaw_components = { version = "0.1.1", path = "./thaw_components" } -thaw_utils = { version = "0.0.3", path = "./thaw_utils" } +thaw = { version = "0.3.2", path = "./thaw" } +thaw_components = { version = "0.1.2", path = "./thaw_components" } +thaw_utils = { version = "0.0.4", path = "./thaw_utils" } diff --git a/thaw/Cargo.toml b/thaw/Cargo.toml index 1e7b58a..3133fbb 100644 --- a/thaw/Cargo.toml +++ b/thaw/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "thaw" -version = "0.3.1" +version = "0.3.2" edition = "2021" keywords = ["web", "leptos", "ui", "thaw", "component"] readme = "../README.md" diff --git a/thaw_components/Cargo.toml b/thaw_components/Cargo.toml index ae140ba..997fe70 100644 --- a/thaw_components/Cargo.toml +++ b/thaw_components/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "thaw_components" -version = "0.1.1" +version = "0.1.2" edition = "2021" keywords = ["leptos", "thaw", "components"] readme = "../README.md" diff --git a/thaw_utils/Cargo.toml b/thaw_utils/Cargo.toml index ad14846..f5182ec 100644 --- a/thaw_utils/Cargo.toml +++ b/thaw_utils/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "thaw_utils" -version = "0.0.3" +version = "0.0.4" edition = "2021" keywords = ["leptos", "thaw", "utils"] readme = "../README.md" From cb37d9cfe9a60c020557572ee42ab75250c719e9 Mon Sep 17 00:00:00 2001 From: luoxiaozero <48741584+luoxiaozero@users.noreply.github.com> Date: Thu, 23 May 2024 23:06:01 +0800 Subject: [PATCH 10/20] feat: MenuItem adds icon prop (#200) --- demo_markdown/docs/menu/mod.md | 17 +++++++++++------ thaw/src/menu/menu-item.css | 2 ++ thaw/src/menu/menu_item.rs | 15 +++++++++++++-- thaw/src/select/raw.rs | 4 ++++ 4 files changed, 30 insertions(+), 8 deletions(-) diff --git a/demo_markdown/docs/menu/mod.md b/demo_markdown/docs/menu/mod.md index ea2ef07..b8e2768 100644 --- a/demo_markdown/docs/menu/mod.md +++ b/demo_markdown/docs/menu/mod.md @@ -5,8 +5,12 @@ let value = create_rw_signal(String::from("o")); view! { - - + + + + + + } ``` @@ -29,8 +33,9 @@ view! { ### MenuItem Props -| Name | Type | Default | Description | -| ----- | ----------------------------------- | -------------------- | -------------------------------------------- | +| Name | Type | Default | Description | +| --- | --- | --- | --- | | class | `OptionalProp>` | `Default::default()` | Addtional classes for the menu item element. | -| label | `MaybeSignal` | `Default::default()` | The label of the menu item. | -| key | `MaybeSignal` | `Default::default()` | The indentifier of the menu item. | +| label | `MaybeSignal` | `Default::default()` | The label of the menu item. | +| key | `MaybeSignal` | `Default::default()` | The indentifier of the menu item. | +| icon | `OptionalMaybeSignal` | `None` | The icon of the menu item. | diff --git a/thaw/src/menu/menu-item.css b/thaw/src/menu/menu-item.css index 7a8772a..29b9e72 100644 --- a/thaw/src/menu/menu-item.css +++ b/thaw/src/menu/menu-item.css @@ -1,4 +1,6 @@ .thaw-menu-item__content { + display: flex; + align-items: center; margin: 0.3rem 0.4rem; padding: 0.5rem 0.75rem; color: var(--thaw-font-color); diff --git a/thaw/src/menu/menu_item.rs b/thaw/src/menu/menu_item.rs index f72fe16..168a8ca 100644 --- a/thaw/src/menu/menu_item.rs +++ b/thaw/src/menu/menu_item.rs @@ -1,11 +1,13 @@ use super::use_menu; -use crate::{theme::use_theme, Theme}; +use crate::{theme::use_theme, Icon, Theme}; use leptos::*; -use thaw_utils::{class_list, mount_style, OptionalProp}; +use thaw_components::OptionComp; +use thaw_utils::{class_list, mount_style, OptionalMaybeSignal, OptionalProp}; #[component] pub fn MenuItem( #[prop(into)] key: MaybeSignal, + #[prop(optional, into)] icon: OptionalMaybeSignal, #[prop(into)] label: MaybeSignal, #[prop(optional, into)] class: OptionalProp>, ) -> impl IntoView { @@ -46,6 +48,15 @@ pub fn MenuItem( on:click=on_click style=move || css_vars.get() > + { + move || { + view! { + + + + } + } + } {move || label.get()}
diff --git a/thaw/src/select/raw.rs b/thaw/src/select/raw.rs index 7099f57..8ed87e4 100644 --- a/thaw/src/select/raw.rs +++ b/thaw/src/select/raw.rs @@ -50,6 +50,10 @@ where }); on_cleanup(move || listener.remove()); } + #[cfg(not(any(feature = "csr", feature = "hydrate")))] + { + let _ = hide_menu; + } let theme = use_theme(Theme::light); let css_vars = create_memo(move |_| { From a9f02ede65a139d083ed994bab32128f1123472c Mon Sep 17 00:00:00 2001 From: kandrelczyk Date: Mon, 10 Jun 2024 17:30:31 +0200 Subject: [PATCH 11/20] add class to modal (#206) * add class to modal * add class to modal * add closable option to modal --- demo_markdown/docs/modal/mod.md | 2 ++ thaw/src/modal/mod.rs | 27 ++++++++++++++++++--------- 2 files changed, 20 insertions(+), 9 deletions(-) diff --git a/demo_markdown/docs/modal/mod.md b/demo_markdown/docs/modal/mod.md index a62b3fa..2c0da87 100644 --- a/demo_markdown/docs/modal/mod.md +++ b/demo_markdown/docs/modal/mod.md @@ -15,12 +15,14 @@ view! { | Name | Type | Default | Description | | -------------- | --------------------- | -------------------- | ------------------------------------------- | +| class | `OptionalProp>` | `Default::default()` | Addtional classes for the modal element. | | show | `Model` | | Whether to show modal. | | title | `MaybeSignal` | `Default::default()` | Modal title. | | width | `MaybeSignal` | `600px` | Modal width. | | z_index | `MaybeSignal` | `2000` | z-index of the modal. | | mask_closeable | `MaybeSignal` | `true` | Whether to emit hide event when click mask. | | close_on_esc | `bool` | `true` | Whether to close modal on Esc is pressed. | +| closable | `bool` | `true` | Whether to display the close button. | | children | `Children` | | Modal's content. | ### Modal Slots diff --git a/thaw/src/modal/mod.rs b/thaw/src/modal/mod.rs index 396ad7d..3b54d25 100644 --- a/thaw/src/modal/mod.rs +++ b/thaw/src/modal/mod.rs @@ -1,7 +1,7 @@ use crate::{Card, CardFooter, CardHeader, CardHeaderExtra, Icon, Scrollbar, ScrollbarRef}; use leptos::*; -use thaw_components::{CSSTransition, FocusTrap, OptionComp, Teleport}; -use thaw_utils::{mount_style, use_click_position, ComponentRef, Model}; +use thaw_components::{CSSTransition, FocusTrap, If, OptionComp, Teleport, Then}; +use thaw_utils::{class_list, mount_style, use_click_position, ComponentRef, Model, OptionalProp}; #[slot] pub struct ModalFooter { @@ -13,11 +13,13 @@ pub fn Modal( #[prop(into)] show: Model, #[prop(default = true.into(), into)] mask_closeable: MaybeSignal, #[prop(default = true, into)] close_on_esc: bool, + #[prop(default = true, into)] closable: bool, #[prop(default = 2000.into(), into)] z_index: MaybeSignal, #[prop(default = MaybeSignal::Static("600px".to_string()), into)] width: MaybeSignal, #[prop(optional, into)] title: MaybeSignal, children: Children, #[prop(optional)] modal_footer: Option, + #[prop(optional, into)] class: OptionalProp>, ) -> impl IntoView { mount_style("modal", include_str!("./modal.css")); @@ -80,6 +82,7 @@ pub fn Modal( String::from("display: none") } }) + comp_ref=scrollbar_ref >