Feat/thaw components (#146)

* feat: extract utils as the library

* fix: thaw_components dependencies

Author: luoxiaozero

Cargo.toml

@@ -1,8 +1,9 @@
 [workspace]
 resolver = "2"
-members = ["thaw", "thaw_utils", "demo", "demo_markdown"]
+members = ["thaw", "thaw_components", "thaw_utils", "demo", "demo_markdown"]
 exclude = ["examples"]
 
 [workspace.dependencies]
 thaw = { version = "0.2.3", path = "./thaw" }
+thaw_components = { version = "0.0.1", path = "./thaw_components" }
 thaw_utils = { version = "0.0.1", path = "./thaw_utils" }

thaw/Cargo.toml

@@ -14,6 +14,7 @@ license = "MIT"
 
 [dependencies]
 leptos = { version = "0.6.9" }
+thaw_components = { workspace = true }
 thaw_utils = { workspace = true }
 web-sys = { version = "0.3.69", features = [
     "DomRect",
@@ -30,6 +31,6 @@ chrono = "0.4.35"
 palette = "0.7.5"
 
 [features]
-csr = ["leptos/csr", "thaw_utils/csr"]
-ssr = ["leptos/ssr", "thaw_utils/ssr"]
-hydrate = ["leptos/hydrate", "thaw_utils/hydrate"]
+csr = ["leptos/csr", "thaw_components/csr", "thaw_utils/csr"]
+ssr = ["leptos/ssr", "thaw_components/ssr", "thaw_utils/ssr"]
+hydrate = ["leptos/hydrate", "thaw_components/hydrate", "thaw_utils/hydrate"]

thaw/src/alert/mod.rs

@@ -2,8 +2,9 @@ mod theme;
 
 pub use theme::AlertTheme;
 
-use crate::{components::OptionComp, theme::use_theme, Icon, Theme};
+use crate::{theme::use_theme, Icon, Theme};
 use leptos::*;
+use thaw_components::OptionComp;
 use thaw_utils::{class_list, mount_style, OptionalProp};
 
 #[derive(Clone)]

thaw/src/auto_complete/mod.rs

@@ -2,11 +2,9 @@ mod theme;
 
 pub use theme::AutoCompleteTheme;
 
-use crate::{
-    components::{Binder, CSSTransition, Follower, FollowerPlacement, FollowerWidth},
-    use_theme, ComponentRef, Input, InputPrefix, InputRef, InputSuffix, Theme,
-};
+use crate::{use_theme, ComponentRef, Input, InputPrefix, InputRef, InputSuffix, Theme};
 use leptos::*;
+use thaw_components::{Binder, CSSTransition, Follower, FollowerPlacement, FollowerWidth};
 use thaw_utils::{class_list, mount_style, Model, OptionalProp, StoredMaybeSignal};
 
 #[derive(Clone, PartialEq)]

thaw/src/avatar/mod.rs

@@ -2,8 +2,9 @@ mod theme;
 
 pub use theme::AvatarTheme;
 
-use crate::{components::OptionComp, use_theme, Theme};
+use crate::{use_theme, Theme};
 use leptos::*;
+use thaw_components::OptionComp;
 use thaw_utils::{class_list, mount_style, OptionalProp};
 
 #[component]

thaw/src/button/mod.rs

@@ -4,12 +4,9 @@ mod theme;
 pub use button_group::ButtonGroup;
 pub use theme::ButtonTheme;
 
-use crate::{
-    components::{OptionComp, Wave, WaveRef},
-    icon::Icon,
-    theme::*,
-};
+use crate::{icon::Icon, theme::*};
 use leptos::*;
+use thaw_components::{OptionComp, Wave, WaveRef};
 use thaw_utils::{class_list, mount_style, ComponentRef, OptionalMaybeSignal, OptionalProp};
 
 #[derive(Default, PartialEq, Clone, Copy)]

thaw/src/card/mod.rs

@@ -1,5 +1,6 @@
-use crate::{components::*, use_theme, Theme};
+use crate::{use_theme, Theme};
 use leptos::*;
+use thaw_components::*;
 use thaw_utils::{class_list, mount_style, OptionalProp};
 
 #[slot]

thaw/src/checkbox/mod.rs

@@ -4,8 +4,9 @@ mod checkbox_item;
 pub use checkbox_group::CheckboxGroup;
 pub use checkbox_item::CheckboxItem;
 
-use crate::{components::*, icon::*, theme::use_theme, Theme};
+use crate::{icon::*, theme::use_theme, Theme};
 use leptos::*;
+use thaw_components::*;
 use thaw_utils::{class_list, mount_style, Model, OptionalProp};
 
 #[component]

thaw/src/collapse/collapse_item.rs

@@ -1,6 +1,7 @@
 use super::use_collapse;
-use crate::{components::CSSTransition, Icon};
+use crate::Icon;
 use leptos::*;
+use thaw_components::CSSTransition;
 use thaw_utils::{class_list, OptionalProp, StoredMaybeSignal};
 
 #[component]

thaw/src/color_picker/mod.rs

@@ -4,13 +4,11 @@ mod theme;
 pub use color::*;
 pub use theme::ColorPickerTheme;
 
-use crate::{
-    components::{Binder, CSSTransition, Follower, FollowerPlacement},
-    use_theme, Theme,
-};
+use crate::{use_theme, Theme};
 use leptos::leptos_dom::helpers::WindowListenerHandle;
 use leptos::*;
 use palette::{Hsv, IntoColor, Srgb};
+use thaw_components::{Binder, CSSTransition, Follower, FollowerPlacement};
 use thaw_utils::{class_list, mount_style, Model, OptionalProp};
 
 #[component]

thaw/src/components/mod.rs

@@ -3,13 +3,11 @@ mod theme;
 
 pub use theme::DatePickerTheme;
 
-use crate::{
-    components::{Binder, Follower, FollowerPlacement},
-    Icon, Input, InputSuffix, SignalWatch,
-};
+use crate::{Icon, Input, InputSuffix, SignalWatch};
 use chrono::NaiveDate;
 use leptos::*;
 use panel::{Panel, PanelRef};
+use thaw_components::{Binder, Follower, FollowerPlacement};
 use thaw_utils::{mount_style, now_date, ComponentRef, Model, OptionalProp};
 
 #[component]

thaw/src/date_picker/mod.rs

@@ -2,11 +2,12 @@ mod date_panel;
 mod month_panel;
 mod year_panel;
 
-use crate::{components::CSSTransition, use_theme, Theme};
+use crate::{use_theme, Theme};
 use chrono::NaiveDate;
 use date_panel::DatePanel;
 use leptos::*;
 use month_panel::MonthPanel;
+use thaw_components::CSSTransition;
 use thaw_utils::{now_date, ComponentRef};
 use year_panel::YearPanel;
 

thaw/src/date_picker/panel/mod.rs

@@ -1,8 +1,6 @@
-use crate::{
-    components::{CSSTransition, Teleport},
-    Card,
-};
+use crate::Card;
 use leptos::*;
+use thaw_components::{CSSTransition, Teleport};
 use thaw_utils::{class_list, mount_style, use_lock_html_scroll, Model, OptionalProp};
 
 #[component]

thaw/src/drawer/mod.rs

@@ -10,7 +10,6 @@ mod checkbox;
 mod code;
 mod collapse;
 mod color_picker;
-mod components;
 mod date_picker;
 mod divider;
 mod drawer;

thaw/src/lib.rs

@@ -1,6 +1,6 @@
 use super::{LoadingBar, LoadingBarRef};
-use crate::components::Teleport;
 use leptos::*;
+use thaw_components::Teleport;
 use thaw_utils::ComponentRef;
 
 #[component]

thaw/src/loading_bar/loading_bar_provider.rs

@@ -1,7 +1,7 @@
 use super::{message_environment::MessageEnvironment, MessageVariant};
-use crate::components::Teleport;
 use leptos::*;
 use std::time::Duration;
+use thaw_components::Teleport;
 use thaw_utils::{class_list, mount_style};
 use uuid::Uuid;
 

thaw/src/message/message_provider.rs

@@ -5,12 +5,9 @@ mod theme;
 pub use message_provider::*;
 pub use theme::MessageTheme;
 
-use crate::{
-    components::{If, Then},
-    theme::use_theme,
-    Icon, Theme,
-};
+use crate::{theme::use_theme, Icon, Theme};
 use leptos::*;
+use thaw_components::{If, Then};
 use uuid::Uuid;
 
 #[derive(Default, Clone)]

thaw/src/message/mod.rs

@@ -2,8 +2,9 @@ mod theme;
 
 pub use theme::NavBarTheme;
 
-use crate::{components::*, icon::*, use_theme, Theme};
+use crate::{icon::*, use_theme, Theme};
 use leptos::*;
+use thaw_components::*;
 use thaw_utils::{class_list, mount_style, OptionalProp};
 
 #[slot]

thaw/src/mobile/nav_bar/mod.rs

@@ -1,7 +1,7 @@
 use super::use_tabbar;
-use crate::components::*;
 use crate::{icon::Icon, theme::use_theme, Theme};
 use leptos::*;
+use thaw_components::*;
 use thaw_utils::{mount_style, StoredMaybeSignal};
 
 #[component]

thaw/src/mobile/tabbar/tabbar_item.rs

@@ -1,8 +1,6 @@
-use crate::{
-    components::{CSSTransition, OptionComp, Teleport},
-    Card, CardFooter, CardHeader, CardHeaderExtra, Icon,
-};
+use crate::{Card, CardFooter, CardHeader, CardHeaderExtra, Icon};
 use leptos::*;
+use thaw_components::{CSSTransition, OptionComp, Teleport};
 use thaw_utils::{mount_style, use_click_position, Model};
 
 #[slot]

thaw/src/modal/mod.rs

@@ -2,12 +2,10 @@ mod theme;
 
 pub use theme::PopoverTheme;
 
-use crate::{
-    components::{Binder, CSSTransition, Follower, FollowerPlacement},
-    use_theme, Theme,
-};
+use crate::{use_theme, Theme};
 use leptos::{leptos_dom::helpers::TimeoutHandle, *};
 use std::time::Duration;
+use thaw_components::{Binder, CSSTransition, Follower, FollowerPlacement};
 use thaw_utils::{add_event_listener, class_list, mount_style, OptionalProp};
 
 #[slot]

thaw/src/popover/mod.rs

@@ -2,13 +2,10 @@ mod theme;
 
 pub use theme::SelectTheme;
 
-use crate::{
-    components::{Binder, CSSTransition, Follower, FollowerPlacement, FollowerWidth},
-    theme::use_theme,
-    Theme,
-};
+use crate::{theme::use_theme, Theme};
 use leptos::*;
 use std::hash::Hash;
+use thaw_components::{Binder, CSSTransition, Follower, FollowerPlacement, FollowerWidth};
 use thaw_utils::{class_list, mount_style, Model, OptionalProp};
 
 #[derive(Clone, PartialEq, Eq, Hash)]

thaw/src/select/mod.rs

@@ -4,8 +4,9 @@ mod theme;
 pub use slider_label::SliderLabel;
 pub use theme::SliderTheme;
 
-use crate::{components::OptionComp, theme::use_theme, Theme};
+use crate::{theme::use_theme, Theme};
 use leptos::*;
+use thaw_components::OptionComp;
 use thaw_utils::{class_list, mount_style, Model, OptionalProp};
 use web_sys::DomRect;
 

thaw/src/slider/mod.rs

@@ -3,11 +3,11 @@ mod theme;
 pub use theme::TimePickerTheme;
 
 use crate::{
-    components::{Binder, CSSTransition, Follower, FollowerPlacement},
     use_theme, Button, ButtonSize, ButtonVariant, Icon, Input, InputSuffix, SignalWatch, Theme,
 };
 use chrono::{Local, NaiveTime, Timelike};
 use leptos::*;
+use thaw_components::{Binder, CSSTransition, Follower, FollowerPlacement};
 use thaw_utils::{mount_style, ComponentRef, Model, OptionalProp};
 
 #[component]

thaw/src/time_picker/mod.rs

@@ -0,0 +1,23 @@
+[package]
+name = "thaw_components"
+version = "0.0.1"
+edition = "2021"
+keywords = ["leptos", "thaw", "components"]
+readme = "../README.md"
+authors = ["luoxiaozero"]
+description = "Shared Thaw internal components"
+repository = "https://github.com/thaw-ui/thaw"
+license = "MIT"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+leptos = { version = "0.6.9" }
+thaw_utils = { workspace = true }
+web-sys = { version = "0.3.69", features = ["DomRect"] }
+cfg-if = "1.0.0"
+
+[features]
+csr = ["leptos/csr"]
+ssr = ["leptos/ssr"]
+hydrate = ["leptos/hydrate"]

thaw_components/Cargo.toml

@@ -2,7 +2,7 @@ mod get_placement_style;
 
 pub use get_placement_style::FollowerPlacement;
 
-use crate::components::Teleport;
+use crate::Teleport;
 use get_placement_style::{get_follower_placement_offset, FollowerPlacementOffset};
 use leptos::{
     html::{AnyElement, ElementDescriptor, ToHtmlElement},

thaw/src/components/binder/binder.css thaw_components/src/binder/binder.css

@@ -0,0 +1,20 @@
+mod binder;
+mod css_transition;
+mod if_comp;
+mod option_comp;
+mod teleport;
+mod wave;
+
+pub use binder::{Binder, Follower, FollowerPlacement, FollowerWidth};
+pub use css_transition::CSSTransition;
+pub use if_comp::{ElseIf, If, Then};
+pub use option_comp::OptionComp;
+pub use teleport::Teleport;
+pub use wave::{Wave, WaveRef};
+
+use leptos::*;
+
+#[slot]
+pub struct Fallback {
+    children: ChildrenFn,
+}

thaw/src/components/binder/get_placement_style.rs thaw_components/src/binder/get_placement_style.rs

@@ -6,7 +6,7 @@ mod optional_prop;
 mod signals;
 mod time;
 
-pub use event_listener::*;
+pub use event_listener::{add_event_listener, EventListenerHandle};
 pub use hooks::{use_click_position, use_lock_html_scroll};
 pub use mount_style::mount_style;
 pub use optional_prop::OptionalProp;