From 789ea6772ac903865daf3857fa7c8dddf44661b7 Mon Sep 17 00:00:00 2001 From: luoxiaozero <48741584+luoxiaozero@users.noreply.github.com> Date: Tue, 2 Jan 2024 11:23:55 +0800 Subject: [PATCH] feat: input and related components add attrs (#65) --- demo/src/pages/auto_complete/mod.rs | 6 ++++++ demo/src/pages/date_picker/mod.rs | 6 ++++++ demo/src/pages/input/mod.rs | 26 ++++++++++++++++++++++++++ demo/src/pages/input_number/mod.rs | 6 ++++++ demo_markdown/docs/time_picker/mod.md | 9 +++++---- thaw/src/auto_complete/mod.rs | 2 ++ thaw/src/date_picker/mod.rs | 3 ++- thaw/src/input/mod.rs | 15 +++++++++++++++ thaw/src/input_number/mod.rs | 3 ++- thaw/src/time_picker/mod.rs | 3 ++- 10 files changed, 72 insertions(+), 7 deletions(-) diff --git a/demo/src/pages/auto_complete/mod.rs b/demo/src/pages/auto_complete/mod.rs index 444169c..f0bdd56 100644 --- a/demo/src/pages/auto_complete/mod.rs +++ b/demo/src/pages/auto_complete/mod.rs @@ -173,6 +173,12 @@ pub fn AutoCompletePage() -> impl IntoView { "Default::default()" "Additional classes for the autocomplete element." + + "attr:" + "Vec<(&'static str, Attribute)>" + "Default::default()" + "The dom attrs of the input element inside the component." +

"AutoCompleteOption Properties"

diff --git a/demo/src/pages/date_picker/mod.rs b/demo/src/pages/date_picker/mod.rs index 086bb5b..5d74a0c 100644 --- a/demo/src/pages/date_picker/mod.rs +++ b/demo/src/pages/date_picker/mod.rs @@ -57,6 +57,12 @@ pub fn DatePickerPage() -> impl IntoView { "Default::default()" "Addtional classes for the date picker element." + + "attr:" + "Vec<(&'static str, Attribute)>" + "Default::default()" + "The dom attrs of the input element inside the component." + diff --git a/demo/src/pages/input/mod.rs b/demo/src/pages/input/mod.rs index e3805f6..c7dca67 100644 --- a/demo/src/pages/input/mod.rs +++ b/demo/src/pages/input/mod.rs @@ -104,6 +104,26 @@ pub fn InputPage() -> impl IntoView { +

"Input attrs"

+ + + + + + + + {highlight_str!( + r#" + view! { + + + } + "#, + "rust" + )} + + +

"Prefix & Suffix"

@@ -219,6 +239,12 @@ pub fn InputPage() -> impl IntoView { "Default::default()" "Addtional classes for the input element." + + "attr:" + "Vec<(&'static str, Attribute)>" + "Default::default()" + "The dom attrs of the input element inside the component." +

"Input Slots"

diff --git a/demo/src/pages/input_number/mod.rs b/demo/src/pages/input_number/mod.rs index db15093..008db8c 100644 --- a/demo/src/pages/input_number/mod.rs +++ b/demo/src/pages/input_number/mod.rs @@ -114,6 +114,12 @@ pub fn InputNumberPage() -> impl IntoView { "Default::default()" "Addtional classes for the input element." + + "attr:" + "Vec<(&'static str, Attribute)>" + "Default::default()" + "The dom attrs of the input element inside the component." +

"T impl"

diff --git a/demo_markdown/docs/time_picker/mod.md b/demo_markdown/docs/time_picker/mod.md index a71dd93..7dc60bd 100644 --- a/demo_markdown/docs/time_picker/mod.md +++ b/demo_markdown/docs/time_picker/mod.md @@ -12,7 +12,8 @@ view! { ## TimePicker Props -| Name | Type | Default | Description | -| ----- | ----------------------------- | -------------------- | ---------------------------------------------- | -| class | `MaybeSignal` | `Default::default()` | Addtional classes for the time picker element. | -| value | `RwSignal>` | `Default::default()` | Set the TimePicker value. | +| Name | Type | Default | Description | +| ----- | -------------------------------- | -------------------- | -------------------------------------------------------- | +| class | `MaybeSignal` | `Default::default()` | Addtional classes for the time picker element. | +| value | `RwSignal>` | `Default::default()` | Set the TimePicker value. | +| attr: | `Vec<(&'static str, Attribute)>` | `Default::default()` | The dom attrs of the input element inside the component. | diff --git a/thaw/src/auto_complete/mod.rs b/thaw/src/auto_complete/mod.rs index 69b9fd9..d21420d 100644 --- a/thaw/src/auto_complete/mod.rs +++ b/thaw/src/auto_complete/mod.rs @@ -38,6 +38,7 @@ pub fn AutoComplete( #[prop(optional)] auto_complete_prefix: Option, #[prop(optional)] auto_complete_suffix: Option, #[prop(optional)] comp_ref: ComponentRef, + #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>, ) -> impl IntoView { mount_style("auto-complete", include_str!("./auto-complete.css")); let theme = use_theme(Theme::light); @@ -133,6 +134,7 @@ pub fn AutoComplete( on:keydown=on_keydown > >, #[prop(optional, into)] class: MaybeSignal, + #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>, ) -> impl IntoView { mount_style("date-picker", include_str!("./date-picker.css")); let date_picker_ref = create_node_ref::(); @@ -73,7 +74,7 @@ pub fn DatePicker( view! {
- + diff --git a/thaw/src/input/mod.rs b/thaw/src/input/mod.rs index 65f96e2..58b5fce 100644 --- a/thaw/src/input/mod.rs +++ b/thaw/src/input/mod.rs @@ -51,6 +51,7 @@ pub fn Input( #[prop(optional)] input_suffix: Option, #[prop(optional)] comp_ref: ComponentRef, #[prop(optional, into)] class: MaybeSignal, + #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>, ) -> impl IntoView { let theme = use_theme(Theme::light); mount_style("input", include_str!("./input.css")); @@ -125,6 +126,19 @@ pub fn Input( comp_ref.load(InputRef { input_ref }); }); + #[cfg(debug_assertions)] + { + const INNER_ATTRS: [&'static str; 4] = ["type", "class", "disabled", "placeholder"]; + attrs.iter().for_each(|attr| { + if INNER_ATTRS.contains(&attr.0) { + logging::warn!( + "Thaw: The '{}' attribute already exists on elements inside the Input component, which may cause conflicts.", + attr.0 + ); + } + }); + } + view! {
( #[prop(optional, into)] disabled: MaybeSignal, #[prop(optional, into)] invalid: MaybeSignal, #[prop(optional, into)] class: MaybeSignal, + #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>, ) -> impl IntoView where T: Add + Sub, @@ -47,7 +48,7 @@ where value.set(value.get_untracked() - step.get_untracked()); }); view! { - +