thaw-ui / thaw

An easy to use leptos component library
https://thawui.vercel.app
MIT License
306 stars 40 forks source link

trait `ComponentConstructor<_>` is not implemented error #261

Closed amiyatulu closed 1 month ago

amiyatulu commented 1 month ago

I tried thaw to use drawer in leptos, it gives error:

 Compiling mdapp v0.1.0 (/home/amiya/Documents/workspace/leptos_book_generator/crates-app/mdapp)
error[E0277]: the trait bound `&fn(InlineDrawerProps) -> impl leptos::into_view::IntoView {thaw::InlineDrawer}: ComponentConstructor<_>` is not satisfied
   --> crates-app/mdapp/src/components/nav/side_drawer.rs:11:14
    |
11  |               <InlineDrawer open=open_left>
    |               -^^^^^^^^^^^^ the trait `ComponentConstructor<_>` is not implemented for `&fn(InlineDrawerProps) -> impl leptos::into_view::IntoView {thaw::InlineDrawer}`
    |  _____________|
    | |
12  | |                 <DrawerHeader>
13  | |                 <DrawerHeaderTitle>
14  | |                     <DrawerHeaderTitleAction slot>
...   |
27  | |                 </DrawerBody>
28  | |             </InlineDrawer>
    | |___________________________- required by a bound introduced by this call
    |
note: required by a bound in `component_view`
   --> /home/amiya/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptos-0.6.14/src/lib.rs:348:34
    |
348 | pub fn component_view<P>(f: impl ComponentConstructor<P>, props: P) -> View {
    |                                  ^^^^^^^^^^^^^^^^^^^^^^^ required by this bound in `component_view`

error[E0277]: the trait bound `fn(InlineDrawerProps) -> impl leptos::into_view::IntoView {thaw::InlineDrawer}: leptos::Component<_>` is not satisfied
   --> crates-app/mdapp/src/components/nav/side_drawer.rs:11:14
    |
11  |             <InlineDrawer open=open_left>
    |              ^^^^^^^^^^^^ the trait `leptos::Component<_>` is not implemented for fn item `fn(InlineDrawerProps) -> impl leptos::into_view::IntoView {thaw::InlineDrawer}`
    |

I am using following dependencies


[dependencies]
leptos = { version = "0.6.13", features = ["csr", "nightly"] }
leptos-use = { version = "0.13" }
leptos_router = { version = "0.6.13", features = ["csr", "nightly"] }
thaw = { git = "https://github.com/thaw-ui/thaw.git", features = [
    "csr",
    "nightly",
] }

It also gives error when I use:

thaw = { version = "0.3.4", features = ["csr"] }
error[E0425]: cannot find value `InlineDrawer` in this scope
  --> crates-app/mdapp/src/components/nav/side_drawer.rs:11:14
   |
4  | #[component]
   | ------------ similarly named function `SideDrawer` defined here
...
11 |             <InlineDrawer open=open_left>
   |              ^^^^^^^^^^^^ help: a function with a similar name exists: `SideDrawer`

error[E0425]: cannot find value `DrawerHeader` in this scope
  --> crates-app/mdapp/src/components/nav/side_drawer.rs:12:18
   |
12 |                 <DrawerHeader>
   |                  ^^^^^^^^^^^^ not found in this scope

error[E0425]: cannot find value `DrawerHeaderTitle` in this scope
  --> crates-app/mdapp/src/components/nav/side_drawer.rs:13:18
   |
13 |                 <DrawerHeaderTitle>
   |                  ^^^^^^^^^^^^^^^^^ not found in this scope

The code:

use leptos::*;
use thaw::*;

#[component]
pub fn SideDrawer() -> impl IntoView {
    let open_left = RwSignal::new(false);
    let open_right = RwSignal::new(false);
    let open_buttom = RwSignal::new(false);
    view! {<div style="display: flex; flex-direction: column; overflow: hidden; height: 400px; background-color: #0078ff88;">
        <div style="display: flex; overflow: hidden; height: 400px;">
            <InlineDrawer open=open_left>
                <DrawerHeader>
                <DrawerHeaderTitle>
                    <DrawerHeaderTitleAction slot>
                        <Button
                            appearance=ButtonAppearance::Subtle
                            on_click=move |_| open_left.set(false)
                        >
                            "x"
                        </Button>
                    </DrawerHeaderTitleAction>
                    "Inline Drawer"
                </DrawerHeaderTitle>
                </DrawerHeader>
                <DrawerBody>
                    <p>"Drawer content"</p>
                </DrawerBody>
            </InlineDrawer>
            <div style="flex: 1">
                <Button on_click=move |_| open_left.set(true)>"Open left"</Button>
                <Button on_click=move |_| open_right.set(true)>"Open right"</Button>
                <Button on_click=move |_| open_buttom.set(true)>"Open buttom"</Button>
            </div>
            <InlineDrawer open=open_right position=DrawerPosition::Right>
                <DrawerHeader>
                <DrawerHeaderTitle>
                    <DrawerHeaderTitleAction slot>
                        <Button
                            appearance=ButtonAppearance::Subtle
                            on_click=move |_| open_right.set(false)
                        >
                            "x"
                        </Button>
                    </DrawerHeaderTitleAction>
                    "Inline Drawer"
                </DrawerHeaderTitle>
                </DrawerHeader>
                <DrawerBody>
                    <p>"Drawer content"</p>
                </DrawerBody>
            </InlineDrawer>
        </div>
        <InlineDrawer open=open_buttom position=DrawerPosition::Bottom>
            <DrawerHeader>
            <DrawerHeaderTitle>
                <DrawerHeaderTitleAction slot>
                    <Button
                        appearance=ButtonAppearance::Subtle
                        on_click=move |_| open_buttom.set(false)
                    >
                        "x"
                    </Button>
                </DrawerHeaderTitleAction>
                "Inline Drawer"
            </DrawerHeaderTitle>
            </DrawerHeader>
            <DrawerBody>
                <p>"Drawer content"</p>
            </DrawerBody>
        </InlineDrawer>
    </div>}
}
luoxiaozero commented 1 month ago

The code of the main branch and the documentation of https://thawui.vercel.app are currently only applicable to leptos-v0.7.0-beta. If you want to use leptos-v0.6, you can refer to the usage of the documentation of https://thaw-85fsrigp0-thaw.vercel.app .

amiyatulu commented 1 month ago

Thanks. Got it. Its working now.