1, Drawers should only place within its parent component.
So I can have one overall page drawer but a smaller one in a div

2, Allow not fulling closing so to can hover to expand. Saves the consumer of the control having to create a button for display.

3, css animate the expansion.

Thanks

Roadmap

• 0.1.0-alpha

• Binder. for AutoComplete, ColorPicker, Select.
• Upload component click error.
• Features tracing, GridItem span attribute conflict.
• Internal component classification.

• 0.1.0-beta

• Fix bugs.
• Document writing.
• Audit public interface.

• 0.1.0

• Initial support SSR.
• CI
• Github page supports mobile viewing
• Document writing.
• More component.
• WAI-ARIA guidelines

• 0.2.0
  Full support for SSR.

how to avoid datetime control jump behavior as title described?

I really like the DatePicker, but I want to add a label for it with the <label for="id"> tag. For this the input of the datepicker would need to have a corresponding id and there's currently no way to add that.

Leptos supports passing in dynamic attributes like

#[component]
pub fn DatePicker(
    #[prop(optional, into)] value: RwSignal<Option<NaiveDate>>,
    #[prop(optional, into)] class: MaybeSignal<String>,
+    #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
) -> impl IntoView {
    [...]
-    <Input class value=show_date_text on_focus=open_panel on_blur=on_input_blur>
+    <Input class value=show_date_text on_focus=open_panel on_blur=on_input_blur {..attrs}>
    [...]

which can then be used like

<DatePicker value=... attr:id=my-id />

i.e. it allows to pass in arbitrary settings to a component. Of course with some components it's not clear which HTML tag should get the attributes, but for the DatePicker I think the input field makes sense. It also allows setting other things like alt text, maxLength etc. That should be much easier than adding manual support for all the various properties.

In general it'd be nice to add this on all components (not just DatePicker) where it makes sense, it'd make them much more reusable.

Hi!
Want to push into new branch and make pull request, but i have no permission.
What i need to do?

The ButtonColor prop doesn't seem to work when using other variants such as Outline.

In the case of outline, the text color should perhaps be influenced by the button color prop. So <Button variant=ButtonVariant::Outline color=ButtonColor::Primary>"Hello"</Button> should have a blue text for the button.

A good example of this would be the official Thaw UI website's navigation not indicating the current page.

In the screenshot above, I'm on the Thaw UI "Guide" page, however the button does not indicate this. It would make sense for this to be blue as suggested in this issue.

The Select component's height is 30px, whilst the default sized Button is 34px tall. Whilst this is a very minor difference, having these components side by side (such as in a filtering system) makes for some misalignment between them. It would be ideal if there were matching heights for these components.

(This supersedes the roadmaps in #11 and #72.)

Roadmap

• Component animation.
• Document writing.
• WAI-ARIA guidelines

like above picture,
how can I change calendar font size just like 2024-01-17(smaller) which I have modified using class?
thanks.

I'm new to Thaw, so may be there is another way already. Also something like flex-grow would be nice.

This is a draft of version 0.2.

Under development on the main branch

Roadmap

• Remove the default feature of csr.
• icondata was upgraded to v0.3.
• Controlled manner & uncontrolled manner (Change RwSignal to Model. Allows RwSignal (ReadSignal, None) (None, SignalSetter) to be converted to Model.)
• Change most of #[prop(optional)] T to #[prop(optional)] Option<T>
• leptos updated to v0.6.0.
• ButtonVariant::Solid is changed to ButtonVariant::Outlined
• Checkbox children can be empty.
• Rewrite Code component.

Would you consider making

thaw::components public

I would like to copy the component Select so I can implement multiple item selection and do a few other custom things but with that private I cant access Binder of Follower which makes it difficult.

Could you suggest a better way if not ?

Thanks

The example for <Radio> doesn't give any hint how I could arrange a radio group. Having just one radio button makes very little sense.

Hi

I am having a little issue with an ssr app and the dark / light mode.

Probably me doing something stupid.

I am not sure how to prevent the theme from defaulting to light when the ssr app sends the first hydrated page.

From what I read the Leptos author suggests setting

https://www.youtube.com/watch?v=AD3FHodVgE8&t=2040s
https://github.com/leptos-rs/example-darkmode/blob/main/src/dark_mode.rs

I have setup my project to send / get a cookie and on new refresh and I can instantly get the theme set correctly but
even though I set theme.set() with the cookie value at that time I have to wait until the page is dehydrated until I see the them change.

Thaw is enabled with ssr

Thanks

Using the commit 9216e5e results in build failure of our app:

    --> /home/kirill/ws/rust/thaw/thaw/src/modal/mod.rs:36:20
     |
36   |     let on_enter = move |_| {
     |                    ^^^^^^^^
     = note: required for `leptos::Callback<()>` to implement `From<{closure@/home/kirill/ws/rust/thaw/thaw/src/modal/mod.rs:36:20: 36:28}>`
     = note: required for `{closure@/home/kirill/ws/rust/thaw/thaw/src/modal/mod.rs:36:20: 36:28}` to implement `Into<leptos::Callback<()>>`
note: required by a bound in `CSSTransitionPropsBuilder::<T, CF, IV, (__node_ref, __show, __name, (), __on_after_enter, __on_after_leave, __children)>::on_enter`
    --> /home/kirill/ws/rust/thaw/thaw/src/components/css_transition/mod.rs:4:1
     |
4    | #[component]
     | ^^^^^^^^^^^^ required by this bound in `CSSTransitionPropsBuilder::<T, CF, IV, (__node_ref, __show, __name, (), __on_after_enter, __on_after_leave, __children)>::on_enter`
...
9    |     #[prop(optional, into)] on_enter: Option<Callback<()>>,
     |                             -------- required by a bound in this associated function
     = note: this error originates in the derive macro `::leptos::typed_builder_macro::TypedBuilder` (in Nightly builds, run with -Z macro-backtrace for more info)

error[E0277]: the trait bound `(dyn Callsite + 'static): callback::NotRawCallback` is not satisfied in `{closure@/home/kirill/ws/rust/thaw/thaw/src/modal/mod.rs:36:20: 36:28}`
    --> /home/kirill/ws/rust/thaw/thaw/src/modal/mod.rs:56:5
     |
36   |       let on_enter = move |_| {
     |                      -------- within this `{closure@/home/kirill/ws/rust/thaw/thaw/src/modal/mod.rs:36:20: 36:28}`
...
56   | /     view! {
57   | |         <Teleport>
58   | |             <div
59   | |                 class="thaw-modal-container"
...    |
80   | |                     on_enter
     | |                     --------
     | |                     |
     | |                     this tail expression is of type `{[email protected]:36:20}`
     | |                     required by a bound introduced by this call
...    |
114  | |         </Teleport>
115  | |     }
     | |_____^ within `{closure@/home/kirill/ws/rust/thaw/thaw/src/modal/mod.rs:36:20: 36:28}`, the trait `callback::NotRawCallback` is not implemented for `(dyn Callsite + 'static)`
     |
     = note: required because it appears within the type `&'static (dyn Callsite + 'static)`

We're using leptos with the feature nightly (as far as I remember that's where this problem with NotRawCallback appears).

In a particular use case of mine, I'd like the ButtonGroup component to stretch to full width, with each button child being equal width filling the space.

For example, something similar to:

<div class="flex w-full"> <!-- ButtonGroup -->
    <button class="w-1/3">One</button> <!-- Button -->
    <button class="w-1/3">Two</button> <!-- Button -->
    <button class="w-1/3">Three</button> <!-- Button -->
</div>

From:

view! {
    <ButtonGroup block=true>
        <Button>"One"</Button>
        <Button>"Two"</Button>
        <Button>"Three"</Button>
    </ButtonGroup>
}

Additionally, the ButtonGroup component is missing class and style props, so at this stage I don't even have a way of manually putting class="w-full" on the ButtonGroup sadly.

Hi @luoxiaozero
You have added Naive UI as a link to this repo in the "Resource" section. What does this actually mean? Is the idea to replicate inputs from that library or just use it as inspiration of some kind?
As for a concrete question, in Naive UI I see options "tag" and "filterable". How hard would it be to add these to thaw?

Finished `release` profile [optimized] target(s) in 1.61s
   Cargo finished cargo build --package=app --lib --target-dir=<path-to-my-project>/app/target/front --target=wasm32-unknown-unknown --no-default-features --features=hydrate --release
   Front compiling WASM

 Compiling thaw v0.2.3

error[E0432]: unresolved import `leptos::leptos_dom::Mountable`
  --> /Users/<user>/.cargo/registry/src/index.crates.io-6f17d22bba15001f/thaw-0.2.3/src/mobile/toast/mod.rs:13:22
   |
13 |         use leptos::{leptos_dom::Mountable, *};
   |                      ^^^^^^^^^^^^^^^^^^^^^ no `Mountable` in the root
   |
note: found an item that was configured out
  --> /Users/<user>/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptos_dom-0.6.9/src/lib.rs:78:11
   |
78 | pub trait Mountable {
   |           ^^^^^^^^^

error[E0599]: no method named `get_mountable_node` found for enum `leptos::View` in the current scope
  --> /Users/<user>/.cargo/registry/src/index.crates.io-6f17d22bba15001f/thaw-0.2.3/src/mobile/toast/mod.rs:17:25
   |
17 |         let node = node.get_mountable_node();
   |                         ^^^^^^^^^^^^^^^^^^ method not found in `View`
Some errors have detailed explanations: E0432, E0599.
For more information about an error, try `rustc --explain E0432`.
error: could not compile `thaw` (lib) due to 2 previous errors
Error: Failed to build app

My Cargo.toml:

[dependencies]
anyhow = "1"
cfg-if = "1"
console_error_panic_hook = "0.1"
http = "1.0"
leptos = "0.6.9"
leptos_integration_utils = { version = "0.6.9", optional = true }
leptos_meta = "0.6.9"
leptos_router = "0.6.9"
leptos_reactive = "0.6.9"
leptos-spin = { version = "0.1.0", optional = true }
log = "0.4.21"
serde = "1.0"
spin-sdk = { version = "2.2", optional = true }
wasm-bindgen = { version = "0.2", optional = true }
rust_decimal = "1.34.3"
countries = { version = "0.1.3", features = ["flags", "serde", "async-graphql"] }

thaw = { version = "0.2.3", default-features = false}

[workspace]

[features]
csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/csr", "thaw/csr"]
hydrate = [
  "leptos/hydrate",
  "leptos_meta/hydrate",
  "leptos_router/hydrate",
  "leptos_reactive/hydrate",
  "dep:wasm-bindgen",
  "thaw/hydrate",
]
ssr = [
  "leptos/ssr",
  "leptos_meta/ssr",
  "leptos_router/ssr",
  "leptos/spin",
  "dep:spin-sdk",
  "dep:leptos-spin",
  "dep:leptos_integration_utils",
  "thaw/ssr"
]

[profile.wasm-release]
inherits = "release"
opt-level = 'z'
lto = true
codegen-units = 1
panic = "abort"

[package.metadata.leptos]
assets-dir = "public"

# Mandatory fields for Spin apps
bin-target-triple = "wasm32-wasi"
bin-features = ["ssr"]
bin-default-features = false
lib-features = ["hydrate"]
lib-default-features = false

The default button variant seems to be Primary, however this isn't typically the most common button variant, and comparing with Pigment, Naive UI, and AntDesign, they all default to a more basic white button.

Additionally, I noticed that the default outlined button does not have a background color. Would it be preferred to have a background color for the default button similar to AntDesign and Pigment UI? This makes the most sense imo, since sometimes you might have a button over a slightly gray background, and want the button itself to be white, but there doesn't seem to be any way to add this without adding your own styles.

(This supersedes the roadmaps in #114 .)

Roadmap

WAI-ARIA guidelines

component

• Anchor component. #170
• BackTop component. #169
• Carousel component.
• Cascader component.
• Dropdown component.
• Multiselect component. #166
• Pagination component.
• Popconfirm component.
• Popselect component.
• Rate component.
• Tree component.

Making a component library is a huge project, and I have limited time. Everyone is welcome to open PR or issue.

When clicking on a button, there is a weird visual artifact at the end of the animation.

It seems to be a bug with FireFox Developer Edition as the regular edition does not exhibit this behavior, nor does Chromium.

Affected: FireFox Developer 124.0b9
Unaffected: FireFox 123.0.1, Chromium 122.0.6261.94, Edge122.0.2365.92

I tried recording, but seems to be missing some FPS to be fully clear. The second click is more obvious.

https://crates.io/crates/palette

• ColorPicker

Hello thaw developers,

I'm having an issue when trying to use the RadioGroup component. I want to capture the selected value when the user clicks on a radio button. However, using the on:input and on:change event handlers doesn't seem to respond correctly to user clicks. On the other hand, trying to use on:click raises a error.

error:

Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at passStringToWasm0 (textool.js:87:31)
    at imports.wbg.__wbg_value_47fe6384562f52ab (textool.js:865:14)
    at textool.wasm.web_sys::features::gen_HtmlInputElement::HtmlInputElement::value::h53599739e637161c (textool.wasm:0x94d1e1)
    at textool.wasm.leptos_dom::helpers::event_target_value::h4e39af179910b487 (textool.wasm:0x964d73)
    at textool.wasm.textool::app::__CaseConversion::{{closure}}::hfebe87d48516690c (textool.wasm:0x6c0998)
    at textool.wasm.leptos_dom::View::on::{{closure}}::hfbd0b2190cbd5bc5 (textool.wasm:0x875c8c)
    at textool.wasm.<alloc::boxed::Box<F,A> as core::ops::function::FnMut<Args>>::call_mut::h42e0bd424d71107f (textool.wasm:0x9e04b3)
    at textool.wasm.leptos_dom::View::on_impl::{{closure}}::{{closure}}::he1ee3d60d98b0b72 (textool.wasm:0x8ed38f)
    at textool.wasm.<alloc::boxed::Box<F,A> as core::ops::function::FnMut<Args>>::call_mut::hc89799fdd9d2e24e (textool.wasm:0xa0721d)
    at textool.wasm.leptos_dom::View::on::{{closure}}::h423cdef1c1edf72d (textool.wasm:0x876a68)

The icon prop in the Button component is of type Option<icondata_core::Icon>, which means it's not possible to change the icon based on a signal.

Is it possible for the icon prop use a signal instead?

my cargo.toml report following error. why? thanks!!!!!

cargo leptos build --release app
then run app
......
[DANGER] You have both csr and ssr or hydrate and ssr enabled as features, which may cause issues like ` failing to work silently.

if I remove thaw from toml and source code, DANGER disappear..

cargo.toml is as following:
[package]
name = "info_demo"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib", "rlib"]

[profile.release]
codegen-units = 1
lto = true

[dependencies]
console_log = "1.0.0"
console_error_panic_hook = "0.1.7"
cfg-if = "1.0.0"
leptos = { version="0.5.4", features = ["nightly"] }
leptos_axum = { version="0.5.4", optional = true }
leptos_meta = { version="0.5.4", features = ["nightly"] }
leptos_router = { version="0.5.4", features = ["nightly"] }
leptos-struct-table = { version="0.6.0", features = ["chrono"] }
chrono = { version = "0.4", features=["serde"] }
async-trait = "0.1"
log = "0.4.17"
simple_logger = "4.0.0"
serde = { version = "1.0.148", features = ["derive"] }
tracing = "0.1"
gloo-net = { version = "0.2.5", features = ["http"] }
reqwest = { version = "0.11.13", features = ["json"] }
axum = { version = "0.6.1", optional = true }
tower = { version = "0.4.13", optional = true }
tower-http = { version = "0.4", features = ["fs"], optional = true }
tokio = { version = "1.22.0", features = ["full"], optional = true }
http = { version = "0.2.11", optional = true }
web-sys = { version = "0.3", features = ["AbortController", "AbortSignal","CanvasRenderingContext2d","HtmlCanvasElement"] }
wasm-bindgen = "0.2"
#thaw = { version="", features = ["ssr"]}
thaw = {git="https://github.com/thaw-ui/thaw.git",branch="main"}
plotters = "^0.3.2"
wee_alloc = "0.4.5"
plotters-canvas = "^0.3.0"
rand = "0.8"
leptos_server_signal = ""

[features]
default = ["csr"]
csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/csr"]
hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
ssr = [
"dep:axum",
"dep:tower",
"dep:tower-http",
"dep:tokio",
"dep:http",
"leptos/ssr",
"thaw/ssr",
"leptos_axum",
"leptos_meta/ssr",
"leptos_router/ssr",
"leptos_server_signal/ssr",
"leptos_server_signal/axum", # or actix
]

[package.metadata.cargo-all-features]
denylist = ["axum", "tower", "tower-http", "tokio", "http", "leptos_axum"]
skip_feature_sets = [["csr", "ssr"], ["csr", "hydrate"], ["ssr", "hydrate"]]

[package.metadata.leptos]

The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name

output-name = "info_demo_axum"

The site root folder is where cargo-leptos generate all output. WARNING: all content of this folder will be erased on a rebuild. Use it in your server setup.

site-root = "target/site"

The site-root relative folder where all compiled output (JS, WASM and CSS) is written

Defaults to pkg

site-pkg-dir = "pkg"

[Optional] The source CSS file. If it ends with .sass or .scss then it will be compiled by dart-sass into CSS. The CSS is optimized by Lightning CSS before being written to //app.css

style-file = "./style.css"

[Optional] Files in the asset-dir will be copied to the site-root directory

assets-dir = "public"

The IP and port (ex: 127.0.0.1:3000) where the server serves the content. Use it in your server setup.

site-addr = "127.0.0.1:3000"

The port to use for automatic reload monitoring

reload-port = 3001

[Optional] Command to use when running end2end tests. It will run in the end2end dir.

end2end-cmd = "npx playwright test"

The browserlist query used for optimizing the CSS.

browserquery = "defaults"

Set by cargo-leptos watch when building with tha tool. Controls whether autoreload JS will be included in the head

watch = false

The environment Leptos will run in, usually either "DEV" or "PROD"

env = "DEV"

The features to use when compiling the bin target

Optional. Can be over-ridden with the command line parameter --bin-features

bin-features = ["ssr"]

If the --no-default-features flag should be used when compiling the bin target

Optional. Defaults to false.

bin-default-features = false

The features to use when compiling the lib target

Optional. Can be over-ridden with the command line parameter --lib-features

lib-features = ["hydrate"]

If the --no-default-features flag should be used when compiling the lib target

Optional. Defaults to false.

lib-default-features = false

Hi there. I tried to use the Tabs component that way, but it seems the Tab content is stacking over each other as you can see in the picture below.

The tabs header works properly, but when I try to add more tabs dynamically, this vertical stacking occurs. Im attaching the code below. Thanks for your help.

use leptos::{html::*, *};
use thaw::{Tab, TabProps, Tabs, TabsProps};

use crate::{
  footer, query_editor, query_table, sidebar,
  store::{self, editor::EditorStore},
};

pub fn component() -> impl IntoView {
  let tabs = use_context::<store::tabs::Tabs>().unwrap();
  let mut editors = use_context::<EditorStore>().unwrap();

  div()
    .classes("flex h-screen")
    .child(sidebar::index::component())
    .child(
      div()
        .classes("flex flex-col flex-1 overflow-hidden")
        .child(
          main()
            .classes("flex-1 overflow-y-scroll")
            .child(Tabs(TabsProps {
              value: tabs.selected_tab,
              class: MaybeSignal::Static(String::from("flex flex-col")),
              children: Children::to_children(move || {
                Fragment::new(vec![
                  For(ForProps {
                    each: move || (0..tabs.active_tabs.get()),
                    key: |index| index.to_string(),
                    children: move |index| {
                      Tab(TabProps {
                        key: index.to_string(),
                        label: (index + 1).to_string(),
                        class: MaybeSignal::Static(String::from("flex flex-col")),
                        children: Children::to_children(move || {
                          Fragment::new(vec![div()
                            // .child(query_editor::component(index))
                            // .child(query_table::component())
                            .into_view()])
                        }),
                      })
                    },
                  })
                  .into_view(),
                  button()
                    .on(ev::click, move |_| {
                      tabs.active_tabs.update(|prev| *prev += 1);
                      tabs
                        .selected_tab
                        .update(|prev| *prev = (prev.parse::<usize>().unwrap() + 1).to_string());
                      editors.add_editor();
                    })
                    .child("+")
                    .into_view(),
                ])
              }),
            })),
        )
        .child(footer::component()),
    )
}

Hi it would be nice if the completions of the AutoComplete component could be selected by keyboard arrows. Now it seems that only posibility is to select them by mouse.

Hi there,

there is an issue with message icon alignment as can be seen in the picture below.

Thanks for great work. :)

The Select component takes a Model<Option<T>> for the value. But this over complicates things in most cases, since there select would never have a None option. So the user needs to .unwrap() or match on the value every time they need to access it.

If the Option is removed, and user does in fact need a None option for their select, then they can make their own value be Option<T>, whilst the Select component itself doesn't need to care if the value uses an Option or not.

If you're happy with this change, I can implement it in #166

Hi, can you help me with how to use ModalFooter properly? The Modal component has a modal_footer prop. What is the proper way to pass it?

view! {
      <Modal
          show=show
          title="Save query!"
          modal_footer=ModalFooter {
              children: ChildrenFn::to_children(move || Fragment::new(
                  vec![
                      view! {
                          <div class="flex gap-2 justify-end">
                              <button
                                  class="px-4 py-2 border-1 border-neutral-200 hover:bg-neutral-200 rounded-md"
                                  on:click=move |_| {
                                      insert_query
                                          .dispatch((query_store, query_title(), project_name()));
                                      show.set(false);
                                  }
                              >

                                  Save
                              </button>
                              <button
                                  class="px-4 py-2 border-1 border-neutral-200 hover:bg-neutral-200 rounded-md"
                                  on:click=move |_| show.set(false)
                              >
                                  Cancel
                              </button>
                          </div>
                      }
                          .into_view(),
                  ],
              )),
          }
      >

          <div class="flex flex-col gap-2">
              <select
                  class="border-1 border-neutral-200 p-1 rounded-md w-full bg-white appearance-none"
                  value=project_name
                  default_value="teszt"
                  placeholder="Select project.."
              >
                  <For
                      each=move || projects.get()
                      key=|project| project.clone()
                      children=move |p| {
                          view! {
                              <option value=&p selected=project_name() == p>
                                  {p}
                              </option>
                          }
                      }
                  />

              </select>
              <input
                  class="border-1 border-neutral-200 p-1 rounded-md w-full"
                  type="text"
                  placeholder="Add query name.."
                  value=query_title
                  on:input=move |e| set_query_title(event_target_value(&e))
              />
          </div>
      </Modal>
  }

Since icons are typically used besides text or a label, it might make sense to add display: inline-block?

Hi I was wondering about changing the width of the Modal.
However, the question probably is more generic in that was is method for customising components.
I see Layout takes a style property.
Should most components take this parameter ? Or are things like this intended to be changed by modifying global css ?

I'm trying to follow along with the examples, and I can't get cargo leptos watch to run when adding thaw. This is my entire log to reproduce the problem on my system:

$ cargo leptos new --git leptos-rs/start-axum
🤷   Project Name: foo-app
🔧   Destination: /home/lordgaav/workspace/foo-app ...
🔧   project-name: foo-app ...
🔧   Generating template ...
...
\💡   Initializing a fresh Git repository
✨   Done! New project created /home/lordgaav/workspace/foo-app

$ cargo add thaw -F ssr
    Updating crates.io index
      Adding thaw v0.3.0 to dependencies
             Features:
             + ssr
             - csr
             - hydrate
    Updating crates.io index
     Locking 260 packages to latest compatible versions
      Adding addr2line v0.21.0 (latest: v0.22.0)
      Adding bitflags v1.3.2 (latest: v2.5.0)
      Adding cached v0.45.1 (latest: v0.49.3)
      Adding cached_proc_macro v0.18.1 (latest: v0.20.0)
      Adding darling v0.14.4 (latest: v0.20.8)
      Adding darling_core v0.14.4 (latest: v0.20.8)
      Adding darling_macro v0.14.4 (latest: v0.20.8)
      Adding gimli v0.28.1 (latest: v0.29.0)
      Adding hashbrown v0.13.2 (latest: v0.14.3)
      Adding http v0.2.12 (latest: v1.1.0)
      Adding lru v0.11.1 (latest: v0.12.3)
      Adding manyhow v0.10.4 (latest: v0.11.1)
      Adding manyhow-macros v0.10.4 (latest: v0.11.0)
      Adding matchit v0.7.3 (latest: v0.8.0)
      Adding object v0.32.2 (latest: v0.35.0)
      Adding proc-macro-utils v0.8.0 (latest: v0.9.1)
      Adding redox_syscall v0.4.1 (latest: v0.5.1)
      Adding serde_qs v0.12.0 (latest: v0.13.0)
      Adding siphasher v0.3.11 (latest: v1.0.1)
      Adding strsim v0.10.0 (latest: v0.11.1)
      Adding syn v1.0.109 (latest: v2.0.60)
      Adding sync_wrapper v0.1.2 (latest: v1.0.1)
      Adding wasi v0.11.0+wasi-snapshot-preview1 (latest: v0.13.0+wasi-0.2.0)
      Adding windows-core v0.52.0 (latest: v0.56.0)
      Adding windows-sys v0.48.0 (latest: v0.52.0)
      Adding windows-targets v0.48.5 (latest: v0.52.5)
      Adding windows_aarch64_gnullvm v0.48.5 (latest: v0.52.5)
      Adding windows_aarch64_msvc v0.48.5 (latest: v0.52.5)
      Adding windows_i686_gnu v0.48.5 (latest: v0.52.5)
      Adding windows_i686_msvc v0.48.5 (latest: v0.52.5)
      Adding windows_x86_64_gnu v0.48.5 (latest: v0.52.5)
      Adding windows_x86_64_gnullvm v0.48.5 (latest: v0.52.5)
      Adding windows_x86_64_msvc v0.48.5 (latest: v0.52.5)
      
$ cargo leptos watch                         
   Compiling proc-macro2 v1.0.81
   Compiling unicode-ident v1.0.12
...
   Compiling linear-map v1.2.0
   Compiling leptos_macro v0.6.11
   Compiling toml v0.8.12
   Compiling config v0.14.0
   Compiling leptos_config v0.6.11
   Compiling gloo-utils v0.2.0
   Compiling leptos_reactive v0.6.11
   Compiling gloo-net v0.5.0
   Compiling wasm-streams v0.4.0
   Compiling server_fn v0.6.11
   Compiling leptos_dom v0.6.11
   Compiling leptos_server v0.6.11
error[E0609]: no field `children` on type `html::HtmlElement<El>`
   --> /home/lordgaav/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptos_dom-0.6.11/src/html.rs:628:30
    |
628 |             if matches!(self.children, ElementChildren::Chunks(_)) {
    |                              ^^^^^^^^ unknown field
    |
    = note: available fields are: `span`, `element`, `view_marker`

error[E0609]: no field `children` on type `html::HtmlElement<El>`
   --> /home/lordgaav/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptos_dom-0.6.11/src/html.rs:838:30
    |
838 |             if matches!(self.children, ElementChildren::Chunks(_)) {
    |                              ^^^^^^^^ unknown field
    |
    = note: available fields are: `span`, `element`, `view_marker`

error[E0609]: no field `children` on type `html::HtmlElement<El>`
   --> /home/lordgaav/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptos_dom-0.6.11/src/html.rs:902:30
    |
902 |             if matches!(self.children, ElementChildren::Chunks(_)) {
    |                              ^^^^^^^^ unknown field
    |
    = note: available fields are: `span`, `element`, `view_marker`

error[E0609]: no field `children` on type `html::HtmlElement<El>`
   --> /home/lordgaav/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptos_dom-0.6.11/src/html.rs:929:30
    |
929 |             if matches!(self.children, ElementChildren::Chunks(_)) {
    |                              ^^^^^^^^ unknown field
    |
    = note: available fields are: `span`, `element`, `view_marker`

error[E0609]: no field `children` on type `html::HtmlElement<El>`
    --> /home/lordgaav/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptos_dom-0.6.11/src/html.rs:1044:30
     |
1044 |             if matches!(self.children, ElementChildren::Chunks(_)) {
     |                              ^^^^^^^^ unknown field
     |
     = note: available fields are: `span`, `element`, `view_marker`

error[E0433]: failed to resolve: use of undeclared type `ElementChildren`
   --> /home/lordgaav/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptos_dom-0.6.11/src/html.rs:628:40
    |
628 |             if matches!(self.children, ElementChildren::Chunks(_)) {
    |                                        ^^^^^^^^^^^^^^^ use of undeclared type `ElementChildren`

error[E0433]: failed to resolve: use of undeclared type `ElementChildren`
   --> /home/lordgaav/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptos_dom-0.6.11/src/html.rs:838:40
    |
838 |             if matches!(self.children, ElementChildren::Chunks(_)) {
    |                                        ^^^^^^^^^^^^^^^ use of undeclared type `ElementChildren`

error[E0433]: failed to resolve: use of undeclared type `ElementChildren`
   --> /home/lordgaav/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptos_dom-0.6.11/src/html.rs:902:40
    |
902 |             if matches!(self.children, ElementChildren::Chunks(_)) {
    |                                        ^^^^^^^^^^^^^^^ use of undeclared type `ElementChildren`

error[E0433]: failed to resolve: use of undeclared type `ElementChildren`
   --> /home/lordgaav/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptos_dom-0.6.11/src/html.rs:929:40
    |
929 |             if matches!(self.children, ElementChildren::Chunks(_)) {
    |                                        ^^^^^^^^^^^^^^^ use of undeclared type `ElementChildren`

error[E0433]: failed to resolve: use of undeclared type `ElementChildren`
    --> /home/lordgaav/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptos_dom-0.6.11/src/html.rs:1044:40
     |
1044 |             if matches!(self.children, ElementChildren::Chunks(_)) {
     |                                        ^^^^^^^^^^^^^^^ use of undeclared type `ElementChildren`

Some errors have detailed explanations: E0433, E0609.
For more information about an error, try `rustc --explain E0433`.
error: could not compile `leptos_dom` (lib) due to 10 previous errors
      Notify watching paths style, src, public

I've tried running the example with nightly rust (the default from cargo leptos new), stable rust. I also tried installing -F hydrate,ssr. Adding thaw/ssr and thaw/hydrate to the [features] section also doesn't seem to help. Removing thaw with cargo remove thaw immediately fixes the above errors.

I'm stumped, am I doing something wrong or am I running into a bug?

I use following way to change font-size， but it does not work？

<Alert variant=AlertVariant::Error title=alm.clone().objname class="thaw-alert__header thaw-alert__content" clone:alm >

Hello,

I have a use case where the user should be able to use her/his local decimal separator. E.g.: Thaw's InputNumber component require using . (dot) as decimal separator. Other countries use , (comma) as decimal separator.

I was thinking about implementing leptos-use's use_intl_number_format inside Thaw's InputNumber. What do you think about it?

If adding another external dependency is something you are not comfortable, I could use web-sys in order to get the user's locale data.

It could be implemented like a Thaw's feature. Developers should opt-in to "intl" feature of Thaw when adding it as a dependency.

Same could be implemented for DatePicker component as well.

AutoComplete provies class for its main div but internally it uses Input which adds an extra div inside and class for that input can't be changed through AutoComplete params

Hello,

I have a bit non-conventional setup with Leptos on NixOS.

I am getting the following error when trying to do cargo run:

[user@host:~/rust/leptos-ssr-thaw]$ cargo run --timings
   Compiling leptos-ssr-thaw v0.1.0 (/home/user/rust/leptos-ssr-thaw)
error[E0277]: the trait bound `&fn(ButtonProps) -> impl leptos_dom::IntoView {Button}: ComponentConstructor<_>` is not satisfied
   --> src/app.rs:47:5
    |
47  | /     view! {
48  | |         <h1>"Welcome to Leptos!"</h1>
49  | |         // <button on:click=on_click>"Click Me: " {count}</button>
50  | |
51  | |         <Button variant=ButtonVariant::Primary>"Click me" {count}</Button>
52  | |     }
    | |_____^ the trait `ComponentConstructor<_>` is not implemented for `&fn(ButtonProps) -> impl leptos_dom::IntoView {Button}`
    |
note: required by a bound in `component_view`
   --> /home/user/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptos-0.6.5/src/lib.rs:325:34
    |
325 | pub fn component_view<P>(f: impl ComponentConstructor<P>, props: P) -> View {
    |                                  ^^^^^^^^^^^^^^^^^^^^^^^ required by this bound in `component_view`
    = note: this error originates in the macro `view` (in Nightly builds, run with -Z macro-backtrace for more info)

error[E0277]: the trait bound `fn(ButtonProps) -> impl leptos_dom::IntoView {Button}: leptos::Component<_>` is not satisfied
   --> src/app.rs:47:5
    |
47  | /     view! {
48  | |         <h1>"Welcome to Leptos!"</h1>
49  | |         // <button on:click=on_click>"Click Me: " {count}</button>
50  | |
51  | |         <Button variant=ButtonVariant::Primary>"Click me" {count}</Button>
52  | |     }
    | |_____^ the trait `leptos::Component<_>` is not implemented for fn item `fn(ButtonProps) -> impl leptos_dom::IntoView {Button}`
    |
help: trait impls with same name found
   --> /home/user/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptos-0.5.7/src/lib.rs:309:1
    |
309 |   impl<F, R> Component<EmptyPropsBuilder> for F where F: FnOnce() -> R {}
    |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
310 |
311 | / impl<P, F, R> Component<P> for F
312 | | where
313 | |     F: FnOnce(P) -> R,
314 | |     P: Props,
    | |_____________^
    = note: perhaps two different versions of crate `leptos` are being used?
note: required by a bound in `component_props_builder`
   --> /home/user/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptos-0.6.5/src/lib.rs:319:15
    |
318 | pub fn component_props_builder<P: PropsOrNoPropsBuilder>(
    |        ----------------------- required by a bound in this function
319 |     _f: &impl Component<P>,
    |               ^^^^^^^^^^^^ required by this bound in `component_props_builder`
    = note: this error originates in the macro `view` (in Nightly builds, run with -Z macro-backtrace for more info)

For more information about this error, try `rustc --explain E0277`.
error: could not compile `leptos-ssr-thaw` (lib) due to 2 previous errors

Here's src/app.rs:

use crate::error_template::{AppError, ErrorTemplate};
use leptos::*;
use leptos_meta::*;
use leptos_router::*;
use thaw::{Button, ButtonVariant};

#[component]
pub fn App() -> impl IntoView {
    // Provides context that manages stylesheets, titles, meta tags, etc.
    provide_meta_context();

    view! {


        // injects a stylesheet into the document <head>
        // id=leptos means cargo-leptos will hot-reload this stylesheet
        <Stylesheet id="leptos" href="/pkg/leptos-ssr-thaw.css"/>

        // sets the document title
        <Title text="Welcome to Leptos"/>

        // content for this welcome page
        <Router fallback=|| {
            let mut outside_errors = Errors::default();
            outside_errors.insert_with_default_key(AppError::NotFound);
            view! {
                <ErrorTemplate outside_errors/>
            }
            .into_view()
        }>
            <main>
                <Routes>
                    <Route path="" view=HomePage/>
                </Routes>
            </main>
        </Router>
    }
}

/// Renders the home page of your application.
#[component]
fn HomePage() -> impl IntoView {
    // Creates a reactive value to update the button
    let (count, set_count) = create_signal(0);
    let on_click = move |_| set_count.update(|count| *count += 1);

    view! {
        <h1>"Welcome to Leptos!"</h1>
        // <button on:click=on_click>"Click Me: " {count}</button>

        <Button variant=ButtonVariant::Primary>"Click me" {count}</Button>
    }
}

[package]
name = "leptos-ssr-thaw"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib", "rlib"]

[profile.dev]
incremental = false
debug = 0
lto = "thin"

[dependencies]
axum = { version = "0.7", optional = true }
console_error_panic_hook = "0.1"
leptos = { version = "0.6", features = ["nightly"] }
leptos_axum = { version = "0.6", optional = true }
leptos_meta = { version = "0.6", features = ["nightly"] }
leptos_router = { version = "0.6", features = ["nightly"] }
tokio = { version = "1", features = ["rt-multi-thread"], optional = true }
tower = { version = "0.4", optional = true }
tower-http = { version = "0.5", features = ["fs"], optional = true }
wasm-bindgen = "=0.2.91"
thiserror = "1"
tracing = { version = "0.1", optional = true }
http = "1"
thaw = { version = "0.1.10", features = ["csr", "ssr"] }

[features]
hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
ssr = [
    "dep:axum",
    "dep:tokio",
    "dep:tower",
    "dep:tower-http",
    "dep:leptos_axum",
    "leptos/ssr",
    "leptos_meta/ssr",
    "leptos_router/ssr",
    "dep:tracing",
]

# Defines a size-optimized profile for the WASM bundle in release mode
[profile.wasm-release]
inherits = "release"
opt-level = 'z'
lto = true
codegen-units = 1
panic = "abort"
incremental = false

[package.metadata.leptos]
# The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name
output-name = "leptos-ssr-thaw"

# The site root folder is where cargo-leptos generate all output. WARNING: all content of this folder will be erased on a rebuild. Use it in your server setup.
site-root = "target/site"

# The site-root relative folder where all compiled output (JS, WASM and CSS) is written
# Defaults to pkg
site-pkg-dir = "pkg"

# [Optional] The source CSS file. If it ends with .sass or .scss then it will be compiled by dart-sass into CSS. The CSS is optimized by Lightning CSS before being written to <site-root>/<site-pkg>/app.css
style-file = "style/main.scss"
# Assets source dir. All files found here will be copied and synchronized to site-root.
# The assets-dir cannot have a sub directory with the same name/path as site-pkg-dir.
#
# Optional. Env: LEPTOS_ASSETS_DIR.
assets-dir = "public"

# The IP and port (ex: 127.0.0.1:3000) where the server serves the content. Use it in your server setup.
site-addr = "127.0.0.1:3000"

# The port to use for automatic reload monitoring
reload-port = 3001

# [Optional] Command to use when running end2end tests. It will run in the end2end dir.
#   [Windows] for non-WSL use "npx.cmd playwright test"
#   This binary name can be checked in Powershell with Get-Command npx
end2end-cmd = "npx playwright test"
end2end-dir = "end2end"

#  The browserlist query used for optimizing the CSS.
browserquery = "defaults"

# Set by cargo-leptos watch when building with that tool. Controls whether autoreload JS will be included in the head
watch = false

# The environment Leptos will run in, usually either "DEV" or "PROD"
env = "DEV"

# The features to use when compiling the bin target
#
# Optional. Can be over-ridden with the command line parameter --bin-features
bin-features = ["ssr"]

# If the --no-default-features flag should be used when compiling the bin target
#
# Optional. Defaults to false.
bin-default-features = false

# The features to use when compiling the lib target
#
# Optional. Can be over-ridden with the command line parameter --lib-features
lib-features = ["hydrate"]

# If the --no-default-features flag should be used when compiling the lib target
#
# Optional. Defaults to false.
lib-default-features = false

# The profile to use for the lib target when compiling for release
#
# Optional. Defaults to "release".
lib-profile-release = "wasm-release"

Hi,
I’m trying to use a Select within a Drawer (same thing with a Modal).
The options however appear behind the Drawer which is less than optimal…

(We only see a bit at the very bottom)
I’ve tried setting the Select’s z-index to 3000 but it doesn’t change anything (which I don’t think it can that way anyway?)

It works just fine with a standard html select:

Am I missing something somewhere or is this a bug?

Using git head the Drawer no longer closes on
pressing outside the drawer.

I think maybe on_after_leave has to also be on the fade transition but that is not the only issue
as the drawer still does not seem to close when is_lock is set to false.

Is it possible to add a callback to the Switch control ?

I basically want todo something like

<ActionForm action=toggle_myvalue_action>
            <input
                type="hidden"
                name="myvalue"
                value=move || (!myvalue()).to_string()
            />

            <thaw::Switch value  onchange="this.form.requestSubmit()"/>

</ActionForm>

I spent some time figuring out where I was suppose to see the documentation, when I saw that the link to the website was at the right.

It would be nice to add this link to the README, it is easier to find.

|

443 | enum SignalTypes
| ^^^^^^^^^^^
note: required because it appears within the type Signal<T>
--> C:\Users\Administrator.cargo\registry\src\rsproxy.cn-0dccff568467c15b\leptos_reactive-0.5.2\src\signal_wrappers_read.rs:76:12
|
76 | pub struct Signal
| ^^^^^^
note: required because it appears within the type StoredMaybeSignal<T>
--> C:\Users\Administrator.cargo\registry\src\rsproxy.cn-0dccff568467c15b\thaw-0.1.1\src\utils\stored_maybe_signal.rs:4:10
|
4 | pub enum StoredMaybeSignal
| ^^^^^^^^^^^^^^^^^
note: required because it's used within this closure
--> C:\Users\Administrator.cargo\registry\src\rsproxy.cn-0dccff568467c15b\thaw-0.1.1\src\input_number\mod.rs:41:15
|
41 | let sub = move |_| {
| ^^^^^^^^
= note: required for leptos::Callback<MouseEvent> to implement From<{closure@C:\Users\Administrator\.cargo\registry\src\rsproxy.cn-0dccff568467c15b\thaw-0.1.1\src\input_number\mod.rs:41:15: 41:23}>
= note: required for {closure@C:\Users\Administrator\.cargo\registry\src\rsproxy.cn-0dccff568467c15b\thaw-0.1.1\src\input_number\mod.rs:41:15: 41:23} to implement Into<leptos::Callback<MouseEvent>>
note: required by a bound in ButtonPropsBuilder::<(__style, __variant, __color, __round, __icon, __loading, __disabled, (), __children)>::on_click
--> C:\Users\Administrator.cargo\registry\src\rsproxy.cn-0dccff568467c15b\thaw-0.1.1\src\button\mod.rs:58:1
|
58 | #[component]
| ^^^^^^^^^^^^ required by this bound in ButtonPropsBuilder::<(__style, __variant, __color, __round, __icon, __loading, __disabled, (), __children)>::on_click
...
67 | #[prop(optional, into)] on_click: Option<Callbackev::MouseEvent>,
| -------- required by a bound in this associated function
= note: this error originates in the derive macro ::leptos::typed_builder_macro::TypedBuilder (in Nightly builds, run with -Z macro-backtrace for more info)

For more information about this error, try rustc --explain E0277.
error: could not compile thaw (lib) due to 7 previous errors

windows 10 leptos 0.5.2

any ideas?

<Input> does have a comp_ref property that allows access to focus the input field when needed.

It would be great if <InputNumber> did allow passing that property trough.

The Tabs component has a non-compiling example, though the data presented in the table below it is correct:

    let val = create_rw_signal("apple");  // <- this is a &str, not a String
    view! {
        <Tabs value=val>
            <Tab key="apple" label="Apple">
                "apple"
            </Tab>
            <Tab key="pear" label="Pear">
                "pear"
            </Tab>
        </Tabs>
    }

The signal must be a String, or it gives this error:

error[E0277]: the trait bound `RwSignal<std::string::String>: From<RwSignal<&str>>` is not satisfied
  --> src/main.rs:15:5

The example project is correct: https://github.com/thaw-ui/thaw/blob/main/demo/src/pages/tabs/mod.rs#L8

Can the docs be built from the compiling examples, perhaps with Rustdoc?

Okay I've remove this in 68928ad in order to keep the PR non-breaking, but are you happy to include this in the next version? If so, I can open an issue to track this.

I often refer to Ant Design and other UI libraries for these decisions and see they use inline-block, and it also makes sense for the UI's I'm building with Thaw.

Originally posted by @tqwewe in #166 (comment)

DateTime picker popup does does show when used within a drawer component.
It z-index needs to be greater.

code is as following

select menu like following picture

It panics here:

I wanted to add on:click handler but couldn't