feat: add upload component

demo/src/app.rs

@@ -40,6 +40,7 @@ pub fn App() -> impl IntoView {
                         <Route path="/skeleton" view=SkeletonPage/>
                         <Route path="/switch" view=SwitchPage/>
                         <Route path="/tag" view=TagPage/>
+                        <Route path="/upload" view=UploadPage/>
                     </Route>
                     <Route path="/mobile/tabbar" view=TabbarDemoPage/>
                     <Route path="/mobile/nav-bar" view=NavBarDemoPage/>

demo/src/pages/components.rs

@@ -145,6 +145,10 @@ fn gen_menu_data() -> Vec<MenuGroupOption> {
                     value: "switch".into(),
                     label: "Switch".into(),
                 },
+                MenuItemOption {
+                    value: "upload".into(),
+                    label: "Upload".into(),
+                },
             ],
         },
         MenuGroupOption {

demo/src/pages/mod.rs

@@ -30,6 +30,7 @@ mod table;
 mod tabs;
 mod tag;
 mod toast;
+mod upload;
 
 pub use alert::*;
 pub use auto_complete::*;
@@ -63,3 +64,4 @@ pub use table::*;
 pub use tabs::*;
 pub use tag::*;
 pub use toast::*;
+pub use upload::*;

demo/src/pages/upload/mod.rs

@@ -0,0 +1,36 @@
+use crate::components::{Demo, DemoCode};
+use leptos::*;
+use melt_ui::*;
+use prisms::highlight_str;
+
+#[component]
+pub fn UploadPage() -> impl IntoView {
+    view! {
+        <div style="width: 896px; margin: 0 auto;">
+            <h1>"Upload(TODO)"</h1>
+            <Demo>
+                <Upload>
+                    <Button>
+                        "upload"
+                    </Button>
+                </Upload>
+                <DemoCode
+                    slot
+                    html=highlight_str!(
+                        r#"
+                    <Upload>
+                        <Button>
+                            "upload"
+                        </Button>
+                    </Upload>
+                "#,
+                        "rust"
+                    )
+                >
+
+                    ""
+                </DemoCode>
+            </Demo>
+        </div>
+    }
+}

src/lib.rs

@@ -31,6 +31,7 @@ mod tabs;
 mod tag;
 mod teleport;
 mod theme;
+mod upload;
 mod utils;
 mod wave;
 
@@ -64,5 +65,6 @@ pub use table::*;
 pub use tabs::*;
 pub use tag::*;
 pub use theme::Theme;
+pub use upload::*;
 pub use utils::{mount_style::mount_style, signal::SignalWatch};
 pub use wave::*;

src/upload/mod.rs

@@ -0,0 +1,40 @@
+use leptos::*;
+use crate::mount_style;
+// TODO
+
+#[component]
+pub fn Upload(
+    #[prop(optional, into)] accept: MaybeSignal<String>,
+    #[prop(optional, into)] multiple: MaybeSignal<bool>,
+    children: Children,
+) -> impl IntoView {
+    mount_style("upload", include_str!("./upload.css"));
+    let on_file_addition = move || {
+
+    };
+    let input_ref = create_node_ref::<html::Input>();
+    let on_change = move |_| {
+        if let Some(input_ref) = input_ref.get_untracked() {
+        }
+    };
+    let on_click= move |_| {
+        if let Some(input_ref) = input_ref.get_untracked() {
+            input_ref.click();
+        }
+    };
+    view! {
+        <div class="melt-upload">
+            <input
+                class="melt-upload__input"
+                ref=input_ref
+                type="file"
+                accept=move || accept.get()
+                multiple=move || multiple.get()
+                on:change=on_change
+            />
+            <div class="melt-upload__trigger" on:click=on_click>
+                {children()}
+            </div>
+        </div>
+    }
+}

src/upload/upload.css

@@ -0,0 +1,5 @@
+.melt-upload__input {
+    width: 0;
+    height: 0;
+    opacity: 0;
+}