feat: introduce new props for more customization.

.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

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", ]

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.
 

README.md

@@ -12,24 +12,27 @@
 [![Open SASS Discord](https://dcbadge.limes.pink/api/server/b5JbvHW5nv)](https://discord.gg/b5JbvHW5nv)
 
 <!-- absolute url for docs.rs cause assets is excluded from crate -->
+
 ![logo](https://raw.githubusercontent.com/opensass/input-rs/refs/heads/main/assets/logo-new.png)
 
 </div>
 
 ## 🎬 Demo
+
 <!-- absolute urls for docs.rs cause assets is excluded from crate -->
-| 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
 
 <!-- absolute url for docs.rs cause YEW.md is not included in crate -->
+
 Refer to [our guide](https://github.com/opensass/input-rs/blob/main/YEW.md) to integrate this component into your Yew app.
 
 ## 🧬 Dioxus Usage
 
 <!-- absolute url for docs.rs cause DIOXUS.md is not included in crate -->
+
 Refer to [our guide](https://github.com/opensass/input-rs/blob/main/DIOXUS.md) to integrate this component into your Dioxus app.
 
 ## 🌱 Leptos Usage
 
 <!-- absolute url for docs.rs cause LEPTOS.md is not included in crate -->
+
 Refer to [our guide](https://github.com/opensass/input-rs/blob/main/LEPTOS.md) to integrate this component into your Leptos app.
 
 ## 🤝 Contributions

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]
 

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

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"

examples/leptos/index.html

@@ -1,9 +1,15 @@
 <!doctype html>
 <html>
   <head>
-    <link href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
-    <script src="https://kit.fontawesome.com/8f223ead6e.js" crossorigin="anonymous"></script>
-    <link data-trunk rel="rust"/>
+    <link
+      href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css"
+      rel="stylesheet"
+    />
+    <script
+      src="https://kit.fontawesome.com/8f223ead6e.js"
+      crossorigin="anonymous"
+    ></script>
+    <link data-trunk rel="rust" />
     <base data-trunk-public-url />
   </head>
-</html>
+</html>

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 {

examples/yew/Cargo.toml

@@ -2,21 +2,21 @@
 name = "yew-input-rs"
 version = "0.1.0"
 authors = ["Mahmoud Harmouch <oss@wiseai.dev>"]
-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

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) |

examples/yew/index.html

@@ -1,14 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />
-    <link data-trunk rel="tailwind-css" href="src/tailwind.css"/>
+    <link data-trunk rel="tailwind-css" href="src/tailwind.css" />
     <script
       src="https://kit.fontawesome.com/8f223ead6e.js"
       crossorigin="anonymous"
       defer
     ></script>
-    <link data-trunk rel="rust"/>
+    <link data-trunk rel="rust" />
     <title>Yew Tailwind Forms</title>
     <base data-trunk-public-url />
   </head>

examples/yew/postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

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 {

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;