From 8f50593bd458fdfa5db19203f8f1bb11077357ce Mon Sep 17 00:00:00 2001 From: wiseaidev Date: Sun, 4 Oct 2026 06:46:34 +0300 Subject: [PATCH] feat: introduce new props for more customization. --- .github/workflows/rust.yml | 15 +- Cargo.toml | 14 +- DIOXUS.md | 2 +- README.md | 20 +- examples/dioxus/Cargo.toml | 6 +- examples/dioxus/README.md | 2 +- examples/leptos/Cargo.toml | 6 +- examples/leptos/index.html | 14 +- examples/leptos/src/main.rs | 2 +- examples/yew/Cargo.toml | 18 +- examples/yew/README.md | 22 +- examples/yew/index.html | 6 +- examples/yew/postcss.config.js | 2 +- examples/yew/src/app.rs | 2 +- .../yew/src/components/contact_form_one.rs | 4 +- examples/yew/src/components/login_form_one.rs | 188 +++++++++--------- .../yew/src/components/login_form_three.rs | 2 +- examples/yew/src/components/login_form_two.rs | 2 +- .../yew/src/components/multi_step_form_one.rs | 22 +- examples/yew/src/tailwind.css | 4 +- examples/yew/tailwind.config.js | 8 +- src/dioxus.rs | 67 ++++++- src/leptos.rs | 62 ++++++ src/yew.rs | 55 ++++- 24 files changed, 366 insertions(+), 179 deletions(-) diff --git a/.github/workflows/rust.yml b/.github/workflows/rust.yml index 35adeb9..7354a96 100644 --- a/.github/workflows/rust.yml +++ b/.github/workflows/rust.yml @@ -2,21 +2,20 @@ name: Rust on: push: - branches: [ "main" ] + branches: ["main"] pull_request: - branches: [ "main" ] + branches: ["main"] env: CARGO_TERM_COLOR: always jobs: build: - runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 - - name: Build - run: cargo build --verbose - - name: Run tests - run: cargo test --all-features --verbose + - uses: actions/checkout@v3 + - name: Build + run: cargo build --verbose + - name: Run tests + run: cargo test --all-features --verbose diff --git a/Cargo.toml b/Cargo.toml index 4c8eda4..e72d99b 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -15,15 +15,15 @@ exclude = ["assets", "examples"] # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html [dependencies] -web-sys = { version = "0.3", default-features = false } -yew = { version = "0.22.0", default-features = false, optional = true } -dioxus = { version = "0.6.3", optional = true } -leptos = { version = "0.7.7", optional = true } +web-sys = { version = "0.3.106", default-features = false } +yew = { version = "0.23.0", default-features = false, optional = true } +dioxus = { version = "0.7.10", optional = true } +leptos = { version = "0.8.21", optional = true } [dev-dependencies] -bump2version = "0.1.4" -regex = "1.10.2" -serde = { version = "1.0.193", features = ["derive"] } +bump2version = "0.2.2" +regex = "1.13.1" +serde = { version = "1.0.229", features = ["derive"] } [features] yew = ["dep:yew", ] diff --git a/DIOXUS.md b/DIOXUS.md index b0d255c..28d73a6 100644 --- a/DIOXUS.md +++ b/DIOXUS.md @@ -2,7 +2,7 @@ Adding Input RS to your project is simple: -1. Make sure your project is set up with **Dioxus**. Refer to the [Dioxus Getting Started Guide](https://dioxuslabs.com/learn/0.6/getting_started) for setup instructions. +1. Make sure your project is set up with **Dioxus**. Refer to the [Dioxus Getting Started Guide](https://dioxuslabs.com/learn/0.7/getting_started) for setup instructions. 1. Add the Input component to your dependencies by including it in your `Cargo.toml` file. diff --git a/README.md b/README.md index 7799825..919dbd4 100644 --- a/README.md +++ b/README.md @@ -12,24 +12,27 @@ [![Open SASS Discord](https://dcbadge.limes.pink/api/server/b5JbvHW5nv)](https://discord.gg/b5JbvHW5nv) + ![logo](https://raw.githubusercontent.com/opensass/input-rs/refs/heads/main/assets/logo-new.png) ## 🎬 Demo + -| Input Type | Demo | -| ---------- | -------------------------------------------- | + +| Input Type | Demo | +| ---------- | -------------------------------------------------------------------------------------------------------------- | | Text | ![text-demo](https://raw.githubusercontent.com/opensass/input-rs/refs/heads/main/assets/text-demo.gif) | | Password | ![pass-demo](https://raw.githubusercontent.com/opensass/input-rs/refs/heads/main/assets/pass-demo.gif) | | Textarea | ![textarea-demo](https://raw.githubusercontent.com/opensass/input-rs/refs/heads/main/assets/textarea-demo.gif) | | Telephone | ![tel-demo](https://raw.githubusercontent.com/opensass/input-rs/refs/heads/main/assets/tel-demo.gif) | -| Framework | Live Demo | -| --- | --- | -| Yew | [![Netlify Status](https://api.netlify.com/api/v1/badges/45d208ab-8b1b-4608-bcb1-f7d3d049cac5/deploy-status)](https://input-rs.netlify.app) | -| Dioxus | [![Netlify Status](https://api.netlify.com/api/v1/badges/b94e6586-192b-4db8-bc09-b287366c9731/deploy-status)](https://input-rs-dioxus.netlify.app) | -| Leptos | [![Netlify Status](https://api.netlify.com/api/v1/badges/7b6175fa-892b-4a05-9fd5-b425b399e48f/deploy-status)](https://input-rs-leptos.netlify.app) | +| Framework | Live Demo | +| --------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | +| Yew | [![Netlify Status](https://api.netlify.com/api/v1/badges/45d208ab-8b1b-4608-bcb1-f7d3d049cac5/deploy-status)](https://input-rs.netlify.app) | +| Dioxus | [![Netlify Status](https://api.netlify.com/api/v1/badges/b94e6586-192b-4db8-bc09-b287366c9731/deploy-status)](https://input-rs-dioxus.netlify.app) | +| Leptos | [![Netlify Status](https://api.netlify.com/api/v1/badges/7b6175fa-892b-4a05-9fd5-b425b399e48f/deploy-status)](https://input-rs-leptos.netlify.app) | ### 📜 Intro @@ -48,16 +51,19 @@ The following features make Input RS a must-have for your WASM-based projects: ## Y Yew Usage + Refer to [our guide](https://github.com/opensass/input-rs/blob/main/YEW.md) to integrate this component into your Yew app. ## 🧬 Dioxus Usage + Refer to [our guide](https://github.com/opensass/input-rs/blob/main/DIOXUS.md) to integrate this component into your Dioxus app. ## 🌱 Leptos Usage + Refer to [our guide](https://github.com/opensass/input-rs/blob/main/LEPTOS.md) to integrate this component into your Leptos app. ## 🤝 Contributions diff --git a/examples/dioxus/Cargo.toml b/examples/dioxus/Cargo.toml index c19b518..f7b6f59 100755 --- a/examples/dioxus/Cargo.toml +++ b/examples/dioxus/Cargo.toml @@ -4,10 +4,10 @@ version = "0.1.0" edition = "2021" [dependencies] -dioxus = { version = "0.6.3", features = ["web"] } +dioxus = { version = "0.7.10", features = ["web"] } input-rs = { path = "../../", features = ["dio"] } -dioxus-logger = "0.6.2" -regex = "1.11.1" +dioxus-logger = "0.7.10" +regex = "1.13.1" [profile] diff --git a/examples/dioxus/README.md b/examples/dioxus/README.md index 842628e..c817f43 100644 --- a/examples/dioxus/README.md +++ b/examples/dioxus/README.md @@ -40,7 +40,7 @@ sudo apt install build-essential pkg-config libudev-dev ``` -1. Install [`Dioxus CLI`](https://dioxuslabs.com/learn/0.5/getting_started): +1. Install [`Dioxus CLI`](https://dioxuslabs.com/learn/0.7/getting_started): ```sh cargo install dioxus-cli diff --git a/examples/leptos/Cargo.toml b/examples/leptos/Cargo.toml index 4b04edb..3329e7e 100755 --- a/examples/leptos/Cargo.toml +++ b/examples/leptos/Cargo.toml @@ -6,7 +6,7 @@ edition = "2021" [dependencies] console_error_panic_hook = "0.1.7" input-rs = { path = "../../", features = ["lep"] } -leptos = { version = "0.7.2", features = ["csr"] } -regex = "1.11.1" -serde = "1.0.215" +leptos = { version = "0.8.21", features = ["csr"] } +regex = "1.13.1" +serde = "1.0.229" wasm-logger = "0.2.0" diff --git a/examples/leptos/index.html b/examples/leptos/index.html index 5b1dd65..eef6567 100755 --- a/examples/leptos/index.html +++ b/examples/leptos/index.html @@ -1,9 +1,15 @@ - - - + + + - \ No newline at end of file + diff --git a/examples/leptos/src/main.rs b/examples/leptos/src/main.rs index 7ecb1a9..ed15792 100755 --- a/examples/leptos/src/main.rs +++ b/examples/leptos/src/main.rs @@ -1,8 +1,8 @@ use input_rs::leptos::Input; +use leptos::logging::log; use leptos::{prelude::*, task::spawn_local}; use regex::Regex; use serde::{Deserialize, Serialize}; -use leptos::logging::log; #[derive(Debug, Default, Clone, Serialize, Deserialize)] struct LoginUserSchema { diff --git a/examples/yew/Cargo.toml b/examples/yew/Cargo.toml index fe8810d..8f31ddd 100644 --- a/examples/yew/Cargo.toml +++ b/examples/yew/Cargo.toml @@ -2,21 +2,21 @@ name = "yew-input-rs" version = "0.1.0" authors = ["Mahmoud Harmouch "] -edition = "2021" +edition = "2024" # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html [dependencies] input-rs = { path = "../..", features = ["yew"] } -regex = { version = "1.9.1", default-features = false } +regex = { version = "1.13.1", default-features = false } reqwasm = { version = "0.5.0", default-features = false } -serde = { version = "1.0.178", default-features = false } -serde_json = { version = "1.0.104", default-features = false } -wasm-bindgen = { version = "0.2.87", default-features = false } -wasm-bindgen-futures = { version = "0.4.37", default-features = false } -web-sys = { version = "0.3.64", default-features = false } -yew = { version = "0.22.0", features = ["csr"], default-features = false } -yew-router = { version = "0.19.0", default-features = false } +serde = { version = "1.0.229", default-features = false } +serde_json = { version = "1.0.151", default-features = false } +wasm-bindgen = { version = "0.2.129", default-features = false } +wasm-bindgen-futures = { version = "0.4.79", default-features = false } +web-sys = { version = "0.3.106", default-features = false } +yew = { version = "0.23.0", features = ["csr"], default-features = false } +yew-router = { version = "0.20.0", default-features = false } [profile.release] codegen-units = 1 diff --git a/examples/yew/README.md b/examples/yew/README.md index fd753c7..8d00046 100644 --- a/examples/yew/README.md +++ b/examples/yew/README.md @@ -86,20 +86,20 @@ This section lists components implemented using the [Tailwind CSS](https://tailw ### 🔐 Login Forms -| ID | Preview | Demo | Localhost | -|---|---|---|---| -| 1 | ![Component 1](./assets/form-one.png) | [![Netlify Status](https://api.netlify.com/api/v1/badges/68d1469e-05ee-4acd-9368-b67d9e53bc2e/deploy-status)](https://tailwind-login-form-1.netlify.app/) | [Localhost](http://localhost:3000/login/1) | -| 2 | ![Component 2](./assets/form-two.png) | [![Netlify Status](https://api.netlify.com/api/v1/badges/68d1469e-05ee-4acd-9368-b67d9e53bc2e/deploy-status)](https://tailwind-login-form-2.netlify.app/) | [Localhost](http://localhost:3000/login/2) | -| 3 | ![Component 3](./assets/form-three.png) | [![Netlify Status](https://api.netlify.com/api/v1/badges/68d1469e-05ee-4acd-9368-b67d9e53bc2e/deploy-status)](https://tailwind-login-form-3.netlify.app/) | [Localhost](http://localhost:3000/login/3) | +| ID | Preview | Demo | Localhost | +| --- | --------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | +| 1 | ![Component 1](./assets/form-one.png) | [![Netlify Status](https://api.netlify.com/api/v1/badges/68d1469e-05ee-4acd-9368-b67d9e53bc2e/deploy-status)](https://tailwind-login-form-1.netlify.app/) | [Localhost](http://localhost:3000/login/1) | +| 2 | ![Component 2](./assets/form-two.png) | [![Netlify Status](https://api.netlify.com/api/v1/badges/68d1469e-05ee-4acd-9368-b67d9e53bc2e/deploy-status)](https://tailwind-login-form-2.netlify.app/) | [Localhost](http://localhost:3000/login/2) | +| 3 | ![Component 3](./assets/form-three.png) | [![Netlify Status](https://api.netlify.com/api/v1/badges/68d1469e-05ee-4acd-9368-b67d9e53bc2e/deploy-status)](https://tailwind-login-form-3.netlify.app/) | [Localhost](http://localhost:3000/login/3) | ### 📬 Contact Forms -| ID | Preview | Demo | Localhost | -|---|---|---|---| -| 1 | ![Component 1](./assets/contact-form-one.png) | [![Netlify Status](https://api.netlify.com/api/v1/badges/68d1469e-05ee-4acd-9368-b67d9e53bc2e/deploy-status)](https://tailwind-contact-form-1.netlify.app/) | [Localhost](http://localhost:3000/contact/1) | +| ID | Preview | Demo | Localhost | +| --- | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | +| 1 | ![Component 1](./assets/contact-form-one.png) | [![Netlify Status](https://api.netlify.com/api/v1/badges/68d1469e-05ee-4acd-9368-b67d9e53bc2e/deploy-status)](https://tailwind-contact-form-1.netlify.app/) | [Localhost](http://localhost:3000/contact/1) | ### 🔢 Multi-Steps Forms -| ID | Preview | Demo | Localhost | -|---|---|---|---| -| 1 | ![Component 1](./assets/multi-step-form-one.png) | [![Netlify Status](https://api.netlify.com/api/v1/badges/68d1469e-05ee-4acd-9368-b67d9e53bc2e/deploy-status)](https://tailwind-multi-step-form-1.netlify.app/) | [Localhost](http://localhost:3000/multi-step/1) | +| ID | Preview | Demo | Localhost | +| --- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- | +| 1 | ![Component 1](./assets/multi-step-form-one.png) | [![Netlify Status](https://api.netlify.com/api/v1/badges/68d1469e-05ee-4acd-9368-b67d9e53bc2e/deploy-status)](https://tailwind-multi-step-form-1.netlify.app/) | [Localhost](http://localhost:3000/multi-step/1) | diff --git a/examples/yew/index.html b/examples/yew/index.html index bd63e56..35cc8d0 100644 --- a/examples/yew/index.html +++ b/examples/yew/index.html @@ -1,14 +1,14 @@ - + - + - + Yew Tailwind Forms diff --git a/examples/yew/postcss.config.js b/examples/yew/postcss.config.js index 33ad091..12a703d 100644 --- a/examples/yew/postcss.config.js +++ b/examples/yew/postcss.config.js @@ -3,4 +3,4 @@ module.exports = { tailwindcss: {}, autoprefixer: {}, }, -} +}; diff --git a/examples/yew/src/app.rs b/examples/yew/src/app.rs index 0fc22ea..925ce5d 100644 --- a/examples/yew/src/app.rs +++ b/examples/yew/src/app.rs @@ -1,7 +1,7 @@ use yew::prelude::*; use yew_router::prelude::*; -use crate::router::{switch, Route}; +use crate::router::{Route, switch}; #[function_component(App)] pub fn app() -> Html { diff --git a/examples/yew/src/components/contact_form_one.rs b/examples/yew/src/components/contact_form_one.rs index de98ee3..60550a4 100644 --- a/examples/yew/src/components/contact_form_one.rs +++ b/examples/yew/src/components/contact_form_one.rs @@ -1,8 +1,8 @@ -use crate::components::common::{validate_email, validate_input, LoginUserSchema}; +use crate::components::common::{LoginUserSchema, validate_email, validate_input}; use input_rs::yew::Input; use serde::{Deserialize, Serialize}; use wasm_bindgen_futures::spawn_local; -use web_sys::{console, HtmlInputElement, Window}; +use web_sys::{HtmlInputElement, Window, console}; use yew::prelude::*; use crate::api::auth::login_user; diff --git a/examples/yew/src/components/login_form_one.rs b/examples/yew/src/components/login_form_one.rs index ef69ccf..33c66c8 100644 --- a/examples/yew/src/components/login_form_one.rs +++ b/examples/yew/src/components/login_form_one.rs @@ -1,8 +1,8 @@ -use crate::components::common::{validate_email, validate_input, LoginUserSchema}; +use crate::components::common::{LoginUserSchema, validate_email, validate_input}; use input_rs::yew::Input; use regex::Regex; use wasm_bindgen_futures::spawn_local; -use web_sys::{console, HtmlInputElement, Window}; +use web_sys::{HtmlInputElement, Window, console}; use yew::prelude::*; use crate::api::auth::login_user; @@ -59,97 +59,101 @@ pub fn login_form_one() -> Html { html! {
-
-
- if !error.is_empty() { -
{error}
- } - {"Login"} - - -
- -
-
- {"Not a member?"} - {"Sign Up Now"} -
-
-
- {"Or Sign In With"} -
-
-
-
-
- - - - -
-
-
-
+
+
+ if !error.is_empty() { +
+ { error } +
+ } + { "Login" } + + +
+ +
+
+ { "Not a member?" } + { "Sign Up Now" } +
+
+
+ { "Or Sign In With" } +
+
+
+
+
+ + + + +
+
+ +
} } diff --git a/examples/yew/src/components/login_form_three.rs b/examples/yew/src/components/login_form_three.rs index cc510c4..7c25ecf 100644 --- a/examples/yew/src/components/login_form_three.rs +++ b/examples/yew/src/components/login_form_three.rs @@ -1,7 +1,7 @@ use regex::Regex; use serde::{Deserialize, Serialize}; use wasm_bindgen_futures::spawn_local; -use web_sys::{console, HtmlInputElement, Window}; +use web_sys::{HtmlInputElement, Window, console}; use yew::prelude::*; use crate::api::auth::login_user; diff --git a/examples/yew/src/components/login_form_two.rs b/examples/yew/src/components/login_form_two.rs index d2edb9e..9ee7eb8 100644 --- a/examples/yew/src/components/login_form_two.rs +++ b/examples/yew/src/components/login_form_two.rs @@ -1,7 +1,7 @@ use regex::Regex; use serde::{Deserialize, Serialize}; use wasm_bindgen_futures::spawn_local; -use web_sys::{console, HtmlInputElement, Window}; +use web_sys::{HtmlInputElement, Window, console}; use yew::prelude::*; use crate::api::auth::login_user; diff --git a/examples/yew/src/components/multi_step_form_one.rs b/examples/yew/src/components/multi_step_form_one.rs index 7af7e5b..f3d8ddf 100644 --- a/examples/yew/src/components/multi_step_form_one.rs +++ b/examples/yew/src/components/multi_step_form_one.rs @@ -380,21 +380,21 @@ pub fn multi_step_form_one() -> Html { validate_function={validate_input} />