Giter VIP home page Giter VIP logo

leptonic's People

Contributors

baptistemontan avatar ja-he avatar jbutterwick avatar lfrancke avatar lhjok avatar lpotthast avatar mondeja avatar ngutech21 avatar tordynnar avatar vincentberthier avatar wt avatar ydirson avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

leptonic's Issues

Error after upgrading to the latest version

error[E0599]: the method `clone` exists for enum `Option<Callback<f64, String>>`, but its trait bounds were not satisfied
   --> /var/home/lhjok/.cargo/git/checkouts/leptonic-09c2066a1d051b46/9a3e7be/leptonic/src/slider.rs:273:23
    |
273 |         value_display.clone(),
    |                       ^^^^^ method cannot be called on `Option<Callback<f64, String>>` due to unsatisfied trait bounds

Tabs are not nestable

If you change the nested tabs example of the documentation to this code:

<Tabs mount=Mount::Once>
    <Tab name="outer-1" label="Outer 1".into_view()>
        <Tabs>
            <Tab name="inner-1" label="Inner 1".into_view()>
                "This is a nested tab."
            </Tab>
            <Tab name="inner-2" label="Inner 2".into_view()>
                "This tab is nested as well."
            </Tab>
        </Tabs>
        <Tabs>
            <Tab name="inner-3" label="Inner 3".into_view()>
                "This is a nested tab."
            </Tab>
            <Tab name="inner-4" label="Inner 4".into_view()>
                "This tab is nested as well."
            </Tab>
        </Tabs>
    </Tab>
    <Tab name="outer-2" label="Outer 2".into_view()/>
</Tabs>

You can see that a really strange behaviour appears...

image

Outer 2 is included inside the second nested tab. I suspect that happens because the order of rendering of individual tabs is "Outer 1, Inner 1, Inner 2, Inner 3, Inner 4, Outer 2" and when the Outer 2 tab is rendered, the last context passed to Leptos is the second nested Tabs object, so Outer 2 is added to that Tabs.

I'm not sure if this is a problem of Leptos itself. It should traverse upwards from <Tab name="outer-2" founding the outer context, but it is not the case.

Need a Contact Person

Hey Lukas,

i would like to report vulnerability to you, could you assist on that matter ?

Thank you in advance
un_kn0wn

Select behaviour issue when searching and pressing "enter"

Hi, I found a problematic behaviour.
When using the select component, if you search for a string with no match in the list and then press "enter", it will select (or add if it's a multi-select) the first available element in the list although it shows "No options...".
Since it shows "No options...", pressing enter should either close the dropdown without selecting anything or keeping it open since no match was found.

Consider user template for multiselect

Currently the MultiSelect seems to force selected items above the dropdown as chips. Could you consider maybe allowing the user to define where they get rendered. Not sure what the api would look like.

For example I have long strings in a multiselect. I would like the to display is a scrollable box below the selection.

That would add more flexibility for the user.

tauri+leptos+leptonic gives a compilation error

I wanted to try tauri with leptos and this leptonic library. I go through these steps:

sh <(curl https://create.tauri.app/sh)    # choosing tauri-leptos as name, cargo/rust and leptos
✔ Project name · tauri-leptos
✔ Choose which language to use for your frontend · Rust - (cargo)
✔ Choose your UI template · Leptos - (https://leptos.dev/)

cd tauri-leptos

# I want to use components from leptonic, I don't really care if it uses client or server side-rendering
# (I follow leptonic's doc's on custom installation):

cargo add leptonic --features clipboard,tiptap

cargo tauri dev

During the compilation I notice the following error (the tauri demo screen shows up empty white)

   Compiling leptos_meta v0.6.9
        Warn Waiting for your frontend dev server to start on http://localhost:1420/...                                                                                                                                                      
error[E0599]: no method named `clipboard` found for struct `Navigator` in the current scope
   --> /home/francis/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptonic-0.5.0/src/typography.rs:199:29
    |
199 |             match navigator.clipboard() {
    |                             ^^^^^^^^^ method not found in `Navigator`

For more information about this error, try `rustc --explain E0599`.
error: could not compile `leptonic` (lib) due to 1 previous error
2024-03-09T13:06:38.998522Z ERROR ❌ error
error from build pipeline

Caused by:
    0: HTML build pipeline failed (1 errors), showing first
    1: error from asset pipeline
    2: error during cargo build execution
    3: cargo call to executable 'cargo' with args: '["build", "--target=wasm32-unknown-unknown", "--manifest-path", "/home/francis/dev/projects/tauri/tauri-leptos/Cargo.toml"]' returned a bad status: exit status: 101
2024-03-09T13:06:38.999658Z  INFO 📡 serving static assets at -> /

Is there something I'm doing wrong in the way to use leptonic in tauri-leptos? Thank you!

PS it works without the clipboard feature. I can copy from and paste to the tauri window. Do one really need the clipboard feature? What benefit does it offer?

SliderMarks::Custom is unusable

Hello,

I'm not sure if that's intended, but there is no way to create an instance of SliderMarks::Custom because it requires a Vec<SliderMark> and SliderMark has only private fields without any other way to instantiate it. I had a situation where the automatically generated slider marks were too close together and I only wanted to render every second mark, and I had to result to hiding every second slider mark with CSS, which isn't ideal:

.marks div:nth-child(even) {
  display: none;
}

If you want me to, I'll create a PR with a simple constructor for SliderMark.

[Error] the trait bound `&fn(RootProps<_>) -> impl leptos_dom::IntoView {leptonic::root::Root::<_>}: ComponentConstructor<_>` is not satisfied

Hi,

I'm trying to setup Leptonic with Leptos v0.6.3 nightly and I've been following along with the Installation and Usage sections of the official docs. However, when I try to run the app using trunk serve the following error is thrown in the compile time:

the trait bound `&fn(RootProps<_>) -> impl leptos_dom::IntoView {leptonic::root::Root::<_>}: ComponentConstructor<_>` is not satisfied

Any idea on what is wrong with the setup?

Alert slots does not handle namespace

When Leptonic is imported as a namespace, the expansion of slots like AlertContent should drop the namespace when creating the alert_content prop on Alert:

use leptonic::prelude as ltn;
...
                    <ltn::Alert variant=ltn::AlertVariant::Danger>
                        <ltn::AlertContent slot>"Bad URL (route not matched)"</ltn::AlertContent>
                    </ltn::Alert>

causes:

error: proc macro panicked
  --> src/main.rs:53:42
   |
53 |                   <ltr::Router fallback=|| view!{
   |  __________________________________________^
54 | |                     <ltn::Alert variant=ltn::AlertVariant::Danger>
55 | |                         <ltn::AlertContent slot>"Bad URL (route not matched)"</ltn::AlertContent>
56 | |                     </ltn::Alert>
57 | |                 }.into_view() >
   | |_________________^
   |
   = help: message: `"ltn::alert_content"` is not a valid identifier

Workaround: explicit use leptonic::prelude::AlertContent;

Leptonic license?

Currently there is no license file or the license anywhere. Is it MIT? Can we use Leptonic freely and in commercial software?

Build fails when used with leptos nightly feature

Dependency in Cargo.toml:
leptos = { version = "0.5.1", features = ["csr", "nightly"] }

Build error:

   Compiling leptonic v0.3.0-rc1 (.../leptonic/leptonic)
error[E0119]: conflicting implementations of trait `From<leptos::Callback<_>>` for type `Out<_>`
   -->.../leptonic/leptonic/src/lib.rs:334:1
    |
322 | impl<T: 'static, F: Fn(T) -> () + 'static> From<F> for Out<T> {
    | ------------------------------------------------------------- first implementation here
...
334 | impl<O: 'static> From<Callback<O, ()>> for Out<O> {
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ conflicting implementation for `Out<_>`

error[E0119]: conflicting implementations of trait `From<leptos::WriteSignal<_>>` for type `Out<_>`
   --> .../leptonic/leptonic/src/lib.rs:346:1
    |
322 | impl<T: 'static, F: Fn(T) -> () + 'static> From<F> for Out<T> {
    | ------------------------------------------------------------- first implementation here
...
346 | impl<O: 'static> From<WriteSignal<O>> for Out<O> {
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ conflicting implementation for `Out<_>`

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

Roadmap

Things planned for the future

  • Table component with corresponding THead, TBody, TFooter, Tr and Td.
  • Kbd component displaying keyboard chortcuts.
  • ColorPicker of some sort. At least capable of HSV color selection.
  • Adept to leptos 0.5
  • SSR support
  • CSR template
  • SSR template
  • Leptos 0.6 support
  • ProgressCircle component, displaying progress in a circular form. Might extend Progress with display variants.
  • Spinner component. Could this just be an indeterminate ProgressCircle instead?
  • ContextMenu for right-click menus
  • AppMenu on-top-of-page old-school dropdown-like and expandable menus
  • A theme builder. Interactively manipulate CSS variables provided by leptos-theme to build a custsom theme. Export, save, reload, ...
  • Interactive charts, most likely rendered as SVGs
  • Tailwind template (creating and styling a custom component using hooks)

Unable to Run Leptonic with Leptos-Axum on NixOS

Hello,

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

What I have done is used the latest leptos template with cargo leptos new and then rsync -a the contents of src, style, and public of https://github.com/lpotthast/leptonic-template-ssr to leptos project dir.

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

error[E0119]: conflicting implementations of trait `From<leptos::Callback<_>>` for type `Out<_>`
   --> /home/user/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptonic-0.5.0/src/lib.rs:382:1
    |
370 | impl<T: 'static, F: Fn(T) + 'static> From<F> for Out<T> {
    | ------------------------------------------------------- first implementation here
...
382 | impl<O: 'static> From<Callback<O, ()>> for Out<O> {
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ conflicting implementation for `Out<_>`

error[E0119]: conflicting implementations of trait `From<leptos::WriteSignal<_>>` for type `Out<_>`
   --> /home/user/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptonic-0.5.0/src/lib.rs:388:1
    |
370 | impl<T: 'static, F: Fn(T) + 'static> From<F> for Out<T> {
    | ------------------------------------------------------- first implementation here
...
388 | impl<O: 'static> From<WriteSignal<O>> for Out<O> {
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ conflicting implementation for `Out<_>`

error[E0277]: the trait bound `O: leptos::callback::NotRawCallback` is not satisfied in `{closure@/home/user/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptonic-0.5.0/src/select.rs:763:49: 763:69}`
   --> /home/user/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptonic-0.5.0/src/select.rs:756:25
    |
756 | /                          view! {
757 | |                              <leptonic-select-option>
758 | |                                  <Chip
759 | |                                      color=ChipColor::Secondary
...   |
763 | |                                      dismissible=move |e: MouseEvent| {
    | |                                      ----------- --------------------
    | |                                      |           |
    | | _____________________________________|___________within this `{closure@/home/user/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptonic-0.5.0/src/select.rs:763:49: 763:69}`
    | ||                                     |
    | ||                                     required by a bound introduced by this call
764 | ||                                         e.stop_propagation();
765 | ||                                         deselect.get_value().call(clone.clone());
766 | ||                                     }>
    | ||_____________________________________- this tail expression is of type `{[email protected]:763:49}`
...   |
769 | |                              </leptonic-select-option>
770 | |                          }}).collect_view()
    | |__________________________^ within `{closure@/home/user/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptonic-0.5.0/src/select.rs:763:49: 763:69}`, the trait `leptos::callback::NotRawCallback` is not implemented for `O`, which is required by `{closure@/home/user/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptonic-0.5.0/src/select.rs:763:49: 763:69}: Into<leptos::Callback<MouseEvent>>`
    |
note: required because it's used within this closure
   --> /home/user/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptonic-0.5.0/src/select.rs:763:49
    |
763 | ...                   dismissible=move |e: MouseEvent| {
    |                                   ^^^^^^^^^^^^^^^^^^^^
    = note: required for `leptos::Callback<MouseEvent>` to implement `From<{closure@/home/user/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptonic-0.5.0/src/select.rs:763:49: 763:69}>`
    = note: required for `{closure@/home/user/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptonic-0.5.0/src/select.rs:763:49: 763:69}` to implement `Into<leptos::Callback<MouseEvent>>`
note: required by a bound in `ChipPropsBuilder::<(__color, (), __id, __class, __style, __children)>::dismissible`
   --> /home/user/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptonic-0.5.0/src/chip.rs:38:1
    |
38  | #[component]
    | ^^^^^^^^^^^^ required by this bound in `ChipPropsBuilder::<(__color, (), __id, __class, __style, __children)>::dismissible`
...
41  |     #[prop(into, optional)] dismissible: Option<Callback<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)
help: consider further restricting this bound
    |
585 |     O: SelectOption + PartialOrd + Ord + 'static + leptos::callback::NotRawCallback,
    |                                                  ++++++++++++++++++++++++++++++++++

error[E0277]: the trait bound `leptos::Callback<O>: leptos::callback::NotRawCallback` is not satisfied in `{closure@/home/user/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptonic-0.5.0/src/select.rs:763:49: 763:69}`
   --> /home/user/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptonic-0.5.0/src/select.rs:756:25
    |
756 | /                          view! {
757 | |                              <leptonic-select-option>
758 | |                                  <Chip
759 | |                                      color=ChipColor::Secondary
...   |
763 | |                                      dismissible=move |e: MouseEvent| {
    | |                                      ----------- --------------------
    | |                                      |           |
    | | _____________________________________|___________within this `{closure@/home/user/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptonic-0.5.0/src/select.rs:763:49: 763:69}`
    | ||                                     |
    | ||                                     required by a bound introduced by this call
764 | ||                                         e.stop_propagation();
765 | ||                                         deselect.get_value().call(clone.clone());
766 | ||                                     }>
    | ||_____________________________________- this tail expression is of type `{[email protected]:763:49}`
...   |
769 | |                              </leptonic-select-option>
770 | |                          }}).collect_view()
    | |__________________________^ within `{closure@/home/user/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptonic-0.5.0/src/select.rs:763:49: 763:69}`, the trait `leptos::callback::NotRawCallback` is not implemented for `leptos::Callback<O>`, which is required by `{closure@/home/user/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptonic-0.5.0/src/select.rs:763:49: 763:69}: Into<leptos::Callback<MouseEvent>>`
    |
note: required because it appears within the type `PhantomData<leptos::Callback<O>>`
   --> /nix/store/sm9z36byql5p8kq9654hnzgbd3f9p230-rust-default-1.78.0-nightly-2024-02-13/lib/rustlib/src/rust/library/core/src/marker.rs:740:12
    |
740 | pub struct PhantomData<T: ?Sized>;
    |            ^^^^^^^^^^^
note: required because it appears within the type `leptos::StoredValue<leptos::Callback<O>>`
   --> /home/user/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptos_reactive-0.6.5/src/stored_value.rs:24:12
    |
24  | pub struct StoredValue<T>
    |            ^^^^^^^^^^^
note: required because it's used within this closure
   --> /home/user/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptonic-0.5.0/src/select.rs:763:49
    |
763 | ...                   dismissible=move |e: MouseEvent| {
    |                                   ^^^^^^^^^^^^^^^^^^^^
    = note: required for `leptos::Callback<MouseEvent>` to implement `From<{closure@/home/user/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptonic-0.5.0/src/select.rs:763:49: 763:69}>`
    = note: required for `{closure@/home/user/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptonic-0.5.0/src/select.rs:763:49: 763:69}` to implement `Into<leptos::Callback<MouseEvent>>`
note: required by a bound in `ChipPropsBuilder::<(__color, (), __id, __class, __style, __children)>::dismissible`
   --> /home/user/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptonic-0.5.0/src/chip.rs:38:1
    |
38  | #[component]
    | ^^^^^^^^^^^^ required by this bound in `ChipPropsBuilder::<(__color, (), __id, __class, __style, __children)>::dismissible`
...
41  |     #[prop(into, optional)] dismissible: Option<Callback<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)

Some errors have detailed explanations: E0119, E0277.
For more information about an error, try `rustc --explain E0119`.
error: could not compile `leptonic` (lib) due to 4 previous errors

And here is the Cargo.toml:

[package]
name = "leptos-proper"
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"
leptonic = "0.5.0"

[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-proper"

# 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"

Thanks in advance.

Deploy `leptonic.dev` for all versions of the library

The website always shows guides / documentation for the latest version of Leptonic. To be concrete, it currently shows the current master state.

This does not allow users stuck on older versions to view guides related to the version they are using.
It also doe not reflect the latest release. As most people should use a release and not depend on master, this is an issue.

The version info in the top right should be made into a version selector. Each version of the website needs its own deployment, based on the git tag of that version. Versions of the website must be available at paths like 'leptonic.dev/v0.5'.

The latest release should be the default version. Viewing guides for an upcoming release (current master branch state) should still be possible.

What does this error message mean, am I missing something?

error[E0432]: unresolved imports `leptos_use::use_element_size`, `leptos_use::UseElementSizeReturn`
 --> /var/home/lhjok/.cargo/git/checkouts/leptonic-09c2066a1d051b46/c10671e/leptonic/src/progress_bar.rs:2:18
  |
2 | use leptos_use::{use_element_size, UseElementSizeReturn};
  |                  ^^^^^^^^^^^^^^^^  ^^^^^^^^^^^^^^^^^^^^ no `UseElementSizeReturn` in the root
  |                  |
  |                  no `use_element_size` in the root
  |                  help: a similar name exists in the module: `use_element_hover`

error[E0432]: unresolved imports `leptos_use::use_element_size`, `leptos_use::UseElementSizeReturn`
 --> /var/home/lhjok/.cargo/git/checkouts/leptonic-09c2066a1d051b46/c10671e/leptonic/src/skeleton.rs:2:18
  |
2 | use leptos_use::{use_element_size, UseElementSizeReturn};
  |                  ^^^^^^^^^^^^^^^^  ^^^^^^^^^^^^^^^^^^^^ no `UseElementSizeReturn` in the root
  |                  |
  |                  no `use_element_size` in the root
  |                  help: a similar name exists in the module: `use_element_hover`

For more information about this error, try `rustc --explain E0432`.
error: could not compile `leptonic` (lib) due to 2 previous errors
2023-08-18T19:05:55.820210Z ERROR ❌ error

ContextMenu implementation

Hi there.

I was wondering if you would be open to me contributing the right click context menu. Would probably take me a few weeks.
My current thoughts for this would be a set of components which could be composed in a context menu container. For example this menu:

Would look something like this:

<ContextMenu>
<MenuButton on:click=|_| do_preview()><Icon icon=BsIcon::BsEye/> "Preview" </MenuButton>
<SubMenu submenu=view!{<MenuButton> ... }><Icon icon=BsIcon::BsShare/> "Share" </SubMenu>
...
<Divider/>
<MenuButton>...
</ContextMenu>

Features:

  • Should be able to be spawned at mouse, or at customisable target button. Probably separate these into two separate components.
  • Should support both right and left clicks.
  • Box should spawn at top left of target/mouse, but should relax this if the box were to go off the browser window.
  • Clicking off menu anywhere should close it. (I think this implies there must be a on click handler in the <body>)
  • Submenus should be supported, which can be expanded with click or hover.
  • Context menu should make sure it only can be activated within its parent.
  • In the right click case one might need a component <ContextMenuData data=...> which sets a signal when the menu select event happens in its containing elements. This can be used by the context menus callbacks to implement different behaviour depending on the ContextMenuData data.
  • Should be animated transition to submenu
  • Corner rounding, hover background colour, border submenu expand icon, animated transition time, shadow should be able to be customised utilising CSS variables

Interested to see if you think this is the right approach. Thanks.

leptonic does not work with workspaces

I am using the Leptos starter which splits app, frontend and server in different packages in workspaces.

The leptonic build script fails:

cargo:warning=[DEBUG] out_dir is: "/foo/leptos-starter/target/debug/build/leptonic-88f925a386847464/out"
cargo:warning=[DEBUG] root_dir is: "/foo/leptos-starter"
cargo:warning=[DEBUG] Aborting. Root dir does not contain a package.

This is true. The /foo/leptos-starter does not contain a package itself, it is just the workspace.
I did add leptonic to the app package as a dependency but it looks like the build.rs script doesn't support this scenario as it always tries to find the target folder and the picks its parent.

Documentation missing information about target folder

The custom build script for leptonic assumes that:

  • the target folder is named "target";
  • the target folder is located in the project root.

This may not be the case. Thus, IMO the installation section of the documentation should mention that you cannot set CARGO_TARGET_DIR to anything other than the default.
For the first problem, I don't think we have an actually reliable way to get the target folder in the build script. The second problem may be fixable.

Custom classes

Hi!

I am using Tailwind with DaisyUI so I'd like to add custom classes to my components such as https://leptonic.dev/doc/select .

<select class="select select-bordered w-full max-w-xs join-item">
    <option>
        EUR
    </option>
    <option>
        USD
    </option>
</select>

Is it possible to run this lib headless and providing functionality to add such custom classes?

leptonic with tailwind

hello,

question about the styling, can we only install

  • cargo add leptonic

have have the styling done with tailwind or bootstrap ect. or do we really need;

-cargo add --build leptonic-theme
-cargo add --build leptos-tiptap-build
build.rs
@import "../generated/leptonic/leptonic-themes";

Attempted to get a signal after it was disposed.

I decided to try out v0.6.0 (main) and after adjusting the use statements my code compiles without error, but I got this runtime error:

panicked at /2TB/git/leptonic/leptonic/src/components/select.rs:243:53:
Attempted to get a signal after it was disposed.
signal created here: /2TB/git/leptonic/leptonic/src/components/select.rs:104:44
warning happened here: /2TB/git/leptonic/leptonic/src/components/select.rs:243:53

I'm not sure if my code is relevant at all, but I can answer any questions and help debug - tomorrow. 💤

Thanks for the amazing work!

InputNumber internationalization

In some languages, the decimal separator is not the . (in French for example, it’s the ,).

As it is, even with the page in French, in an InputNumber the separator remains the . at least when inputting new values because the display replaces that with a , (at least sometimes, it’s weird).

Still, it would be good if we could allow custom seperators at least for inputs. I’ve tried to do that but without success (even if the parsing works, it gets messed up when displaying it back).

leptonic.dev is down, can't create secure connection

I believe something went wrong with the docs build of 0.3.0 and/or there is an issue with the certificate. Both brave and Safari are complaining about security when trying to go to the site such that it won't open it.

Integration with Cargo-Leptos

Hello, I was wondering if there was any plans to get this library working with cargo-leptos? I was looking to make a template for The axum template with leptonic. What work is needed to make that happen? i'd be willing to help out on that feature if given some context.

leptos has been upgraded to 0.5.0, and new problems have arisen.

error[E0432]: unresolved imports `leptos::leptos_dom::Callable`, `leptos::leptos_dom::Callback`, `leptos::leptos_dom::StoredCallback`
 --> /var/home/lhjok/.cargo/git/checkouts/leptonic-09c2066a1d051b46/a4eb2d8/leptonic/src/lib.rs:4:18
  |
4 |     leptos_dom::{Callable, Callback, StoredCallback},
  |                  ^^^^^^^^  ^^^^^^^^  ^^^^^^^^^^^^^^ no `StoredCallback` in the root
  |                  |         |
  |                  |         no `Callback` in the root
  |                  no `Callable` in the root
  |
  = help: consider importing this trait instead:
          leptos::Callable
  = help: consider importing one of these items instead:
          crate::Out::Callback
          leptos::Callback
  = help: consider importing one of these items instead:
          crate::CopyableOut::StoredCallback
          crate::Out::StoredCallback

error[E0432]: unresolved imports `leptos::leptos_dom::Callable`, `leptos::leptos_dom::Callback`
 --> /var/home/lhjok/.cargo/git/checkouts/leptonic-09c2066a1d051b46/a4eb2d8/leptonic/src/chip.rs:4:18
  |
4 |     leptos_dom::{Callable, Callback},
  |                  ^^^^^^^^  ^^^^^^^^ no `Callback` in the root
  |                  |
  |                  no `Callable` in the root
  |
  = help: consider importing one of these items instead:
          crate::Callable
          leptos::Callable
  = help: consider importing one of these items instead:
          crate::Callback
          crate::Out::Callback
          leptos::Callback

error[E0432]: unresolved import `leptos::leptos_dom::Callback`
 --> /var/home/lhjok/.cargo/git/checkouts/leptonic-09c2066a1d051b46/a4eb2d8/leptonic/src/color_picker.rs:6:14
  |
6 | use leptos::{leptos_dom::Callback, *};
  |              ^^^^^^^^^^^^^^^^^^^^ no `Callback` in the root
  |
  = help: consider importing one of these items instead:
          crate::Callback
          crate::Out::Callback
          leptos::Callback

error[E0432]: unresolved imports `leptos::leptos_dom::Callable`, `leptos::leptos_dom::Callback`
 --> /var/home/lhjok/.cargo/git/checkouts/leptonic-09c2066a1d051b46/a4eb2d8/leptonic/src/date_selector.rs:2:18
  |
2 |     leptos_dom::{Callable, Callback},
  |                  ^^^^^^^^  ^^^^^^^^ no `Callback` in the root
  |                  |
  |                  no `Callable` in the root
  |
  = help: consider importing one of these items instead:
          crate::Callable
          leptos::Callable
  = help: consider importing one of these items instead:
          crate::Callback
          crate::Out::Callback
          leptos::Callback

error[E0432]: unresolved import `leptos::leptos_dom::Callback`
 --> /var/home/lhjok/.cargo/git/checkouts/leptonic-09c2066a1d051b46/a4eb2d8/leptonic/src/datetime_input.rs:1:14
  |
1 | use leptos::{leptos_dom::Callback, *};
  |              ^^^^^^^^^^^^^^^^^^^^ no `Callback` in the root
  |
  = help: consider importing one of these items instead:
          crate::Callback
          crate::Out::Callback
          leptos::Callback

error[E0432]: unresolved imports `leptos::leptos_dom::Callable`, `leptos::leptos_dom::Callback`
 --> /var/home/lhjok/.cargo/git/checkouts/leptonic-09c2066a1d051b46/a4eb2d8/leptonic/src/input.rs:5:18
  |
5 |     leptos_dom::{Callable, Callback},
  |                  ^^^^^^^^  ^^^^^^^^ no `Callback` in the root
  |                  |
  |                  no `Callable` in the root
  |
  = help: consider importing one of these items instead:
          crate::Callable
          leptos::Callable
  = help: consider importing one of these items instead:
          crate::Callback
          crate::Out::Callback
          leptos::Callback

error[E0432]: unresolved imports `leptos::leptos_dom::Callable`, `leptos::leptos_dom::Callback`, `leptos::leptos_dom::StoredCallback`
 --> /var/home/lhjok/.cargo/git/checkouts/leptonic-09c2066a1d051b46/a4eb2d8/leptonic/src/quicksearch.rs:3:18
  |
3 |     leptos_dom::{Callable, Callback, StoredCallback},
  |                  ^^^^^^^^  ^^^^^^^^  ^^^^^^^^^^^^^^ no `StoredCallback` in the root
  |                  |         |
  |                  |         no `Callback` in the root
  |                  no `Callable` in the root
  |
  = help: consider importing one of these items instead:
          crate::Callable
          leptos::Callable
  = help: consider importing one of these items instead:
          crate::Callback
          crate::Out::Callback
          leptos::Callback
  = help: consider importing one of these items instead:
          crate::CopyableOut::StoredCallback
          crate::Out::StoredCallback
          crate::StoredCallback

error[E0432]: unresolved imports `leptos::leptos_dom::Callable`, `leptos::leptos_dom::Callback`, `leptos::leptos_dom::StoredCallback`
 --> /var/home/lhjok/.cargo/git/checkouts/leptonic-09c2066a1d051b46/a4eb2d8/leptonic/src/select.rs:4:18
  |
4 |     leptos_dom::{Callable, Callback, StoredCallback},
  |                  ^^^^^^^^  ^^^^^^^^  ^^^^^^^^^^^^^^ no `StoredCallback` in the root
  |                  |         |
  |                  |         no `Callback` in the root
  |                  no `Callable` in the root
  |
  = help: consider importing one of these items instead:
          crate::Callable
          leptos::Callable
  = help: consider importing one of these items instead:
          crate::Callback
          crate::Out::Callback
          leptos::Callback
  = help: consider importing one of these items instead:
          crate::CopyableOut::StoredCallback
          crate::Out::StoredCallback
          crate::StoredCallback

error[E0432]: unresolved imports `leptos::leptos_dom::Callable`, `leptos::leptos_dom::Callback`, `leptos::leptos_dom::StoredCallback`
 --> /var/home/lhjok/.cargo/git/checkouts/leptonic-09c2066a1d051b46/a4eb2d8/leptonic/src/slider.rs:4:18
  |
4 |     leptos_dom::{Callable, Callback, StoredCallback},
  |                  ^^^^^^^^  ^^^^^^^^  ^^^^^^^^^^^^^^ no `StoredCallback` in the root
  |                  |         |
  |                  |         no `Callback` in the root
  |                  no `Callable` in the root
  |
  = help: consider importing one of these items instead:
          crate::Callable
          leptos::Callable
  = help: consider importing one of these items instead:
          crate::Callback
          crate::Out::Callback
          leptos::Callback
  = help: consider importing one of these items instead:
          crate::CopyableOut::StoredCallback
          crate::Out::StoredCallback
          crate::StoredCallback

error[E0432]: unresolved imports `leptos::leptos_dom::Callable`, `leptos::leptos_dom::Callback`
 --> /var/home/lhjok/.cargo/git/checkouts/leptonic-09c2066a1d051b46/a4eb2d8/leptonic/src/tab.rs:3:26
  |
3 | use leptos::leptos_dom::{Callable, Callback};
  |                          ^^^^^^^^  ^^^^^^^^ no `Callback` in the root
  |                          |
  |                          no `Callable` in the root
  |
  = help: consider importing one of these items instead:
          crate::Callable
          leptos::Callable
  = help: consider importing one of these items instead:
          crate::Callback
          crate::Out::Callback
          leptos::Callback

error[E0432]: unresolved import `leptos::leptos_dom::Callback`
 --> /var/home/lhjok/.cargo/git/checkouts/leptonic-09c2066a1d051b46/a4eb2d8/leptonic/src/theme.rs:1:14
  |
1 | use leptos::{leptos_dom::Callback, *};
  |              ^^^^^^^^^^^^^^^^^^^^ no `Callback` in the root
  |
  = help: consider importing one of these items instead:
          crate::Callback
          crate::Out::Callback
          leptos::Callback

error[E0405]: cannot find trait `Callable` in crate `leptos::leptos_dom`
  --> /var/home/lhjok/.cargo/git/checkouts/leptonic-09c2066a1d051b46/a4eb2d8/leptonic/src/callback.rs:36:38
   |
36 | impl<T: 'static> leptos::leptos_dom::Callable<T, ()> for Consumer<T> {
   |                                      ^^^^^^^^ not found in `leptos::leptos_dom`
   |
help: consider importing one of these items
   |
1  + use crate::Callable;
   |
1  + use leptos::Callable;
   |
help: if you import `Callable`, refer to it directly
   |
36 - impl<T: 'static> leptos::leptos_dom::Callable<T, ()> for Consumer<T> {
36 + impl<T: 'static> Callable<T, ()> for Consumer<T> {
   |

error[E0405]: cannot find trait `Callable` in crate `leptos::leptos_dom`
  --> /var/home/lhjok/.cargo/git/checkouts/leptonic-09c2066a1d051b46/a4eb2d8/leptonic/src/callback.rs:91:38
   |
91 | impl<R: 'static> leptos::leptos_dom::Callable<(), R> for Producer<R> {
   |                                      ^^^^^^^^ not found in `leptos::leptos_dom`
   |
help: consider importing one of these items
   |
1  + use crate::Callable;
   |
1  + use leptos::Callable;
   |
help: if you import `Callable`, refer to it directly
   |
91 - impl<R: 'static> leptos::leptos_dom::Callable<(), R> for Producer<R> {
91 + impl<R: 'static> Callable<(), R> for Producer<R> {
   |

Some errors have detailed explanations: E0405, E0432.
For more information about an error, try `rustc --explain E0405`.
error: could not compile `leptonic` (lib) due to 13 previous errors
2023-09-30T12:19:03.776803Z ERROR ❌ error
error from HTML pipeline

Model close on ESC

Is it part of the the toolkit to close the modal on ESC like you use the cancel or on enter for the continue?

I updated to the latest version and leptos also upgraded to 0.5.0-rc2, but there was an error in compilation.

I updated to the latest version and leptos also upgraded to 0.5.0-rc2, but there was an error in compilation.

error[E0432]: unresolved imports `leptos_use::use_element_size`, `leptos_use::UseElementSizeReturn`
 --> /var/home/lhjok/.cargo/git/checkouts/leptonic-09c2066a1d051b46/9a3e7be/leptonic/src/progress_bar.rs:2:18
  |
2 | use leptos_use::{use_element_size, UseElementSizeReturn};
  |                  ^^^^^^^^^^^^^^^^  ^^^^^^^^^^^^^^^^^^^^ no `UseElementSizeReturn` in the root
  |                  |
  |                  no `use_element_size` in the root
  |                  help: a similar name exists in the module: `use_element_hover`

error[E0432]: unresolved imports `leptos_use::use_element_size`, `leptos_use::UseElementSizeReturn`
 --> /var/home/lhjok/.cargo/git/checkouts/leptonic-09c2066a1d051b46/9a3e7be/leptonic/src/skeleton.rs:2:18
  |
2 | use leptos_use::{use_element_size, UseElementSizeReturn};
  |                  ^^^^^^^^^^^^^^^^  ^^^^^^^^^^^^^^^^^^^^ no `UseElementSizeReturn` in the root
  |                  |
  |                  no `use_element_size` in the root
  |                  help: a similar name exists in the module: `use_element_hover`

Modals should have position: fixed

Hello,

Consider the following css for Modal's as the component works well if the page is not scrollable, but will otherwise not work as intended

position: fixed

android icon is so large

I migrate book example to android using tauri,
the icon is so big as pictures. what's the possible reason
thanks!
image

Tailwind template

Add a template that demonstrates how to build own components using hooks and style them using Tailwind (possibly using TW v4?).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.