feat: DatePicker adds rules prop

thaw/src/date_picker/docs/mod.md

@@ -16,6 +16,9 @@ view! {
 ### DatePicker Props
 
 | Name | Type | Default | Desciption |
-| ----- | ------------------------ | -------------------- | -------------------------- |
+| --- | --- | --- | --- |
 | class | `MaybeProp<String>` | `Default::default()` |  |
+| id | `MaybeProp<String>` | `Default::default()` |  |
+| name | `MaybeProp<String>` | `Default::default()` | A string specifying a name for the input control. This name is submitted along with the control's value when the form data is submitted. |
+| rules | `Vec<DatePickerRule<T>>` | `vec![]` | The rules to validate Field. |
 | value | `OptionModel<NaiveDate>` | `Default::default()` | Set the date picker value. |

thaw/src/date_picker/mod.rs

@@ -1,21 +1,33 @@
 mod panel;
-use crate::{Icon, Input, InputSuffix, SignalWatch};
+
+use crate::{FieldInjection, FieldValidationState, Icon, Input, InputSuffix, Rule};
 use chrono::NaiveDate;
 use leptos::{html, prelude::*};
 use panel::{Panel, PanelRef};
+use std::ops::Deref;
 use thaw_components::{Binder, Follower, FollowerPlacement};
 use thaw_utils::{
-    class_list, mount_style, now_date, ComponentRef, OptionModel, OptionModelWithValue,
+    class_list, mount_style, now_date, ComponentRef, OptionModel, OptionModelWithValue, SignalWatch,
 };
 
 #[component]
 pub fn DatePicker(
     #[prop(optional, into)] class: MaybeProp<String>,
+    #[prop(optional, into)] id: MaybeProp<String>,
+    /// A string specifying a name for the input control.
+    /// This name is submitted along with the control's value when the form data is submitted.
+    #[prop(optional, into)]
+    name: MaybeProp<String>,
+    /// The rules to validate Field.
+    #[prop(optional, into)]
+    rules: Vec<DatePickerRule>,
     /// Set the date picker value.
     #[prop(optional, into)]
     value: OptionModel<NaiveDate>,
 ) -> impl IntoView {
     mount_style("date-picker", include_str!("./date-picker.css"));
+    let (id, name) = FieldInjection::use_id_and_name(id, name);
+    let validate = Rule::validate(rules, value, name);
     let date_picker_ref = NodeRef::<html::Div>::new();
     let is_show_panel = RwSignal::new(false);
     let show_date_text = RwSignal::new(String::new());
@@ -53,6 +65,7 @@ pub fn DatePicker(
         } else {
             update_show_date_text();
         }
+        validate.run(Some(DatePickerRuleTrigger::Blur));
     };
 
     let close_panel = move |date: Option<NaiveDate>| {
@@ -65,7 +78,10 @@ pub fn DatePicker(
         is_show_panel.set(false);
     };
 
-    let open_panel = move |_| {
+    let open_panel = move || {
+        if is_show_panel.get() {
+            return;
+        }
         panel_selected_date.set(value.get_untracked());
         if let Some(panel_ref) = panel_ref.get_untracked() {
             panel_ref.init_panel(value.get_untracked().unwrap_or(now_date()));
@@ -75,8 +91,8 @@ pub fn DatePicker(
 
     view! {
         <Binder target_ref=date_picker_ref>
-            <div node_ref=date_picker_ref class=class_list!["thaw-date-picker", class]>
+            <div node_ref=date_picker_ref class=class_list!["thaw-date-picker", class] on:click=move |_| open_panel()>
-                <Input value=show_date_text on_focus=open_panel on_blur=on_input_blur>
+                <Input id name value=show_date_text on_focus=move |_| open_panel() on_blur=on_input_blur>
                     <InputSuffix slot>
                         <Icon icon=icondata_ai::AiCalendarOutlined style="font-size: 18px" />
                     </InputSuffix>
@@ -94,3 +110,61 @@ pub fn DatePicker(
         </Binder>
     }
 }
+
+#[derive(Debug, Default, PartialEq, Clone, Copy)]
+pub enum DatePickerRuleTrigger {
+    #[default]
+    Blur,
+}
+
+pub struct DatePickerRule(Rule<Option<NaiveDate>, DatePickerRuleTrigger>);
+
+impl DatePickerRule {
+    pub fn required(required: MaybeSignal<bool>) -> Self {
+        Self::validator(move |value, name| {
+            if required.get_untracked() && value.is_none() {
+                let message = name.get_untracked().map_or_else(
+                    || String::from("Please select!"),
+                    |name| format!("Please select {name}!"),
+                );
+                Err(FieldValidationState::Error(message))
+            } else {
+                Ok(())
+            }
+        })
+    }
+
+    pub fn required_with_message(
+        required: MaybeSignal<bool>,
+        message: MaybeSignal<String>,
+    ) -> Self {
+        Self::validator(move |value, _| {
+            if required.get_untracked() && value.is_none() {
+                Err(FieldValidationState::Error(message.get_untracked()))
+            } else {
+                Ok(())
+            }
+        })
+    }
+
+    pub fn validator(
+        f: impl Fn(&Option<NaiveDate>, Signal<Option<String>>) -> Result<(), FieldValidationState>
+            + Send
+            + Sync
+            + 'static,
+    ) -> Self {
+        Self(Rule::validator(f))
+    }
+
+    pub fn with_trigger(self, trigger: DatePickerRuleTrigger) -> Self {
+        Self(Rule::with_trigger(self.0, trigger))
+    }
+}
+
+impl Deref for DatePickerRule {
+    type Target = Rule<Option<NaiveDate>, DatePickerRuleTrigger>;
+
+    fn deref(&self) -> &Self::Target {
+        &self.0
+    }
+}

thaw/src/date_picker/panel/mod.rs

@@ -76,6 +76,7 @@ pub fn Panel(
                 data-thaw-id=config_provider.id().clone()
                 style=move || display.get().unwrap_or_default()
                 node_ref=panel_ref
+                on:mousedown=|e| e.prevent_default()
             >
 
                 {move || {

thaw/src/field/docs/mod.md

@@ -59,8 +59,13 @@ view! {
                         } else {
                             Ok(())
                         }
-                    })]/>
+                    })]
+                />
             </Field>
+            <Field name="date">
+                <DatePicker rules=vec![DatePickerRule::required(true.into())]/>
+            </Field>
+            
             <div style="margin-top: 8px">
                 <Button
                     button_type=ButtonType::Submit

thaw/src/field/rule.rs

@@ -1,4 +1,5 @@
 use super::{FieldContextInjection, FieldInjection, FieldValidationState};
+use chrono::NaiveDate;
 use leptos::prelude::*;
 use send_wrapper::SendWrapper;
 use std::ops::Deref;
@@ -46,11 +47,12 @@ impl<T, Trigger> Rule<T, Trigger> {
         Trigger: PartialEq + 'static,
     {
         let field_injection = FieldInjection::use_context();
+        let rules_is_empty = rules.is_empty();
         let rules = StoredValue::new(SendWrapper::new(rules));
         let validate = Callback::new(move |trigger: Option<Trigger>| {
             let state = rules.with_value(move |rules| {
                 if rules.is_empty() {
-                    return Some(Ok(()));
+                    return None;
                 }
 
                 let mut rules_iter = rules.iter();
@@ -88,9 +90,12 @@ impl<T, Trigger> Rule<T, Trigger> {
             };
             rt
         });
+
+        if !rules_is_empty {
             if let Some(field_context) = FieldContextInjection::use_context() {
                 field_context.register_field(name, move || validate.run(None));
             }
+        }
 
         validate
     }
@@ -130,6 +135,18 @@ impl RuleValueWithUntracked<Option<String>> for OptionModel<String> {
     }
 }
 
+impl RuleValueWithUntracked<Option<NaiveDate>> for OptionModel<NaiveDate> {
+    fn value_with_untracked(
+        &self,
+        f: impl FnOnce(&Option<NaiveDate>) -> Result<(), FieldValidationState>,
+    ) -> Result<(), FieldValidationState> {
+        self.with_untracked(move |v| match v {
+            OptionModelWithValue::T(v) => f(&Some(v.clone())),
+            OptionModelWithValue::Option(v) => f(v),
+        })
+    }
+}
+
 impl RuleValueWithUntracked<Vec<String>> for VecModel<String> {
     fn value_with_untracked(
         &self,

thaw/src/input/mod.rs

@@ -27,7 +27,9 @@ pub fn Input(
     /// This name is submitted along with the control's value when the form data is submitted.
     #[prop(optional, into)]
     name: MaybeProp<String>,
-    #[prop(optional, into)] rules: Vec<InputRule>,
+    /// The rules to validate Field.
+    #[prop(optional, into)]
+    rules: Vec<InputRule>,
     /// Set the input value.
     #[prop(optional, into)]
     value: Model<String>,

thaw/src/spin_button/mod.rs

@@ -16,7 +16,8 @@ pub fn SpinButton<T>(
     #[prop(optional, into)]
     name: MaybeProp<String>,
     /// The rules to validate Field.
-    #[prop(optional, into)] rules: Vec<SpinButtonRule<T>>,
+    #[prop(optional, into)]
+    rules: Vec<SpinButtonRule<T>>,
     /// Current value of the control.
     #[prop(optional, into)]
     value: Model<T>,