✨ feat: Modal component prop

examples/basic/src/app.rs

@@ -34,6 +34,9 @@ pub fn App(cx: Scope) -> impl IntoView {
                     <Route path="/image" view=move |cx| view! {cx,
                         <ImagePage />
                     } />
+                    <Route path="/modal" view=move |cx| view! {cx,
+                        <ModalPage />
+                    } />
                 </Route>
             </Routes>
             <Routes base="/mobile".to_string()>

examples/basic/src/demo_modal.rs

@@ -1,18 +0,0 @@
-use leptos::*;
-use melt_ui::*;
-
-#[component]
-pub fn DemoModal(cx: Scope) -> impl IntoView {
-    let (open, set_open) = create_signal(cx, false);
-    let on_cancel = SignalSetter::map(cx, move |_| {
-        set_open.set(false);
-    });
-    view! { cx,
-        <Button on:click=move |_| set_open.update(move |value| *value = !*value)>
-            "open modal"
-        </Button>
-        <Modal title="标题" open=open on_cancel=on_cancel>
-            "sd"
-        </Modal>
-    }
-}

examples/basic/src/main.rs

@@ -1,7 +1,6 @@
 mod app;
 mod demo_button;
 mod demo_checkbox;
-mod demo_modal;
 mod demo_slider;
 mod pages;
 

examples/basic/src/pages/components.rs

@@ -38,6 +38,7 @@ pub fn ComponentsPage(cx: Scope) -> impl IntoView {
                     <MenuItem key="tabbar" label="tabbar" />
                     <MenuItem key="input" label="input" />
                     <MenuItem key="image" label="image" />
+                    <MenuItem key="modal" label="madal" />
                 </Menu>
             </aside>
             <main>

examples/basic/src/pages/home.rs

@@ -1,6 +1,5 @@
 use crate::demo_button::*;
 use crate::demo_checkbox::*;
-use crate::demo_modal::*;
 use crate::demo_slider::*;
 use leptos::*;
 use leptos_router::use_navigate;
@@ -43,8 +42,6 @@ pub fn Home(cx: Scope) -> impl IntoView {
         <hr />
         <DemoButton />
         <hr />
-        <DemoModal/>
-        <hr />
         <DemoCheckout />
         <hr />
         <DemoSlider />

examples/basic/src/pages/mod.rs

@@ -4,6 +4,7 @@ mod image;
 mod input;
 mod menu;
 mod mobile;
+mod modal;
 mod slider;
 mod tabbar;
 
@@ -13,5 +14,6 @@ pub use image::*;
 pub use input::*;
 pub use menu::*;
 pub use mobile::*;
+pub use modal::*;
 pub use slider::*;
 pub use tabbar::*;

examples/basic/src/pages/modal/mod.rs

@@ -0,0 +1,15 @@
+use leptos::*;
+use melt_ui::*;
+
+#[component]
+pub fn ModalPage(cx: Scope) -> impl IntoView {
+    let show = create_rw_signal(cx, false);
+    view! { cx,
+        <Button on:click=move |_| show.set(true)>
+            "open modal"
+        </Button>
+        <Modal title="标题" show>
+            "sd"
+        </Modal>
+    }
+}

src/modal/mod.rs

@@ -11,8 +11,7 @@ pub fn Modal(
     #[prop(optional, into)] title: Option<MaybeSignal<String>>,
     children: Children,
     #[prop(optional)] footer: Option<Children>,
-    #[prop(optional, into)] open: MaybeSignal<bool>,
-    #[prop(optional)] on_cancel: Option<SignalSetter<()>>,
+    #[prop(into)] show: RwSignal<bool>,
 ) -> impl IntoView {
     let class_name = mount_style("modal", || style_sheet_str!("./src/modal/modal.css"));
     let header = move |cx| {
@@ -30,7 +29,7 @@ pub fn Modal(
         view! {
             cx,
             <>
-                <span style="cursor: pointer;" on:click=move |_| if let Some(on_cancel) = &on_cancel { on_cancel.set(())}>
+                <span style="cursor: pointer;" on:click=move |_| show.set(false)>
                     <Icon icon=AiIcon::AiCloseOutlined/>
                 </span>
             </>
@@ -39,7 +38,7 @@ pub fn Modal(
     view! {
         cx, class=class_name,
         <Teleport>
-            <div class="melt-modal-container" style=move || if open.get() { "" } else { "display: none" }>
+            <div class="melt-modal-container" style=move || if show.get() { "" } else { "display: none" }>
                 <div class="melt-modal-mask"></div>
                 <div class="melt-modal-body">
                     <Card header=Some(Box::new(header)) header_extra=Some(Box::new(header_extra)) footer=footer>