├── .bumpversion.toml
├── .github
    ├── dependabot.yml
    └── workflows
    │   └── rust.yml
├── .gitignore
├── Cargo.toml
├── DIOXUS.md
├── LEPTOS.md
├── LICENSE
├── README.md
├── YEW.md
├── assets
    ├── favicon.png
    ├── logo-new.png
    ├── pass-demo.gif
    ├── tel-demo.gif
    ├── text-demo.gif
    └── textarea-demo.gif
├── examples
    ├── dioxus
    │   ├── Cargo.toml
    │   ├── Dioxus.toml
    │   ├── README.md
    │   └── src
    │   │   └── main.rs
    ├── leptos
    │   ├── Cargo.toml
    │   ├── README.md
    │   ├── index.html
    │   └── src
    │   │   └── main.rs
    └── yew
    │   ├── .gitignore
    │   ├── Cargo.toml
    │   ├── LICENSE
    │   ├── README.md
    │   ├── Trunk.toml
    │   ├── _redirects
    │   ├── assets
    │       ├── contact-form-one.png
    │       ├── form-one.png
    │       ├── form-three.png
    │       ├── form-two.png
    │       └── multi-step-form-one.png
    │   ├── index.html
    │   ├── postcss.config.js
    │   ├── rustfmt.toml
    │   ├── src
    │       ├── api.rs
    │       ├── api
    │       │   └── auth.rs
    │       ├── app.rs
    │       ├── components.rs
    │       ├── components
    │       │   ├── common.rs
    │       │   ├── contact_form_one.rs
    │       │   ├── login_form_one.rs
    │       │   ├── login_form_three.rs
    │       │   ├── login_form_two.rs
    │       │   └── multi_step_form_one.rs
    │       ├── main.rs
    │       ├── pages.rs
    │       ├── pages
    │       │   ├── contact_page_one.rs
    │       │   ├── error.rs
    │       │   ├── login_page_one.rs
    │       │   ├── login_page_three.rs
    │       │   ├── login_page_two.rs
    │       │   └── multi_step_page_one.rs
    │       ├── router.rs
    │       └── tailwind.css
    │   └── tailwind.config.js
└── src
    ├── countries.rs
    ├── dioxus.rs
    ├── leptos.rs
    ├── lib.rs
    └── yew.rs


/.bumpversion.toml:
--------------------------------------------------------------------------------
1 | [bumpversion]
2 | current_version = 0.2.5
3 | 
4 | [bumpversion:file:Cargo.toml]
5 | search = version = "{current_version}"
6 | replace = version = "{new_version}"
7 | 


--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
 1 | # To get started with Dependabot version updates, you'll need to specify which
 2 | # package ecosystems to update and where the package manifests are located.
 3 | # Please see the documentation for all configuration options:
 4 | # https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
 5 | 
 6 | version: 2
 7 | updates:
 8 |   - package-ecosystem: "cargo" # See documentation for possible values
 9 |     directory: "/" # Location of package manifests
10 |     schedule:
11 |       interval: "weekly"
12 | 


--------------------------------------------------------------------------------
/.github/workflows/rust.yml:
--------------------------------------------------------------------------------
 1 | name: Rust
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: [ "main" ]
 6 |   pull_request:
 7 |     branches: [ "main" ]
 8 | 
 9 | env:
10 |   CARGO_TERM_COLOR: always
11 | 
12 | jobs:
13 |   build:
14 | 
15 |     runs-on: ubuntu-latest
16 | 
17 |     steps:
18 |     - uses: actions/checkout@v3
19 |     - name: Build
20 |       run: cargo build --verbose
21 |     - name: Run tests
22 |       run: cargo test --all-features --verbose
23 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Generated by Cargo
 2 | # will have compiled files and executables
 3 | **/target/**
 4 | 
 5 | # Remove Cargo.lock from gitignore if creating an executable, leave it for libraries
 6 | # More information here https://doc.rust-lang.org/cargo/guide/cargo-toml-vs-cargo-lock.html
 7 | Cargo.lock
 8 | 
 9 | # These are backup files generated by rustfmt
10 | **/*.rs.bk
11 | **/dist/*
12 | 


--------------------------------------------------------------------------------
/Cargo.toml:
--------------------------------------------------------------------------------
 1 | [package]
 2 | name = "input-rs"
 3 | version = "0.2.5"
 4 | edition = "2021"
 5 | rust-version = "1.82"
 6 | description = "🔤 A highly customizable input component for WASM frameworks like Yew, Dioxus, and Leptos."
 7 | license = "Apache-2.0"
 8 | keywords = ["input", "yew", "dioxus", "leptos", "input-rs"]
 9 | categories = ["web-programming", "science"]
10 | repository = "https://github.com/opensass/input-rs"
11 | documentation = "https://docs.rs/input-rs/"
12 | authors = ["Mahmoud Harmouch <oss@wiseai.dev>"]
13 | exclude = ["assets", "examples"]
14 | 
15 | # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
16 | 
17 | [dependencies]
18 | web-sys = { version = "0.3", default-features = false }
19 | yew = { version = "0.21.0", default-features = false, optional = true }
20 | dioxus = { version = "0.6.3", optional = true }
21 | leptos = { version = "0.7.7", optional = true }
22 | 
23 | [dev-dependencies]
24 | bump2version = "0.1.4"
25 | regex = "1.10.2"
26 | serde = { version = "1.0.193", features = ["derive"] }
27 | 
28 | [features]
29 | yew = ["dep:yew", ]
30 | dio = ["dioxus", ]
31 | lep = ["leptos", ]
32 | 
33 | [profile.release]
34 | opt-level = "z"
35 | debug = false
36 | lto = "thin"
37 | codegen-units = 1
38 | panic = "abort"
39 | strip = "symbols"
40 | incremental = false
41 | 
42 | [package.metadata.docs.rs]
43 | all-features = true
44 | rustdoc-args = ["--cfg", "docsrs"]
45 | 
46 | [badges]
47 | maintenance = { status = "actively-developed" }
48 | 


--------------------------------------------------------------------------------
/DIOXUS.md:
--------------------------------------------------------------------------------
  1 | # 🧬 Input RS Dioxus Usage
  2 | 
  3 | Adding Input RS to your project is simple:
  4 | 
  5 | 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.
  6 | 
  7 | 1. Add the Input component to your dependencies by including it in your `Cargo.toml` file.
  8 | 
  9 |    ```sh
 10 |    cargo add input-rs --features=dio
 11 |    ```
 12 | 
 13 | 1. Import the `Input` components into your Dioxus component and start using it in your app.
 14 | 
 15 | ## 🛠️ Usage
 16 | 
 17 | Incorporating the Input component into your application is easy. Follow these steps:
 18 | 
 19 | 1. Import `Input` into your component:
 20 | 
 21 |    ```rust
 22 |    use dioxus::prelude::*;
 23 |    use input_rs::dioxus::Input;
 24 |    ```
 25 | 
 26 | 1. Use the `Input` component in your application:
 27 | 
 28 |    ```rust
 29 |    use dioxus::prelude::*;
 30 |    use input_rs::dioxus::Input;
 31 | 
 32 |    #[component]
 33 |    pub fn App() -> Element {
 34 |        let input_value = use_signal(|| String::new());
 35 |        let is_valid = use_signal(|| true);
 36 | 
 37 |        fn validate_input(value: String) -> bool {
 38 |            !value.trim().is_empty()
 39 |        }
 40 | 
 41 |        rsx! {
 42 |            div {
 43 |                class: "app-container",
 44 |                h1 { "Custom Input Example" }
 45 |                Input {
 46 |                    r#type: "text",
 47 |                    label: "Enter your name:",
 48 |                    id: "name-input",
 49 |                    handle: input_value.clone(),
 50 |                    valid_handle: is_valid.clone(),
 51 |                    validate_function: validate_input,
 52 |                    placeholder: "Type here...",
 53 |                    class: "custom-input",
 54 |                    label_class: "input-label",
 55 |                    field_class: "input-field",
 56 |                    error_message: "This field cannot be empty",
 57 |                    error_class: "input-error",
 58 |                }
 59 |                if !is_valid() {
 60 |                    p { class: "error-message", "Please correct the input." }
 61 |                }
 62 |            }
 63 |        }
 64 |    }
 65 |    ```
 66 | 
 67 | ## 🔧 Props
 68 | 
 69 | ### Main Props
 70 | 
 71 | | Property            | Type                 | Description                                                                          | Default  |
 72 | | ------------------- | -------------------- | ------------------------------------------------------------------------------------ | -------- |
 73 | | `r#type`            | `&'static str`       | Type of the input (e.g., `text`, `password`, `email`, etc.).                         | `"text"` |
 74 | | `label`             | `&'static str`       | Label text for the input field.                                                      | `""`     |
 75 | | `id`                | `&'static str`       | Unique ID for the input element.                                                     | `""`     |
 76 | | `placeholder`       | `&'static str`       | Placeholder text for the input.                                                      | `""`     |
 77 | | `handle`            | `Signal<String>`     | Signal handle for the input value.                                                   | None     |
 78 | | `valid_handle`      | `Signal<bool>`       | Signal handle for the validity of the input value.                                   | None     |
 79 | | `validate_function` | `fn(String) -> bool` | Validation function for the input value. Returns `true` if valid, `false` otherwise. | None     |
 80 | | `required`          | `bool`               | Indicates whether the input is required.                                             | `false`  |
 81 | | `error_message`     | `&'static str`       | Error message to display if the input is invalid.                                    | `""`     |
 82 | 
 83 | ### Styling Props
 84 | 
 85 | ```sh
 86 | +-----------------------------+  <-- `class`
 87 | |                             |
 88 | |  +-----------------------+  |  <-- `label_class`
 89 | |  |       Label           |  |
 90 | |  +-----------------------+  |
 91 | |                             |
 92 | |  +-----------------------+  |  <-- `field_class`
 93 | |  | +-------+  +--------+ |  |
 94 | |  | | Input |  |  Icon  | |  |  <-- `input_class` and `icon_class`
 95 | |  | +-------+  +--------+ |  |
 96 | |  +-----------------------+  |
 97 | |                             |
 98 | |  +-----------------------+  |  <-- `error_class` (if invalid)
 99 | |  |       Error Message   |  |
100 | |  +-----------------------+  |
101 | +-----------------------------+
102 | ```
103 | 
104 | | Property      | Type           | Description                                | Default |
105 | | ------------- | -------------- | ------------------------------------------ | ------- |
106 | | `class`       | `&'static str` | CSS class for the input container.         | `""`    |
107 | | `label_class` | `&'static str` | CSS class for the label element.           | `""`    |
108 | | `input_class` | `&'static str` | CSS class applied to the input element.    | `""`    |
109 | | `field_class` | `&'static str` | CSS class for the input field container.   | `""`    |
110 | | `error_class` | `&'static str` | CSS class for the error message container. | `""`    |
111 | 
112 | ### Accessibility Props
113 | 
114 | | Property           | Type           | Description                                     | Default  |
115 | | ------------------ | -------------- | ----------------------------------------------- | -------- |
116 | | `aria_label`       | `&'static str` | Label for accessibility.                        | `""`     |
117 | | `aria_required`    | `&'static str` | Accessibility hint for required status.         | `"true"` |
118 | | `aria_invalid`     | `&'static str` | Accessibility hint for invalid input.           | `"true"` |
119 | | `aria_describedby` | `&'static str` | Links the input to a description (e.g., error). | `""`     |
120 | 
121 | ## 💡 Notes
122 | 
123 | - The `Input` component can be used for various input types like text, password, etc.
124 | - You can bind the component to state hooks for two-way data binding.
125 | - Utilize `validate_function` to validate user input and display error messages.
126 | - The `eye_active` and `eye_disabled` props allow for password visibility toggling with FontAwesome icons.
127 | - Customize the appearance with CSS classes for better integration into your app's design.
128 | 


--------------------------------------------------------------------------------
/LEPTOS.md:
--------------------------------------------------------------------------------
  1 | # 🌱 Leptos Input RS Usage
  2 | 
  3 | Adding Input RS to your Leptos project is simple:
  4 | 
  5 | 1. Make sure your project is set up with Leptos. Refer to their [Getting Started Guide](https://book.leptos.dev/getting_started/index.html) for setup instructions.
  6 | 
  7 | 1. Add `input-rs` to your dependencies:
  8 | 
  9 |    ```sh
 10 |    cargo add input-rs --features=lep
 11 |    ```
 12 | 
 13 | 1. Import the `Input` component into your Leptos component and start using it in your app.
 14 | 
 15 | ## 🛠️ Usage
 16 | 
 17 | Incorporating the `Input` component into your Leptos application is easy. Follow these steps:
 18 | 
 19 | 1. Import the `Input` component into your Leptos project:
 20 | 
 21 |    ```rust
 22 |    use leptos::{prelude::*, *};
 23 |    use input_rs::leptos::Input;
 24 |    use regex::Regex;
 25 |    ```
 26 | 
 27 | 1. Use the `Input` component within your Leptos application:
 28 | 
 29 |    ```rust
 30 |    use leptos::{prelude::*, *};
 31 |    use input_rs::leptos::Input;
 32 |    use regex::Regex;
 33 | 
 34 | 
 35 |    fn validate_input(value: String) -> bool {
 36 |        !value.trim().is_empty()
 37 |    }
 38 | 
 39 |    #[component]
 40 |    pub fn app() -> impl IntoView {
 41 |        let error_handle = signal(String::default());
 42 |        let error = error_handle.0.get();
 43 | 
 44 |        let email_valid_handle = signal(true);
 45 |        let email_valid = email_valid_handle.0.get();
 46 | 
 47 |        let password_valid_handle = signal(true);
 48 |        let password_valid = password_valid_handle.0.get();
 49 | 
 50 |        let email_handle = signal(String::default());
 51 |        let email = email_handle.0.get();
 52 | 
 53 |        let password_handle = signal(String::default());
 54 |        let password = password_handle.0.get();
 55 | 
 56 |        let onsubmit = move |ev: leptos::ev::SubmitEvent| {
 57 |            ev.prevent_default();
 58 | 
 59 |            let email_ref = email.clone();
 60 |            let password_ref = password.clone();
 61 |            let error_handle = error_handle.clone();
 62 | 
 63 |            // Custom logic for your endpoint goes here
 64 |        };
 65 | 
 66 |        view! {
 67 |            <div class="form-one-content" role="main" aria-label="Sign In Form">
 68 |                <div class="text">
 69 |                    <h2>{"Sign In"}</h2>
 70 |                    { move || if !error.is_empty() {
 71 |                            Some(view! {<div class="error">error</div>})
 72 |                        }
 73 |                        else {None}
 74 |                    }
 75 |                </div>
 76 |                <form on:submit={onsubmit}>
 77 |                    <Input
 78 |                        r#type="text"
 79 |                        handle={email_handle}
 80 |                        name="email"
 81 |                        label="Email"
 82 |                        placeholder="Email"
 83 |                        input_class="form-one-field"
 84 |                        field_class="form-one-field"
 85 |                        error_class="error-txt"
 86 |                        required=true
 87 |                        valid_handle={email_valid_handle}
 88 |                        validate_function={validate_input}
 89 |                        error_message="Enter a valid email address"
 90 |                    />
 91 |                    <Input
 92 |                        r#type="password"
 93 |                        handle={password_handle}
 94 |                        name="password"
 95 |                        label="Password"
 96 |                        placeholder="Password"
 97 |                        input_class="form-one-field"
 98 |                        field_class="form-one-field"
 99 |                        error_class="error-txt"
100 |                        required=true
101 |                        valid_handle={password_valid_handle}
102 |                        validate_function={validate_input}
103 |                        error_message="Password can't be blank!"
104 |                        eye_active="fa fa-eye"
105 |                        eye_disabled="fa fa-eye-slash"
106 |                    />
107 |                    <div class="form-one-forgot-pass">
108 |                        <a href="#">{"Forgot Password?"}</a>
109 |                    </div>
110 |                    <button type="submit">{"Sign in"}</button>
111 |                    <div class="sign-up">
112 |                        {"Not a member?"}
113 |                        <a href="#">{"Sign up now"}</a>
114 |                    </div>
115 |                </form>
116 |            </div>
117 |        }
118 |    }
119 |    ```
120 | 
121 | ## 🔧 Props
122 | 
123 | ### `Input` Props
124 | 
125 | #### Main Props
126 | 
127 | | Property            | Type                                        | Description                                                | Default  |
128 | | ------------------- | ------------------------------------------- | ---------------------------------------------------------- | -------- |
129 | | `r#type`            | `&'static str`                              | The type of the input element (e.g., `text`, `password`).  | `"text"` |
130 | | `handle`            | `(ReadSignal<String>, WriteSignal<String>)` | State handle for managing the value of the input.          | `""`     |
131 | | `valid_handle`      | `(ReadSignal<bool>, WriteSignal<bool>)`     | State handle for managing the validity state of the input. | `""`     |
132 | | `validate_function` | `fn(String) -> bool`                        | Callback function to validate the input value.             | `""`     |
133 | | `error_message`     | `&'static str`                              | Error message displayed when the input is invalid.         | `""`     |
134 | 
135 | #### Accessibility and SEO Props
136 | 
137 | | Property           | Type           | Description                                                     | Default  |
138 | | ------------------ | -------------- | --------------------------------------------------------------- | -------- |
139 | | `id`               | `&'static str` | The ID attribute of the input element.                          | `""`     |
140 | | `aria_label`       | `&'static str` | The aria-label for screen readers.                              | `""`     |
141 | | `aria_required`    | `&'static str` | Indicates whether the input is required.                        | `"true"` |
142 | | `aria_invalid`     | `&'static str` | Indicates whether the input value is invalid.                   | `"true"` |
143 | | `aria_describedby` | `&'static str` | Describes the input element's error message for screen readers. | `""`     |
144 | 
145 | #### Styling Props
146 | 
147 | | Property      | Type           | Description                                                          | Default |
148 | | ------------- | -------------- | -------------------------------------------------------------------- | ------- |
149 | | `class`       | `&'static str` | The CSS class for the container element of the input.                | `""`    |
150 | | `input_class` | `&'static str` | The CSS class for the inner input element.                           | `""`    |
151 | | `field_class` | `&'static str` | The CSS class for the input field.                                   | `""`    |
152 | | `label_class` | `&'static str` | The CSS class for the label element.                                 | `""`    |
153 | | `error_class` | `&'static str` | The CSS class for the error message container.                       | `""`    |
154 | | `icon_class`  | `&'static str` | The CSS class for the icon element (for password visibility toggle). | `""`    |
155 | 
156 | #### Behavioral Props
157 | 
158 | | Property       | Type           | Description                                     | Default             |
159 | | -------------- | -------------- | ----------------------------------------------- | ------------------- |
160 | | `eye_active`   | `&'static str` | The icon used when the password is visible.     | `"fa fa-eye"`       |
161 | | `eye_disabled` | `&'static str` | The icon used when the password is not visible. | `"fa fa-eye-slash"` |
162 | 
163 | #### Additional Props
164 | 
165 | | Property      | Type           | Description                                          | Default |
166 | | ------------- | -------------- | ---------------------------------------------------- | ------- |
167 | | `placeholder` | `&'static str` | The placeholder text displayed in the input element. | `""`    |
168 | | `required`    | `bool`         | Specifies whether the input is required or not.      | `false` |
169 | | `disabled`    | `bool`         | Disables the input when true.                        | `false` |
170 | | `readonly`    | `bool`         | Makes the input read-only when true.                 | `false` |
171 | 
172 | #### Input Element Specific Attributes
173 | 
174 | | Property    | Type            | Description                                                     | Default |
175 | | ----------- | --------------- | --------------------------------------------------------------- | ------- |
176 | | `size`      | `Option<u32>`   | The size of the input element (character width).                | `None`  |
177 | | `maxlength` | `Option<usize>` | The maximum number of characters allowed in the input.          | `None`  |
178 | | `pattern`   | `&'static str`  | Regex pattern for input validation.                             | `".*"`  |
179 | | `minlength` | `Option<usize>` | The minimum length of the input value.                          | `None`  |
180 | | `multiple`  | `bool`          | Whether multiple values are allowed (for file or email inputs). | `false` |
181 | 
182 | #### Behavioral Props
183 | 
184 | | Property   | Type               | Description                                      | Default |
185 | | ---------- | ------------------ | ------------------------------------------------ | ------- |
186 | | `onchange` | `Callback<String>` | Callback triggered when the input value changes. | No-op   |
187 | 
188 | ## 💡 Notes
189 | 
190 | - The `Input` component can be used for various input types like text, password, etc.
191 | - You can bind the component to state hooks for two-way data binding.
192 | - Utilize `validate_function` to validate user input and display error messages.
193 | - The `eye_active` and `eye_disabled` props allow for password visibility toggling with FontAwesome icons.
194 | - Customize the appearance with CSS classes for better integration into your app's design.
195 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 | 1.  Definitions.
  8 | 
  9 |     "License" shall mean the terms and conditions for use, reproduction,
 10 |     and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |     "Licensor" shall mean the copyright owner or entity authorized by
 13 |     the copyright owner that is granting the License.
 14 | 
 15 |     "Legal Entity" shall mean the union of the acting entity and all
 16 |     other entities that control, are controlled by, or are under common
 17 |     control with that entity. For the purposes of this definition,
 18 |     "control" means (i) the power, direct or indirect, to cause the
 19 |     direction or management of such entity, whether by contract or
 20 |     otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |     outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |     "You" (or "Your") shall mean an individual or Legal Entity
 24 |     exercising permissions granted by this License.
 25 | 
 26 |     "Source" form shall mean the preferred form for making modifications,
 27 |     including but not limited to software source code, documentation
 28 |     source, and configuration files.
 29 | 
 30 |     "Object" form shall mean any form resulting from mechanical
 31 |     transformation or translation of a Source form, including but
 32 |     not limited to compiled object code, generated documentation,
 33 |     and conversions to other media types.
 34 | 
 35 |     "Work" shall mean the work of authorship, whether in Source or
 36 |     Object form, made available under the License, as indicated by a
 37 |     copyright notice that is included in or attached to the work
 38 |     (an example is provided in the Appendix below).
 39 | 
 40 |     "Derivative Works" shall mean any work, whether in Source or Object
 41 |     form, that is based on (or derived from) the Work and for which the
 42 |     editorial revisions, annotations, elaborations, or other modifications
 43 |     represent, as a whole, an original work of authorship. For the purposes
 44 |     of this License, Derivative Works shall not include works that remain
 45 |     separable from, or merely link (or bind by name) to the interfaces of,
 46 |     the Work and Derivative Works thereof.
 47 | 
 48 |     "Contribution" shall mean any work of authorship, including
 49 |     the original version of the Work and any modifications or additions
 50 |     to that Work or Derivative Works thereof, that is intentionally
 51 |     submitted to Licensor for inclusion in the Work by the copyright owner
 52 |     or by an individual or Legal Entity authorized to submit on behalf of
 53 |     the copyright owner. For the purposes of this definition, "submitted"
 54 |     means any form of electronic, verbal, or written communication sent
 55 |     to the Licensor or its representatives, including but not limited to
 56 |     communication on electronic mailing lists, source code control systems,
 57 |     and issue tracking systems that are managed by, or on behalf of, the
 58 |     Licensor for the purpose of discussing and improving the Work, but
 59 |     excluding communication that is conspicuously marked or otherwise
 60 |     designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |     "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |     on behalf of whom a Contribution has been received by Licensor and
 64 |     subsequently incorporated within the Work.
 65 | 
 66 | 2.  Grant of Copyright License. Subject to the terms and conditions of
 67 |     this License, each Contributor hereby grants to You a perpetual,
 68 |     worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |     copyright license to reproduce, prepare Derivative Works of,
 70 |     publicly display, publicly perform, sublicense, and distribute the
 71 |     Work and such Derivative Works in Source or Object form.
 72 | 
 73 | 3.  Grant of Patent License. Subject to the terms and conditions of
 74 |     this License, each Contributor hereby grants to You a perpetual,
 75 |     worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |     (except as stated in this section) patent license to make, have made,
 77 |     use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |     where such license applies only to those patent claims licensable
 79 |     by such Contributor that are necessarily infringed by their
 80 |     Contribution(s) alone or by combination of their Contribution(s)
 81 |     with the Work to which such Contribution(s) was submitted. If You
 82 |     institute patent litigation against any entity (including a
 83 |     cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |     or a Contribution incorporated within the Work constitutes direct
 85 |     or contributory patent infringement, then any patent licenses
 86 |     granted to You under this License for that Work shall terminate
 87 |     as of the date such litigation is filed.
 88 | 
 89 | 4.  Redistribution. You may reproduce and distribute copies of the
 90 |     Work or Derivative Works thereof in any medium, with or without
 91 |     modifications, and in Source or Object form, provided that You
 92 |     meet the following conditions:
 93 | 
 94 |     (a) You must give any other recipients of the Work or
 95 |     Derivative Works a copy of this License; and
 96 | 
 97 |     (b) You must cause any modified files to carry prominent notices
 98 |     stating that You changed the files; and
 99 | 
100 |     (c) You must retain, in the Source form of any Derivative Works
101 |     that You distribute, all copyright, patent, trademark, and
102 |     attribution notices from the Source form of the Work,
103 |     excluding those notices that do not pertain to any part of
104 |     the Derivative Works; and
105 | 
106 |     (d) If the Work includes a "NOTICE" text file as part of its
107 |     distribution, then any Derivative Works that You distribute must
108 |     include a readable copy of the attribution notices contained
109 |     within such NOTICE file, excluding those notices that do not
110 |     pertain to any part of the Derivative Works, in at least one
111 |     of the following places: within a NOTICE text file distributed
112 |     as part of the Derivative Works; within the Source form or
113 |     documentation, if provided along with the Derivative Works; or,
114 |     within a display generated by the Derivative Works, if and
115 |     wherever such third-party notices normally appear. The contents
116 |     of the NOTICE file are for informational purposes only and
117 |     do not modify the License. You may add Your own attribution
118 |     notices within Derivative Works that You distribute, alongside
119 |     or as an addendum to the NOTICE text from the Work, provided
120 |     that such additional attribution notices cannot be construed
121 |     as modifying the License.
122 | 
123 |     You may add Your own copyright statement to Your modifications and
124 |     may provide additional or different license terms and conditions
125 |     for use, reproduction, or distribution of Your modifications, or
126 |     for any such Derivative Works as a whole, provided Your use,
127 |     reproduction, and distribution of the Work otherwise complies with
128 |     the conditions stated in this License.
129 | 
130 | 5.  Submission of Contributions. Unless You explicitly state otherwise,
131 |     any Contribution intentionally submitted for inclusion in the Work
132 |     by You to the Licensor shall be under the terms and conditions of
133 |     this License, without any additional terms or conditions.
134 |     Notwithstanding the above, nothing herein shall supersede or modify
135 |     the terms of any separate license agreement you may have executed
136 |     with Licensor regarding such Contributions.
137 | 
138 | 6.  Trademarks. This License does not grant permission to use the trade
139 |     names, trademarks, service marks, or product names of the Licensor,
140 |     except as required for reasonable and customary use in describing the
141 |     origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 | 7.  Disclaimer of Warranty. Unless required by applicable law or
144 |     agreed to in writing, Licensor provides the Work (and each
145 |     Contributor provides its Contributions) on an "AS IS" BASIS,
146 |     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |     implied, including, without limitation, any warranties or conditions
148 |     of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |     PARTICULAR PURPOSE. You are solely responsible for determining the
150 |     appropriateness of using or redistributing the Work and assume any
151 |     risks associated with Your exercise of permissions under this License.
152 | 
153 | 8.  Limitation of Liability. In no event and under no legal theory,
154 |     whether in tort (including negligence), contract, or otherwise,
155 |     unless required by applicable law (such as deliberate and grossly
156 |     negligent acts) or agreed to in writing, shall any Contributor be
157 |     liable to You for damages, including any direct, indirect, special,
158 |     incidental, or consequential damages of any character arising as a
159 |     result of this License or out of the use or inability to use the
160 |     Work (including but not limited to damages for loss of goodwill,
161 |     work stoppage, computer failure or malfunction, or any and all
162 |     other commercial damages or losses), even if such Contributor
163 |     has been advised of the possibility of such damages.
164 | 
165 | 9.  Accepting Warranty or Additional Liability. While redistributing
166 |     the Work or Derivative Works thereof, You may choose to offer,
167 |     and charge a fee for, acceptance of support, warranty, indemnity,
168 |     or other liability obligations and/or rights consistent with this
169 |     License. However, in accepting such obligations, You may act only
170 |     on Your own behalf and on Your sole responsibility, not on behalf
171 |     of any other Contributor, and only if You agree to indemnify,
172 |     defend, and hold each Contributor harmless for any liability
173 |     incurred by, or claims asserted against, such Contributor by reason
174 |     of your accepting any such warranty or additional liability.
175 | 
176 | END OF TERMS AND CONDITIONS
177 | 
178 | APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "[]"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 | Copyright 2024 Open SASS Core Maintainers
190 | 
191 | Licensed under the Apache License, Version 2.0 (the "License");
192 | you may not use this file except in compliance with the License.
193 | You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 | Unless required by applicable law or agreed to in writing, software
198 | distributed under the License is distributed on an "AS IS" BASIS,
199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 | See the License for the specific language governing permissions and
201 | limitations under the License.
202 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 | 
 3 | # 🔤 Input RS
 4 | 
 5 | [![Crates.io](https://img.shields.io/crates/v/input-rs)](https://crates.io/crates/input-rs)
 6 | [![Crates.io Downloads](https://img.shields.io/crates/d/input-rs)](https://crates.io/crates/input-rs)
 7 | ![Crates.io License](https://img.shields.io/crates/l/input-rs)
 8 | [![made-with-rust](https://img.shields.io/badge/Made%20with-Rust-1f425f.svg?logo=rust&logoColor=white)](https://www.rust-lang.org/)
 9 | [![Rust](https://img.shields.io/badge/Rust-1.79%2B-blue.svg)](https://www.rust-lang.org)
10 | [![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/wiseaidev)
11 | 
12 | [![Open SASS Discord](https://dcbadge.limes.pink/api/server/b5JbvHW5nv)](https://discord.gg/b5JbvHW5nv)
13 | 
14 | <!-- absolute url for docs.rs cause assets is excluded from crate -->
15 | ![logo](https://raw.githubusercontent.com/opensass/input-rs/refs/heads/main/assets/logo-new.png)
16 | 
17 | </div>
18 | 
19 | ## 🎬 Demo
20 | <!-- absolute urls for docs.rs cause assets is excluded from crate -->
21 | | Input Type | Demo                                         |
22 | | ---------- | -------------------------------------------- |
23 | | Text       | ![text-demo](https://raw.githubusercontent.com/opensass/input-rs/refs/heads/main/assets/text-demo.gif)         |
24 | | Password   | ![pass-demo](https://raw.githubusercontent.com/opensass/input-rs/refs/heads/main/assets/pass-demo.gif)         |
25 | | Textarea   | ![textarea-demo](https://raw.githubusercontent.com/opensass/input-rs/refs/heads/main/assets/textarea-demo.gif) |
26 | | Telephone  | ![tel-demo](https://raw.githubusercontent.com/opensass/input-rs/refs/heads/main/assets/tel-demo.gif)           |
27 | 
28 | | Framework | Live Demo |
29 | | --- | --- |
30 | | Yew | [![Netlify Status](https://api.netlify.com/api/v1/badges/45d208ab-8b1b-4608-bcb1-f7d3d049cac5/deploy-status)](https://input-rs.netlify.app) |
31 | | Dioxus | [![Netlify Status](https://api.netlify.com/api/v1/badges/b94e6586-192b-4db8-bc09-b287366c9731/deploy-status)](https://input-rs-dioxus.netlify.app) |
32 | | Leptos | [![Netlify Status](https://api.netlify.com/api/v1/badges/7b6175fa-892b-4a05-9fd5-b425b399e48f/deploy-status)](https://input-rs-leptos.netlify.app) |
33 | 
34 | ### 📜 Intro
35 | 
36 | A reusable input component built for WASM frameworks like Yew, Dioxus, and Leptos. It's customizable, accessible, and designed to simplify creating dynamic input fields in your applications.
37 | 
38 | ## 🤔 Why Use Input RS?
39 | 
40 | The following features make Input RS a must-have for your WASM-based projects:
41 | 
42 | 1. **🎨 Advanced Customization**: Style inputs with custom classes, inline styles, and themes to suit your app's design.
43 | 1. **🔑 Flexible Input Types**: Supports text, password, phone number, and more with built-in validation.
44 | 1. **⚡ Interactive Callbacks**: Efficiently handle value changes and validity checks with customizable callback functions.
45 | 1. **🧩 Accessibility**: Built-in ARIA attributes for screen readers and other assistive technologies.
46 | 1. **📞 Phone Number Validation**: Dynamic phone number parsing with country code support.
47 | 
48 | ## Y Yew Usage
49 | 
50 | <!-- absolute url for docs.rs cause YEW.md is not included in crate -->
51 | Refer to [our guide](https://github.com/opensass/input-rs/blob/main/YEW.md) to integrate this component into your Yew app.
52 | 
53 | ## 🧬 Dioxus Usage
54 | 
55 | <!-- absolute url for docs.rs cause DIOXUS.md is not included in crate -->
56 | Refer to [our guide](https://github.com/opensass/input-rs/blob/main/DIOXUS.md) to integrate this component into your Dioxus app.
57 | 
58 | ## 🌱 Leptos Usage
59 | 
60 | <!-- absolute url for docs.rs cause LEPTOS.md is not included in crate -->
61 | Refer to [our guide](https://github.com/opensass/input-rs/blob/main/LEPTOS.md) to integrate this component into your Leptos app.
62 | 
63 | ## 🤝 Contributions
64 | 
65 | Contributions are welcome! Whether it's bug fixes, feature requests, or examples, we would love your help to make Input RS better.
66 | 
67 | 1. Fork the repository.
68 | 1. Create a new branch for your feature/bugfix.
69 | 1. Submit a pull request for review.
70 | 
71 | ## 📜 License
72 | 
73 | Input RS is licensed under the [Apache License](LICENSE). You are free to use, modify, and distribute this library in your projects.
74 | 


--------------------------------------------------------------------------------
/YEW.md:
--------------------------------------------------------------------------------
  1 | # Y Input RS Yew Usage
  2 | 
  3 | Adding Input RS to your project is simple:
  4 | 
  5 | 1. Make sure your project is set up with **Yew**. Follow their [Getting Started Guide](https://yew.rs/docs/getting-started/introduction) for setup instructions.
  6 | 
  7 | 1. Add the Input RS component to your dependencies by including it in your `Cargo.toml` file:
  8 | 
  9 |    ```sh
 10 |    cargo add input-rs --features=yew
 11 |    ```
 12 | 
 13 | 1. Import the `Input` component into your Yew component and start using it in your app.
 14 | 
 15 | ## 🛠️ Usage
 16 | 
 17 | Incorporating Yew Input RS into your application is easy. Follow these steps:
 18 | 
 19 | 1. Import the `Input` component into your Yew project:
 20 | 
 21 |    ```rust
 22 |    use yew::prelude::*;
 23 |    use input_rs::yew::Input;
 24 |    use regex::Regex;
 25 |    ```
 26 | 
 27 | 1. Use the `Input` component within your Yew application:
 28 | 
 29 |    ```rust
 30 |    use yew::prelude::*;
 31 |    use regex::Regex;
 32 |    use input_rs::yew::Input;
 33 | 
 34 |    fn validate_email(email: String) -> bool {
 35 |        let pattern = Regex::new(r"^[^ ]+@[^ ]+\.[a-z]{2,3}$").unwrap();
 36 |        pattern.is_match(&email)
 37 |    }
 38 | 
 39 |    #[function_component(App)]
 40 |    pub fn app() -> Html {
 41 |        let input_email_ref = use_node_ref();
 42 |        let input_email_handle = use_state(String::default);
 43 |        let email_valid_handle = use_state(|| true);
 44 | 
 45 |        html! {
 46 |            <form>
 47 |                <Input
 48 |                    r#type="email"
 49 |                    name="email"
 50 |                    r#ref={input_email_ref}
 51 |                    handle={input_email_handle}
 52 |                    valid_handle={email_valid_handle}
 53 |                    validate_function={validate_email}
 54 |                    placeholder="Enter your email"
 55 |                    label="Email Address"
 56 |                    required={true}
 57 |                    error_message="Please provide a valid email address"
 58 |                    class="form-field"
 59 |                    label_class="form-label"
 60 |                    input_class="form-input"
 61 |                    error_class="error-text"
 62 |                />
 63 |            </form>
 64 |        }
 65 |    }
 66 |    ```
 67 | 
 68 | ## 🔧 Props
 69 | 
 70 | ### Main Props
 71 | 
 72 | | Property            | Type                     | Description                                                            | Default  |
 73 | | ------------------- | ------------------------ | ---------------------------------------------------------------------- | -------- |
 74 | | `type`              | `&'static str`           | Input type, e.g., `"text"`, `"email"`, `"password"`, `"textarea"`.     | `"text"` |
 75 | | `name`              | `&'static str`           | Name attribute for the input element.                                  | `""`     |
 76 | | `label`             | `&'static str`           | Text label displayed above the input.                                  | `""`     |
 77 | | `placeholder`       | `&'static str`           | Placeholder text inside the input field.                               | `""`     |
 78 | | `id`                | `&'static str`           | ID attribute for the input element.                                    | `""`     |
 79 | | `required`          | `bool`                   | Indicates whether the field is required.                               | `false`  |
 80 | | `handle`            | `UseStateHandle<String>` | State handle for managing the value of the input.                      | None     |
 81 | | `valid_handle`      | `UseStateHandle<bool>`   | State handle for managing the validity of the input value.             | None     |
 82 | | `validate_function` | `Callback<String, bool>` | Validation function that checks the input value and returns a boolean. | None     |
 83 | | `error_message`     | `&'static str`           | Message displayed when the input value is invalid.                     | `""`     |
 84 | 
 85 | ### Styling Props
 86 | 
 87 | ```sh
 88 | +-----------------------------+  <-- `class`
 89 | |                             |
 90 | |  +-----------------------+  |  <-- `label_class`
 91 | |  |       Label           |  |
 92 | |  +-----------------------+  |
 93 | |                             |
 94 | |  +-----------------------+  |  <-- `field_class`
 95 | |  | +-------+  +--------+ |  |
 96 | |  | | Input |  |  Icon  | |  |  <-- `input_class` and `icon_class`
 97 | |  | +-------+  +--------+ |  |
 98 | |  +-----------------------+  |
 99 | |                             |
100 | |  +-----------------------+  |  <-- `error_class` (if invalid)
101 | |  |       Error Message   |  |
102 | |  +-----------------------+  |
103 | +-----------------------------+
104 | ```
105 | 
106 | | Property      | Type           | Description                                                             | Default |
107 | | ------------- | -------------- | ----------------------------------------------------------------------- | ------- |
108 | | `class`       | `&'static str` | CSS class applied to the wrapper container.                             | `""`    |
109 | | `label_class` | `&'static str` | CSS class applied to the label element.                                 | `""`    |
110 | | `input_class` | `&'static str` | CSS class applied to the input element.                                 | `""`    |
111 | | `field_class` | `&'static str` | CSS class applied to the input wrapper element (includes icons, etc.).  | `""`    |
112 | | `error_class` | `&'static str` | CSS class applied to the error message container when validation fails. | `""`    |
113 | | `icon_class`  | `&'static str` | CSS class applied to the optional icon (if specified).                  | `""`    |
114 | 
115 | ### Password Icon Props
116 | 
117 | | Property       | Type           | Description                                                        | Default                                                                               |
118 | | -------------- | -------------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------- |
119 | | `eye_active`   | `&'static str` | Icon CSS class for showing the "visible" state in password fields. | `"cursor-pointer right-4 top-1 text-2xl text-gray-600 toggle-button fa fa-eye"`       |
120 | | `eye_disabled` | `&'static str` | Icon CSS class for showing the "hidden" state in password fields.  | `"cursor-pointer right-4 top-1 text-2xl text-gray-600 toggle-button fa fa-eye-slash"` |
121 | 
122 | ### Accessibility Props
123 | 
124 | | Property           | Type           | Description                                                                 | Default   |
125 | | ------------------ | -------------- | --------------------------------------------------------------------------- | --------- |
126 | | `aria_label`       | `&'static str` | Aria-label for the input element for screen reader users.                   | `""`      |
127 | | `aria_required`    | `&'static str` | Specifies whether the input is required for screen readers.                 | `"true"`  |
128 | | `aria_invalid`     | `&'static str` | Indicates whether the input value is invalid for screen readers.            | `"false"` |
129 | | `aria_describedby` | `&'static str` | ID of the element that describes the input (e.g., error message container). | `""`      |
130 | 
131 | ## 💡 Notes
132 | 
133 | - The `Input` component can be used for various input types like text, password, etc.
134 | - You can bind the component to state hooks for two-way data binding.
135 | - Utilize `validate_function` to validate user input and display error messages.
136 | - The `eye_active` and `eye_disabled` props allow for password visibility toggling with FontAwesome icons.
137 | - Customize the appearance with CSS classes for better integration into your app's design.
138 | 


--------------------------------------------------------------------------------
/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/opensass/input-rs/a8cde136407a8507430fc95e2fe90c0afbc39388/assets/favicon.png


--------------------------------------------------------------------------------
/assets/logo-new.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/opensass/input-rs/a8cde136407a8507430fc95e2fe90c0afbc39388/assets/logo-new.png


--------------------------------------------------------------------------------
/assets/pass-demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/opensass/input-rs/a8cde136407a8507430fc95e2fe90c0afbc39388/assets/pass-demo.gif


--------------------------------------------------------------------------------
/assets/tel-demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/opensass/input-rs/a8cde136407a8507430fc95e2fe90c0afbc39388/assets/tel-demo.gif


--------------------------------------------------------------------------------
/assets/text-demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/opensass/input-rs/a8cde136407a8507430fc95e2fe90c0afbc39388/assets/text-demo.gif


--------------------------------------------------------------------------------
/assets/textarea-demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/opensass/input-rs/a8cde136407a8507430fc95e2fe90c0afbc39388/assets/textarea-demo.gif


--------------------------------------------------------------------------------
/examples/dioxus/Cargo.toml:
--------------------------------------------------------------------------------
 1 | [package]
 2 | name = "input-rs-dioxus-example"
 3 | version = "0.1.0"
 4 | edition = "2021"
 5 | 
 6 | [dependencies]
 7 | dioxus = { version = "0.6.3", features = ["web"] }
 8 | input-rs = { path = "../../", features = ["dio"] }
 9 | dioxus-logger = "0.6.2"
10 | regex = "1.11.1"
11 | 
12 | [profile]
13 | 
14 | [profile.wasm-dev]
15 | inherits = "dev"
16 | opt-level = 1
17 | 
18 | [profile.server-dev]
19 | inherits = "dev"
20 | 
21 | [profile.android-dev]
22 | inherits = "dev"
23 | 


--------------------------------------------------------------------------------
/examples/dioxus/Dioxus.toml:
--------------------------------------------------------------------------------
 1 | [application]
 2 | 
 3 | # App (Project) Name
 4 | name = "input-rs"
 5 | 
 6 | # Dioxus App Default Platform
 7 | # desktop, web
 8 | default_platform = "web"
 9 | 
10 | # resource (assets) file folder
11 | asset_dir = "assets"
12 | 
13 | [web.app]
14 | 
15 | # HTML title tag content
16 | title = "input-rs"
17 | 
18 | [web.watcher]
19 | 
20 | # when watcher trigger, regenerate the `index.html`
21 | reload_html = true
22 | 
23 | # which files or dirs will be watcher monitoring
24 | watch_path = ["src", "assets"]
25 | 
26 | # include `assets` in web platform
27 | [web.resource]
28 | 
29 | # CSS style file
30 | style = []
31 | 
32 | # Javascript code file
33 | script = []
34 | 
35 | [web.resource.dev]
36 | 
37 | # Javascript code file
38 | # serve: [dev-server] only
39 | script = []
40 | 


--------------------------------------------------------------------------------
/examples/dioxus/README.md:
--------------------------------------------------------------------------------
 1 | # 📚 Input RS Dioxus Tailwind Components
 2 | 
 3 | ## 🛠️ Pre-requisites:
 4 | 
 5 | ### 🐧 **Linux Users**
 6 | 
 7 | 1. **Install [`rustup`](https://www.rust-lang.org/tools/install)**:
 8 | 
 9 |    ```sh
10 |    curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
11 |    ```
12 | 
13 | 1. Install [`Dioxus CLI`](https://dioxuslabs.com/learn/0.5/getting_started):
14 | 
15 |    ```sh
16 |    cargo install dioxus-cli
17 |    ```
18 | 
19 | ### 🪟 **Windows Users**
20 | 
21 | 1. **Download and install `rustup`**: Follow the installation instructions [here](https://www.rust-lang.org/tools/install).
22 | 
23 | 1. **Install [Windows Subsystem for Linux (WSL)](https://learn.microsoft.com/en-us/windows/wsl/install)**: Open PowerShell as administrator and run:
24 | 
25 |    ```sh
26 |    wsl --install
27 |    ```
28 | 
29 | 1. **Reset Network Stack**: In PowerShell (administrator mode), run:
30 | 
31 |    ```sh
32 |    netsh int ip reset all
33 |    netsh winsock reset
34 |    ```
35 | 
36 | 1. **Install Linux packages in WSL**: Once inside your WSL terminal, update and install required dependencies:
37 | 
38 |    ```sh
39 |    sudo apt update
40 |    sudo apt install build-essential pkg-config libudev-dev
41 |    ```
42 | 
43 | 1. Install [`Dioxus CLI`](https://dioxuslabs.com/learn/0.5/getting_started):
44 | 
45 |    ```sh
46 |    cargo install dioxus-cli
47 |    ```
48 | 
49 | ## 🚀 Building and Running
50 | 
51 | 1. Fork/Clone the GitHub repository.
52 | 
53 |    ```sh
54 |    git clone https://github.com/opensass/input-rs
55 |    ```
56 | 
57 | 1. Navigate to the application directory.
58 | 
59 |    ```sh
60 |    cd input-rs/examples/dioxus
61 |    ```
62 | 
63 | 1. Run the client:
64 | 
65 |    ```sh
66 |    dx serve --port 3000
67 |    ```
68 | 
69 | Navigate to http://localhost:3000 to explore the landing page.
70 | 


--------------------------------------------------------------------------------
/examples/dioxus/src/main.rs:
--------------------------------------------------------------------------------
  1 | use dioxus::prelude::*;
  2 | use dioxus_logger::tracing;
  3 | use input_rs::dioxus::Input;
  4 | use regex::Regex;
  5 | 
  6 | pub fn validate_email(email: String) -> bool {
  7 |     let pattern = Regex::new(r"^[^ ]+@[^ ]+\.[a-z]{2,3}$").unwrap();
  8 |     pattern.is_match(&email)
  9 | }
 10 | 
 11 | pub fn validate_input(field: String) -> bool {
 12 |     !&field.is_empty()
 13 | }
 14 | 
 15 | fn main() {
 16 |     dioxus_logger::init(tracing::Level::INFO).expect("failed to init logger");
 17 |     tracing::info!("starting app");
 18 |     launch(app);
 19 | }
 20 | 
 21 | fn app() -> Element {
 22 |     rsx! {
 23 |         document::Script { src: "https://kit.fontawesome.com/8f223ead6e.js" },
 24 |         document::Stylesheet { href: "https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css" },
 25 |         MultiStepFormOne {}
 26 |     }
 27 | }
 28 | 
 29 | #[allow(non_snake_case)]
 30 | pub fn MultiStepFormOne() -> Element {
 31 |     let mut error = use_signal(String::new);
 32 |     let email_valid = use_signal(|| true);
 33 |     let full_name_valid = use_signal(|| true);
 34 |     let phone_number_valid = use_signal(|| true);
 35 |     let address_valid = use_signal(|| true);
 36 |     let birthday_valid = use_signal(|| true);
 37 |     let mut gender_valid = use_signal(|| true);
 38 |     let username_valid = use_signal(|| true);
 39 |     let password_valid = use_signal(|| true);
 40 | 
 41 |     let input_email = use_signal(String::new);
 42 |     let input_full_name = use_signal(String::new);
 43 |     let input_phone_number = use_signal(String::new);
 44 |     let input_address = use_signal(String::new);
 45 |     let input_birthday = use_signal(String::new);
 46 |     let mut input_gender = use_signal(String::new);
 47 |     let input_username = use_signal(String::new);
 48 |     let input_password = use_signal(String::new);
 49 | 
 50 |     let mut current_step = use_signal(|| 0);
 51 | 
 52 |     let on_next = {
 53 |         move |_| match current_step() {
 54 |             0 => {
 55 |                 if full_name_valid() && email_valid() {
 56 |                     current_step.set(current_step() + 1);
 57 |                     error.set(String::new());
 58 |                 } else {
 59 |                     error.set("Please provide a valid full name and email address!".to_string());
 60 |                 }
 61 |             }
 62 |             1 => {
 63 |                 if phone_number_valid() && address_valid() {
 64 |                     current_step.set(current_step() + 1);
 65 |                     error.set(String::new());
 66 |                 } else {
 67 |                     error.set("Please provide a valid phone number and address!".to_string());
 68 |                 }
 69 |             }
 70 |             2 => {
 71 |                 if birthday_valid() && gender_valid() {
 72 |                     current_step.set(current_step() + 1);
 73 |                     error.set(String::new());
 74 |                 } else {
 75 |                     error.set("Please provide a valid birth date and gender!".to_string());
 76 |                 }
 77 |             }
 78 |             _ => (),
 79 |         }
 80 |     };
 81 | 
 82 |     let on_previous = {
 83 |         move |_| {
 84 |             if current_step() > 0 {
 85 |                 current_step.set(current_step() - 1);
 86 |             }
 87 |         }
 88 |     };
 89 | 
 90 |     let on_gender_change = {
 91 |         move |e: Event<FormData>| {
 92 |             let value = e.value();
 93 |             input_gender.set(value.clone());
 94 |             gender_valid.set(validate_input(value));
 95 |         }
 96 |     };
 97 | 
 98 |     let render_progress_item = |index: usize| {
 99 |         rsx! {
100 |             div {
101 |                 class: "flex items-center text-left justify-center my-10",
102 |                 for step in 0..4 {
103 |                     div {
104 |                         class: "step",
105 |                         p {
106 |                             class: "font-semibold mb-2 text-pink-800",
107 |                             "Step {step + 1}"
108 |                         }
109 |                         div {
110 |                             class: "flex items-center",
111 |                             div {
112 |                                 class: "outer-check bullet border-2 border-pink-800 rounded-full h-7 w-7 flex items-center justify-center",
113 |                                 span {
114 |                                     class: "step-index font-semibold text-pink-800",
115 |                                     "{step + 1}"
116 |                                 }
117 |                                 if index > step {
118 |                                     span {
119 |                                         class: "check bg-pink-800 z-50"
120 |                                     }
121 |                                 }
122 |                             }
123 |                             if step < 3 {
124 |                                 span {
125 |                                     class: if index > step { "line bg-pink-800 h-1 w-10" } else { "line bg-grey-400 h-1 w-10" }
126 |                                 }
127 |                             }
128 |                         }
129 |                     }
130 |                 }
131 |             }
132 |         }
133 |     };
134 | 
135 |     let current_step_content = match current_step() {
136 |         0 => rsx! {
137 |             div {
138 |                 class: "page ml-0 transition-transform duration-300",
139 |                 div {
140 |                     class: "title text-left text-xl font-semibold mb-4",
141 |                     "Personal Information"
142 |                 }
143 |                 Input {
144 |                     r#type: "text",
145 |                     label: "Full Name",
146 |                     handle: input_full_name,
147 |                     placeholder: "Full Name",
148 |                     error_message: "Full name can't be blank!",
149 |                     required: true,
150 |                     valid_handle: full_name_valid,
151 |                     validate_function: validate_input,
152 |                     class: "field mb-6",
153 |                     field_class: "validate-input mb-6",
154 |                     label_class: "label font-semibold text-pink-800",
155 |                     input_class: "w-full border border-pink-800 rounded px-4 py-2",
156 |                     error_class: "text-red-500 text-sm my-2",
157 |                 }
158 |                 Input {
159 |                     r#type: "text",
160 |                     label: "Email",
161 |                     handle: input_email,
162 |                     placeholder: "Email",
163 |                     error_message: "Enter a valid email address!",
164 |                     required: true,
165 |                     valid_handle: email_valid,
166 |                     validate_function: validate_email,
167 |                     class: "field mb-6",
168 |                     field_class: "validate-input mb-6",
169 |                     label_class: "label font-semibold text-pink-800",
170 |                     input_class: "w-full border border-pink-800 rounded px-4 py-2",
171 |                     error_class: "text-red-500 text-sm my-2",
172 |                 }
173 |                 button {
174 |                     class: "next bg-purple-800 hover:bg-purple-700 text-white rounded px-4 mt-10 py-2 w-full font-semibold mb-4",
175 |                     onclick: on_next,
176 |                     "Next"
177 |                 }
178 |             }
179 |         },
180 |         1 => rsx! {
181 |             div {
182 |                 class: "page transition-transform duration-300",
183 |                 div {
184 |                     class: "title text-left text-xl font-semibold mb-4",
185 |                     "Contact Details"
186 |                 }
187 |                 Input {
188 |                     r#type: "tel",
189 |                     label: "Phone Number",
190 |                     handle: input_phone_number,
191 |                     placeholder: "+19999",
192 |                     error_message: "Phone number can't be blank!",
193 |                     required: true,
194 |                     valid_handle: phone_number_valid,
195 |                     validate_function: validate_input,
196 |                     class: "field mb-6",
197 |                     field_class: "flex telephone-input validate-input mb-6",
198 |                     label_class: "label font-semibold text-pink-800",
199 |                     input_class: "w-full border border-pink-800 rounded px-4 py-2",
200 |                     error_class: "text-red-500 text-sm my-2",
201 |                 }
202 |                 Input {
203 |                     r#type: "text",
204 |                     label: "Address",
205 |                     handle: input_address,
206 |                     placeholder: "Address",
207 |                     error_message: "Address can't be blank!",
208 |                     required: true,
209 |                     valid_handle: address_valid,
210 |                     validate_function: validate_input,
211 |                     class: "field mb-6",
212 |                     field_class: "validate-input mb-6",
213 |                     label_class: "label font-semibold text-pink-800",
214 |                     input_class: "w-full border border-pink-800 rounded px-4 py-2",
215 |                     error_class: "text-red-500 text-sm my-2",
216 |                 }
217 |                 div {
218 |                     class: "justify-center flex field btns text-center space-x-5 mt-10",
219 |                     button {
220 |                         class: "prev bg-pink-800 hover:bg-pink-700 text-white rounded px-4 py-2 font-semibold",
221 |                         onclick: on_previous,
222 |                         "Previous"
223 |                     }
224 |                     button {
225 |                         class: "next bg-purple-800 hover:bg-purple-700 text-white rounded px-4 py-2 font-semibold",
226 |                         onclick: on_next,
227 |                         "Next"
228 |                     }
229 |                 }
230 |             }
231 |         },
232 |         2 => rsx! {
233 |             div {
234 |                 class: "page transition-transform duration-300",
235 |                 div {
236 |                     class: "title text-left text-xl font-semibold mb-4",
237 |                     "Date of Birth"
238 |                 }
239 |                 Input {
240 |                     r#type: "date",
241 |                     label: "Date of Birth",
242 |                     handle: input_birthday,
243 |                     placeholder: "Birthday",
244 |                     error_message: "Birthday can't be blank!",
245 |                     required: true,
246 |                     valid_handle: birthday_valid,
247 |                     validate_function: validate_input,
248 |                     class: "field mb-6",
249 |                     field_class: "validate-input mb-6",
250 |                     label_class: "label font-semibold text-pink-800",
251 |                     input_class: "w-full border border-pink-800 rounded px-4 py-2",
252 |                     error_class: "text-red-500 text-sm my-2",
253 |                 }
254 |                 div {
255 |                     class: "field mb-6",
256 |                     div {
257 |                         class: "label font-semibold text-pink-800",
258 |                         "Gender"
259 |                     }
260 |                     select {
261 |                         class: "w-full border border-pink-800 rounded px-4 py-2",
262 |                         id: "gender",
263 |                         required: true,
264 |                         aria_placeholder: "Gender",
265 |                         oninput: on_gender_change,
266 |                         option { "Male" }
267 |                         option { "Female" }
268 |                         option { "Non-binary" }
269 |                         option { "Other" }
270 |                     }
271 |                 }
272 |                 if !gender_valid() {
273 |                     div {
274 |                         class: "error-txt text-red-500 text-sm my-2",
275 |                         "Gender can't be blank!"
276 |                     }
277 |                 }
278 |                 div {
279 |                     class: "justify-center flex field btns text-center space-x-5 mt-10",
280 |                     button {
281 |                         class: "prev bg-pink-800 hover:bg-pink-700 text-white rounded px-4 py-2 font-semibold",
282 |                         onclick: on_previous,
283 |                         "Previous"
284 |                     }
285 |                     button {
286 |                         class: "next bg-purple-800 hover:bg-purple-700 text-white rounded px-4 py-2 font-semibold",
287 |                         onclick: on_next,
288 |                         "Next"
289 |                     }
290 |                 }
291 |             }
292 |         },
293 |         3 => rsx! {
294 |             div {
295 |                 class: "page transition-transform duration-300",
296 |                 div {
297 |                     class: "title text-left text-xl font-semibold mb-4",
298 |                     "Account Details"
299 |                 }
300 |                 Input {
301 |                     r#type: "text",
302 |                     label: "Username",
303 |                     handle: input_username,
304 |                     placeholder: "Username",
305 |                     error_message: "Username can't be blank!",
306 |                     required: true,
307 |                     valid_handle: username_valid,
308 |                     validate_function: validate_input,
309 |                     class: "field mb-6",
310 |                     field_class: "validate-input mb-6",
311 |                     label_class: "label font-semibold text-pink-800",
312 |                     input_class: "w-full border border-pink-800 rounded px-4 py-2",
313 |                     error_class: "text-red-500 text-sm my-2",
314 |                 }
315 |                 Input {
316 |                     r#type: "password",
317 |                     label: "Password",
318 |                     handle: input_password,
319 |                     placeholder: "Password",
320 |                     error_message: "Password can't be blank!",
321 |                     required: true,
322 |                     valid_handle: password_valid,
323 |                     validate_function: validate_input,
324 |                     field_class: "relative mt-2 mb-2",
325 |                     input_class: "input w-full px-4 py-2 rounded border border-pink-800 bg-gray-100",
326 |                     error_class: "text-red-500 absolute text-sm",
327 |                     eye_active: "cursor-pointer absolute right-4 top-1/2 transform -translate-y-1/2 text-2xl text-gray-600 toggle-button fa fa-eye",
328 |                     eye_disabled: "cursor-pointer absolute right-4 top-1/2 transform -translate-y-1/2 text-2xl text-gray-600 toggle-button fa fa-eye-slash",
329 |                 }
330 |                 div {
331 |                     class: "justify-center flex field btns text-center space-x-5 mt-10",
332 |                     button {
333 |                         class: "prev bg-pink-800 hover:bg-pink-700 text-white rounded px-4 py-2 font-semibold",
334 |                         onclick: on_previous,
335 |                         "Previous"
336 |                     }
337 |                     button {
338 |                         class: "submit bg-purple-800 hover:bg-purple-700 text-white rounded px-4 py-2 font-semibold",
339 |                         "Submit"
340 |                     }
341 |                 }
342 |             }
343 |         },
344 |         _ => rsx! {},
345 |     };
346 | 
347 |     rsx! {
348 |         div {
349 |             class: "text-black min-h-screen bg-gradient-to-tr from-indigo-500 to-pink-500 flex items-center justify-center",
350 |             style: "border: none; width: 100vw; height: 100vh; overflow: hidden; position: fixed; top: 0; left: 0;",
351 |             div {
352 |                 class: "container mx-auto p-10 bg-white text-center rounded w-2/3 md:w-1/3 lg:w-1/3",
353 |                 if !error().is_empty() {
354 |                     div {
355 |                         class: "error bg-red-600 text-white px-4 py-3 mb-5 font-semibold rounded-md text-center text-base",
356 |                         "{error()}"
357 |                     }
358 |                 }
359 |                 header {
360 |                     class: "text-4xl font-semibold mb-3",
361 |                     "Multi-Step Form"
362 |                 }
363 |                 div {
364 |                     class: "flex items-center text-left justify-center my-10",
365 |                     { render_progress_item(current_step())}
366 |                 }
367 |                 div {
368 |                     class: "form-outer slide-page text-left",
369 |                     {current_step_content}
370 |                 }
371 |             }
372 |         }
373 |     }
374 | }
375 | 


--------------------------------------------------------------------------------
/examples/leptos/Cargo.toml:
--------------------------------------------------------------------------------
 1 | [package]
 2 | name = "leptos-input-rs"
 3 | version = "0.1.0"
 4 | edition = "2021"
 5 | 
 6 | [dependencies]
 7 | console_error_panic_hook = "0.1.7"
 8 | input-rs = { path = "../../", features = ["lep"] }
 9 | leptos = { version = "0.7.2", features = ["csr"] }
10 | regex = "1.11.1"
11 | serde = "1.0.215"
12 | wasm-logger = "0.2.0"
13 | 


--------------------------------------------------------------------------------
/examples/leptos/README.md:
--------------------------------------------------------------------------------
 1 | # 📚 Input RS Leptos Example
 2 | 
 3 | ## 🛠️ Pre-requisites:
 4 | 
 5 | ### 🐧 **Linux Users**
 6 | 
 7 | 1. **Install [`rustup`](https://www.rust-lang.org/tools/install)**:
 8 | 
 9 |    ```sh
10 |    curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
11 |    ```
12 | 
13 | 1. **Install [`trunk`](https://trunkrs.dev/)**:
14 | 
15 |    ```sh
16 |    cargo install --locked trunk
17 |    ```
18 | 
19 | 1. **Add the Wasm target**:
20 | 
21 |    ```sh
22 |    rustup target add wasm32-unknown-unknown
23 |    ```
24 | 
25 | ### 🪟 **Windows Users**
26 | 
27 | 1. **Download and install `rustup`**: Follow the installation instructions [here](https://www.rust-lang.org/tools/install).
28 | 
29 | 1. **Install [Windows Subsystem for Linux (WSL)](https://learn.microsoft.com/en-us/windows/wsl/install)**: Open PowerShell as administrator and run:
30 | 
31 |    ```sh
32 |    wsl --install
33 |    ```
34 | 
35 | 1. **Reset Network Stack**: In PowerShell (administrator mode), run:
36 | 
37 |    ```sh
38 |    netsh int ip reset all
39 |    netsh winsock reset
40 |    ```
41 | 
42 | 1. **Install Linux packages in WSL**: Once inside your WSL terminal, update and install required dependencies:
43 | 
44 |    ```sh
45 |    sudo apt update
46 |    sudo apt install build-essential pkg-config libudev-dev
47 |    ```
48 | 
49 | 1. **Install `trunk`**:
50 | 
51 |    ```sh
52 |    cargo install --locked trunk
53 |    ```
54 | 
55 | 1. **Add the Wasm target**:
56 | 
57 |    ```sh
58 |    rustup target add wasm32-unknown-unknown
59 |    ```
60 | 
61 | ## 🚀 Building and Running
62 | 
63 | 1. Fork/Clone the GitHub repository.
64 | 
65 |    ```bash
66 |    git clone https://github.com/opensass/input-rs
67 |    ```
68 | 
69 | 1. Navigate to the application directory.
70 | 
71 |    ```bash
72 |    cd input-rs/examples/leptos
73 |    ```
74 | 
75 | 1. Run the client:
76 | 
77 |    ```sh
78 |    trunk serve --port 3000
79 |    ```
80 | 
81 | Navigate to http://localhost:3000 to explore all available components.
82 | 


--------------------------------------------------------------------------------
/examples/leptos/index.html:
--------------------------------------------------------------------------------
1 | <!doctype html>
2 | <html>
3 |   <head>
4 |     <link href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
5 |     <script src="https://kit.fontawesome.com/8f223ead6e.js" crossorigin="anonymous"></script>
6 |     <link data-trunk rel="rust"/>
7 |     <base data-trunk-public-url />
8 |   </head>
9 | </html>


--------------------------------------------------------------------------------
/examples/leptos/src/main.rs:
--------------------------------------------------------------------------------
  1 | use input_rs::leptos::Input;
  2 | use leptos::{prelude::*, task::spawn_local};
  3 | use regex::Regex;
  4 | use serde::{Deserialize, Serialize};
  5 | use leptos::logging::log;
  6 | 
  7 | #[derive(Debug, Default, Clone, Serialize, Deserialize)]
  8 | struct LoginUserSchema {
  9 |     email: String,
 10 |     password: String,
 11 | }
 12 | 
 13 | fn validate_email(email: String) -> bool {
 14 |     let pattern = Regex::new(r"^[^ ]+@[^ ]+\.[a-z]{2,3}$").unwrap();
 15 |     pattern.is_match(&email)
 16 | }
 17 | 
 18 | fn validate_password(password: String) -> bool {
 19 |     !&password.is_empty()
 20 | }
 21 | 
 22 | #[component]
 23 | pub fn App() -> impl IntoView {
 24 |     view! {
 25 |         <LoginForm />
 26 |     }
 27 | }
 28 | 
 29 | #[component]
 30 | fn LoginForm() -> impl IntoView {
 31 |     let error_handle = signal(String::default());
 32 |     let error = error_handle.0.get();
 33 | 
 34 |     let email_valid_handle = signal(true);
 35 |     let email_valid = email_valid_handle.0.get();
 36 | 
 37 |     let password_valid_handle = signal(true);
 38 |     let password_valid = password_valid_handle.0.get();
 39 | 
 40 |     let email_handle = signal(String::default());
 41 |     let email = email_handle.0.get();
 42 | 
 43 |     let password_handle = signal(String::default());
 44 |     let password = password_handle.0.get();
 45 | 
 46 |     let onsubmit = move |ev: leptos::ev::SubmitEvent| {
 47 |         ev.prevent_default();
 48 | 
 49 |         let email_ref = email.clone();
 50 |         let password_ref = password.clone();
 51 |         let error_handle = error_handle.clone();
 52 | 
 53 |         spawn_local(async move {
 54 |             if email_valid && password_valid {
 55 |                 // API call
 56 |                 log!(
 57 |                     "Logged in with Email: {}, Password: {}",
 58 |                     email_ref,
 59 |                     password_ref
 60 |                 );
 61 |             } else {
 62 |                 error_handle
 63 |                     .1
 64 |                     .set("Please provide a valid email and password!".to_string());
 65 |             }
 66 |         });
 67 |     };
 68 | 
 69 |     view! {
 70 |         <div class="text-black min-h-screen bg-gradient-to-tr from-indigo-500 to-pink-500 flex items-center justify-center"
 71 |             style="border: none; width: 100vw; height: 100vh; overflow: hidden; position: fixed; top: 0; left: 0;"
 72 |             role="main" aria-label="Sign In Form">
 73 |             // TODO: Why the flex styling is not applied?
 74 |             // <div class="w-96 bg-white rounded-lg shadow-lg p-8">
 75 |             //     <h2 class="text-4xl text-gray-800 pb-6">{"Sign In"}</h2>
 76 |             //     { move || if !error.is_empty() {
 77 |             //             Some(view! {<div class="mb-3 error bg-red-600 text-white px-4 py-3 font-semibold rounded-md text-center text-base">error</div>})
 78 |             //         }
 79 |             //         else {None}
 80 |             //     }
 81 |             // </div>
 82 |             <form on:submit={onsubmit}>
 83 |                 <Input
 84 |                     r#type="text"
 85 |                     handle={email_handle}
 86 |                     name="email"
 87 |                     label="Email"
 88 |                     placeholder="Your Email"
 89 |                     icon_class="text-2xl fa fa-person text-gray-500 absolute left-3 top-1/2 transform -translate-y-1/2"
 90 |                     field_class="relative"
 91 |                     input_class="input w-full px-4 py-3 rounded-lg border border-gray-300 bg-gray-100 pl-12"
 92 |                     error_class="text-red-500 absolute text-sm mb-2"
 93 |                     required=true
 94 |                     valid_handle={email_valid_handle}
 95 |                     validate_function={validate_email}
 96 |                     error_message="Enter a valid email address"
 97 |                 />
 98 |                 <Input
 99 |                     r#type="password"
100 |                     handle={password_handle}
101 |                     name="password"
102 |                     label="Password"
103 |                     placeholder="Password"
104 |                     icon_class="text-2xl fa fa-lock text-gray-500 absolute left-3 top-1/2 transform -translate-y-1/2"
105 |                     field_class="relative mt-2 mb-2"
106 |                     input_class="input w-full px-4 py-3 rounded-lg border border-gray-300 bg-gray-100 pl-12"
107 |                     error_class="text-red-500 absolute text-sm"
108 |                     required=true
109 |                     valid_handle={password_valid_handle}
110 |                     validate_function={validate_password}
111 |                     error_message="Password can't be blank!"
112 |                     eye_active="cursor-pointer absolute right-4 top-1/2 transform -translate-y-1/2 text-2xl text-gray-600 toggle-button fa fa-eye"
113 |                     eye_disabled="cursor-pointer absolute right-4 top-1/2 transform -translate-y-1/2 text-2xl text-gray-600 toggle-button fa fa-eye-slash"
114 |                 />
115 |                 <div class="w-full">
116 |                     <button type="submit" class="btn-social bg-indigo-600 hover:bg-indigo-700 text-white w-full py-3 rounded-lg text-base font-medium tracking-wide">
117 |                         <i class="fa fa-box-arrow-in-right me-2"></i>
118 |                         {"Sign In"}
119 |                     </button>
120 |                 </div>
121 |                 <div class="w-full text-center">
122 |                     <span class="text-base text-gray-800">{"Not a member?"}</span>
123 |                     <a href="#" class="text-base text-gray-800">{"Sign Up Now"}</a>
124 |                 </div>
125 |                 <div class="mt-8">
126 |                     <div class="relative text-center text-gray-800 mt-4">
127 |                         <span class="px-4 bg-white relative z-10">{"Or Sign In With"}</span>
128 |                         <div class="absolute inset-0 flex items-center">
129 |                             <div class="w-full h-px bg-gray-400"></div>
130 |                         </div>
131 |                     </div>
132 |                     <div class="flex justify-center space-x-4 mt-12">
133 |                         <button class="btn-social bg-blue-600 hover:bg-blue-700 text-white w-12 h-12 rounded-lg text-xl leading-12" aria-label="Sign in with Facebook">
134 |                             <i class="fa fa-facebook"></i>
135 |                         </button>
136 |                         <button class="btn-social bg-red-600 hover:bg-red-700 text-white w-12 h-12 rounded-lg text-xl leading-12" aria-label="Sign in with Google">
137 |                             <i class="fa fa-google"></i>
138 |                         </button>
139 |                         <button class="btn-social bg-blue-400 hover:bg-blue-500 text-white w-12 h-12 rounded-lg text-xl leading-12" aria-label="Sign in with Twitter">
140 |                             <i class="fa fa-twitter"></i>
141 |                         </button>
142 |                         <button class="btn-social bg-blue-900 hover:bg-blue-800 text-white w-12 h-12 rounded-lg text-xl leading-12" aria-label="Sign in with LinkedIn">
143 |                             <i class="fa fa-linkedin"></i>
144 |                         </button>
145 |                     </div>
146 |                 </div>
147 |             </form>
148 |         </div>
149 |     }
150 | }
151 | 
152 | fn main() {
153 |     console_error_panic_hook::set_once();
154 |     wasm_logger::init(wasm_logger::Config::default());
155 |     leptos::mount::mount_to_body(|| view! { <App/> })
156 | }
157 | 


--------------------------------------------------------------------------------
/examples/yew/.gitignore:
--------------------------------------------------------------------------------
1 | target/**/*


--------------------------------------------------------------------------------
/examples/yew/Cargo.toml:
--------------------------------------------------------------------------------
 1 | [package]
 2 | name = "yew-input-rs"
 3 | version = "0.1.0"
 4 | authors = ["Mahmoud Harmouch <oss@wiseai.dev>"]
 5 | edition = "2021"
 6 | 
 7 | # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 8 | 
 9 | [dependencies]
10 | input-rs = { path = "../..", features = ["yew"] }
11 | regex = { version = "1.9.1", default-features = false }
12 | reqwasm = { version = "0.5.0", default-features = false }
13 | serde = { version = "1.0.178", default-features = false }
14 | serde_json = { version = "1.0.104", default-features = false }
15 | wasm-bindgen = { version = "0.2.87", default-features = false }
16 | wasm-bindgen-futures = { version = "0.4.37", default-features = false }
17 | web-sys = { version = "0.3.64", default-features = false }
18 | yew = { version = "0.21.0", features = ["csr"], default-features = false }
19 | yew-router = { version = "0.18.0", default-features = false }
20 | 
21 | [profile.release]
22 | codegen-units = 1
23 | opt-level = "z"
24 | lto = "thin"
25 | strip = "symbols"
26 | 


--------------------------------------------------------------------------------
/examples/yew/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "[]"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 |    Copyright 2023 Mahmoud Harmouch
190 | 
191 |    Licensed under the Apache License, Version 2.0 (the "License");
192 |    you may not use this file except in compliance with the License.
193 |    You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 |    Unless required by applicable law or agreed to in writing, software
198 |    distributed under the License is distributed on an "AS IS" BASIS,
199 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 |    See the License for the specific language governing permissions and
201 |    limitations under the License.
202 | 


--------------------------------------------------------------------------------
/examples/yew/README.md:
--------------------------------------------------------------------------------
  1 | # 📚 Input RS Yew Tailwind Components
  2 | 
  3 | ## 🛠️ Pre-requisites:
  4 | 
  5 | ### 🐧 **Linux Users**
  6 | 
  7 | 1. **Install [`rustup`](https://www.rust-lang.org/tools/install)**:
  8 | 
  9 |    ```sh
 10 |    curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
 11 |    ```
 12 | 
 13 | 1. **Install [`trunk`](https://trunkrs.dev/)**:
 14 | 
 15 |    ```sh
 16 |    cargo install --locked trunk
 17 |    ```
 18 | 
 19 | 1. **Add the Wasm target**:
 20 | 
 21 |    ```sh
 22 |    rustup target add wasm32-unknown-unknown
 23 |    ```
 24 | 
 25 | ### 🪟 **Windows Users**
 26 | 
 27 | 1. **Download and install `rustup`**: Follow the installation instructions [here](https://www.rust-lang.org/tools/install).
 28 | 
 29 | 1. **Install [Windows Subsystem for Linux (WSL)](https://learn.microsoft.com/en-us/windows/wsl/install)**: Open PowerShell as administrator and run:
 30 | 
 31 |    ```sh
 32 |    wsl --install
 33 |    ```
 34 | 
 35 | 1. **Reset Network Stack**: In PowerShell (administrator mode), run:
 36 | 
 37 |    ```sh
 38 |    netsh int ip reset all
 39 |    netsh winsock reset
 40 |    ```
 41 | 
 42 | 1. **Install Linux packages in WSL**: Once inside your WSL terminal, update and install required dependencies:
 43 | 
 44 |    ```sh
 45 |    sudo apt update
 46 |    sudo apt install build-essential pkg-config libudev-dev
 47 |    ```
 48 | 
 49 | 1. **Install `trunk`**:
 50 | 
 51 |    ```sh
 52 |    cargo install --locked trunk
 53 |    ```
 54 | 
 55 | 1. **Add the Wasm target**:
 56 | 
 57 |    ```sh
 58 |    rustup target add wasm32-unknown-unknown
 59 |    ```
 60 | 
 61 | ## 🚀 Building and Running
 62 | 
 63 | 1. Fork/Clone the GitHub repository.
 64 | 
 65 |    ```bash
 66 |    git clone https://github.com/opensass/input-rs
 67 |    ```
 68 | 
 69 | 1. Navigate to the application directory.
 70 | 
 71 |    ```bash
 72 |    cd input-rs/examples/yew
 73 |    ```
 74 | 
 75 | 1. Run the client:
 76 | 
 77 |    ```sh
 78 |    trunk serve --port 3000
 79 |    ```
 80 | 
 81 | Navigate to http://localhost:3000 to explore all available components.
 82 | 
 83 | ## 🌀 Tailwind CSS Components
 84 | 
 85 | This section lists components implemented using the [Tailwind CSS](https://tailwindcss.com/) framework.
 86 | 
 87 | ### 🔐 Login Forms
 88 | 
 89 | | ID | Preview | Demo | Localhost |
 90 | |---|---|---|---|
 91 | | 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) |
 92 | | 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) |
 93 | | 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) |
 94 | 
 95 | ### 📬 Contact Forms
 96 | 
 97 | | ID | Preview | Demo | Localhost |
 98 | |---|---|---|---|
 99 | | 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) |
100 | 
101 | ### 🔢 Multi-Steps Forms
102 | 
103 | | ID | Preview | Demo | Localhost |
104 | |---|---|---|---|
105 | | 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) |
106 | 


--------------------------------------------------------------------------------
/examples/yew/Trunk.toml:
--------------------------------------------------------------------------------
1 | [tools]
2 | tailwindcss = "3.4.17"
3 | 


--------------------------------------------------------------------------------
/examples/yew/_redirects:
--------------------------------------------------------------------------------
1 | /* /index.html 200


--------------------------------------------------------------------------------
/examples/yew/assets/contact-form-one.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/opensass/input-rs/a8cde136407a8507430fc95e2fe90c0afbc39388/examples/yew/assets/contact-form-one.png


--------------------------------------------------------------------------------
/examples/yew/assets/form-one.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/opensass/input-rs/a8cde136407a8507430fc95e2fe90c0afbc39388/examples/yew/assets/form-one.png


--------------------------------------------------------------------------------
/examples/yew/assets/form-three.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/opensass/input-rs/a8cde136407a8507430fc95e2fe90c0afbc39388/examples/yew/assets/form-three.png


--------------------------------------------------------------------------------
/examples/yew/assets/form-two.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/opensass/input-rs/a8cde136407a8507430fc95e2fe90c0afbc39388/examples/yew/assets/form-two.png


--------------------------------------------------------------------------------
/examples/yew/assets/multi-step-form-one.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/opensass/input-rs/a8cde136407a8507430fc95e2fe90c0afbc39388/examples/yew/assets/multi-step-form-one.png


--------------------------------------------------------------------------------
/examples/yew/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link data-trunk rel="tailwind-css" href="src/tailwind.css"/>
 6 |     <script
 7 |       src="https://kit.fontawesome.com/8f223ead6e.js"
 8 |       crossorigin="anonymous"
 9 |       defer
10 |     ></script>
11 |     <link data-trunk rel="rust"/>
12 |     <title>Yew Tailwind Forms</title>
13 |     <base data-trunk-public-url />
14 |   </head>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/examples/yew/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/examples/yew/rustfmt.toml:
--------------------------------------------------------------------------------
1 | edition = "2021"


--------------------------------------------------------------------------------
/examples/yew/src/api.rs:
--------------------------------------------------------------------------------
1 | pub mod auth;
2 | 


--------------------------------------------------------------------------------
/examples/yew/src/api/auth.rs:
--------------------------------------------------------------------------------
 1 | use reqwasm::http::{Request, RequestCredentials};
 2 | use serde::{Deserialize, Serialize};
 3 | use serde_json::json;
 4 | 
 5 | const BASE_URL: &str = "http://localhost:8080/api/v1";
 6 | 
 7 | #[derive(Serialize, Deserialize, Debug)]
 8 | pub struct UserLoginResponse {
 9 |     pub status: String,
10 |     pub token: String,
11 | }
12 | 
13 | #[derive(Serialize, Deserialize, Debug)]
14 | pub struct ErrorResponse {
15 |     pub status: String,
16 |     pub message: String,
17 | }
18 | 
19 | pub async fn login_user(username: String, password: String) -> Result<UserLoginResponse, String> {
20 |     let response = match Request::post(&format!("{}/auth/login", BASE_URL))
21 |         .header("Content-Type", "application/json")
22 |         .credentials(RequestCredentials::Include)
23 |         .body(
24 |             json!({
25 |                 "username": username,
26 |                 "password": password
27 |             })
28 |             .to_string(),
29 |         )
30 |         .send()
31 |         .await
32 |     {
33 |         Ok(res) => res,
34 |         Err(_) => {
35 |             return Err("Network Error!".to_string());
36 |         }
37 |     };
38 | 
39 |     if response.status() != 200 {
40 |         let error_response = response.json::<ErrorResponse>().await;
41 |         if let Ok(error_response) = error_response {
42 |             return Err(error_response.message);
43 |         } else {
44 |             return Err(format!("Network Error: {}", response.status()));
45 |         }
46 |     }
47 | 
48 |     let res_json = response.json::<UserLoginResponse>().await;
49 |     match res_json {
50 |         Ok(data) => Ok(data),
51 |         Err(_) => Err("Failed to parse response".to_string()),
52 |     }
53 | }
54 | 


--------------------------------------------------------------------------------
/examples/yew/src/app.rs:
--------------------------------------------------------------------------------
 1 | use yew::prelude::*;
 2 | use yew_router::prelude::*;
 3 | 
 4 | use crate::router::{switch, Route};
 5 | 
 6 | #[function_component(App)]
 7 | pub fn app() -> Html {
 8 |     html! {
 9 |       <BrowserRouter>
10 |            <Switch<Route> render={switch} />
11 |       </BrowserRouter>
12 |     }
13 | }
14 | 


--------------------------------------------------------------------------------
/examples/yew/src/components.rs:
--------------------------------------------------------------------------------
1 | pub mod common;
2 | pub mod contact_form_one;
3 | pub mod login_form_one;
4 | pub mod login_form_three;
5 | pub mod login_form_two;
6 | pub mod multi_step_form_one;
7 | 


--------------------------------------------------------------------------------
/examples/yew/src/components/common.rs:
--------------------------------------------------------------------------------
 1 | use regex::Regex;
 2 | use serde::{Deserialize, Serialize};
 3 | 
 4 | #[derive(Debug, Default, Clone, Serialize, Deserialize)]
 5 | pub struct LoginUserSchema {
 6 |     email: String,
 7 |     password: String,
 8 | }
 9 | 
10 | pub fn validate_email(email: String) -> bool {
11 |     let pattern = Regex::new(r"^[^ ]+@[^ ]+\.[a-z]{2,3}$").unwrap();
12 |     pattern.is_match(&email)
13 | }
14 | 
15 | pub fn validate_input(field: String) -> bool {
16 |     !&field.is_empty()
17 | }
18 | 


--------------------------------------------------------------------------------
/examples/yew/src/components/contact_form_one.rs:
--------------------------------------------------------------------------------
  1 | use crate::components::common::{validate_email, validate_input, LoginUserSchema};
  2 | use input_rs::yew::Input;
  3 | use serde::{Deserialize, Serialize};
  4 | use wasm_bindgen_futures::spawn_local;
  5 | use web_sys::{console, HtmlInputElement, Window};
  6 | use yew::prelude::*;
  7 | 
  8 | use crate::api::auth::login_user;
  9 | 
 10 | #[function_component(ContactFormOne)]
 11 | pub fn contact_form_one() -> Html {
 12 |     let error_handle = use_state(String::default);
 13 |     let error = (*error_handle).clone();
 14 | 
 15 |     let email_valid_handle = use_state(|| true);
 16 |     let email_valid = (*email_valid_handle).clone();
 17 | 
 18 |     let name_valid_handle = use_state(|| true);
 19 |     let name_valid = (*name_valid_handle).clone();
 20 | 
 21 |     let subject_valid_handle = use_state(|| true);
 22 |     let subject_valid = (*subject_valid_handle).clone();
 23 | 
 24 |     let message_valid_handle = use_state(|| true);
 25 |     let message_valid = (*message_valid_handle).clone();
 26 | 
 27 |     let input_email_ref = use_node_ref();
 28 |     let input_email_handle = use_state(String::default);
 29 |     let input_email = (*input_email_handle).clone();
 30 | 
 31 |     let input_name_ref = use_node_ref();
 32 |     let input_name_handle = use_state(|| "afasfasf".to_string());
 33 |     let input_name = (*input_name_handle).clone();
 34 | 
 35 |     let input_subject_ref = use_node_ref();
 36 |     let input_subject_handle = use_state(String::default);
 37 |     let input_subject = (*input_subject_handle).clone();
 38 | 
 39 |     let input_message_ref = use_node_ref();
 40 |     let input_message_handle = use_state(String::default);
 41 |     let input_message = (*input_message_handle).clone();
 42 | 
 43 |     let onsubmit = Callback::from(move |event: SubmitEvent| {
 44 |         event.prevent_default();
 45 | 
 46 |         let email_ref = input_email.clone();
 47 |         let name_ref = input_name.clone();
 48 |         let subject_ref = input_subject.clone();
 49 |         let message_ref = input_message.clone();
 50 |         let error_handle = error_handle.clone();
 51 |         console::log_1(
 52 |             &format!(
 53 |                 "Email: {}, Name: {}, Subject: {}, Message: {}",
 54 |                 input_email, input_name, input_subject, input_message
 55 |             )
 56 |             .into(),
 57 |         );
 58 | 
 59 |         spawn_local(async move {
 60 |             let email_val = email_ref.clone();
 61 |             let _name_val = name_ref.clone();
 62 |             let subject_val = subject_ref.clone();
 63 |             let _message_val = message_ref.clone();
 64 | 
 65 |             let error_handle = error_handle.clone();
 66 |             if email_valid && name_valid && subject_valid && message_valid {
 67 |                 // TODO: create a contact us endpoint
 68 |                 let response = login_user(email_val.to_string(), subject_val.to_string()).await;
 69 |                 match response {
 70 |                     Ok(_) => {
 71 |                         console::log_1(&"success".into());
 72 |                         let window: Window = web_sys::window().expect("window not available");
 73 |                         let location = window.location();
 74 |                         let _ = location.set_href("/home");
 75 |                     }
 76 |                     Err(err) => {
 77 |                         error_handle.set(err);
 78 |                     }
 79 |                 }
 80 |             } else {
 81 |                 error_handle.set("Please provide valid contact information!".into());
 82 |             }
 83 |         });
 84 |     });
 85 | 
 86 |     html! {
 87 |         <section class="bg-gradient-to-r from-purple-500 to-yellow-700 h-screen">
 88 |             <div class="flex items-center justify-center h-full">
 89 |                 <div
 90 |                     class="w-full max-w-5xl bg-white rounded-lg overflow-hidden shadow-lg p-8 mx-4 md:mx-8 md:grid md:grid-cols-2 md:gap-10"
 91 |                 >
 92 |                     <div
 93 |                         class="contact1-pic hidden md:block w-full mb-6 md:mb-0 md:mr-6 flex justify-center items-center"
 94 |                     >
 95 |                         <img
 96 |                             src="https://cdn.pixabay.com/photo/2023/06/09/19/37/letter-8052497_960_720.png"
 97 |                             alt="Contact Image"
 98 |                             class="w-full max-w-2xl h-auto"
 99 |                             role="img"
100 |                             aria-label="Contact Image"
101 |                         />
102 |                     </div>
103 |                     <form class="w-full flex-grow" aria-label="Contact Form" onsubmit={onsubmit}>
104 |                         if !error.is_empty() {
105 |                             <div
106 |                                 class="mb-3 error bg-red-600 text-white px-4 py-3 font-semibold rounded-md text-center text-base"
107 |                             >
108 |                                 { error }
109 |                             </div>
110 |                         }
111 |                         <span class="text-3xl font-bold text-gray-900 block text-center mb-6">
112 |                             { "Contact US" }
113 |                         </span>
114 |                         <Input
115 |                             r#type="text"
116 |                             handle={input_name_handle}
117 |                             name="name"
118 |                             r#ref={input_name_ref}
119 |                             placeholder="Your Name"
120 |                             error_message="Name can't be blank"
121 |                             field_class="wrap-input1 validate-input mb-6"
122 |                             class="w-full bg-gray-200 focus:bg-white border border-transparent rounded-lg px-4 py-3 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-teal-600 text-gray-900"
123 |                             error_class="text-red-500 text-sm mb-2"
124 |                             required=true
125 |                             valid_handle={name_valid_handle}
126 |                             validate_function={validate_input}
127 |                         />
128 |                         <Input
129 |                             r#type="text"
130 |                             handle={input_email_handle}
131 |                             name="email"
132 |                             r#ref={input_email_ref}
133 |                             placeholder="Your Email"
134 |                             error_message="Enter a valid email address"
135 |                             field_class="wrap-input1 validate-input mb-6"
136 |                             class="w-full bg-gray-200 focus:bg-white border border-transparent rounded-lg px-4 py-3 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-teal-600 text-gray-900"
137 |                             error_class="text-red-500 text-sm mb-2"
138 |                             required=true
139 |                             valid_handle={email_valid_handle}
140 |                             validate_function={validate_email}
141 |                         />
142 |                         <Input
143 |                             r#type="text"
144 |                             handle={input_subject_handle}
145 |                             name="subject"
146 |                             r#ref={input_subject_ref}
147 |                             placeholder="Your Subject"
148 |                             error_message="Subject can't be blank"
149 |                             field_class="wrap-input1 validate-input mb-6"
150 |                             class="w-full bg-gray-200 focus:bg-white border border-transparent rounded-lg px-4 py-3 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-teal-600 text-gray-900"
151 |                             error_class="text-red-500 text-sm mb-2"
152 |                             required=true
153 |                             valid_handle={subject_valid_handle}
154 |                             validate_function={validate_input}
155 |                         />
156 |                         <Input
157 |                             r#type="textarea"
158 |                             handle={input_message_handle}
159 |                             name="message"
160 |                             r#ref={input_message_ref}
161 |                             placeholder="Your Message"
162 |                             error_message="Message can't be blank"
163 |                             field_class="wrap-input1 validate-input mb-6"
164 |                             class="w-full bg-gray-200 focus:bg-white border border-transparent rounded-lg px-4 py-3 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-teal-600 text-gray-900"
165 |                             error_class="text-red-500 text-sm mb-2"
166 |                             required=true
167 |                             valid_handle={message_valid_handle}
168 |                             validate_function={validate_input}
169 |                         />
170 |                         <div class="container-contact1-form-btn">
171 |                             <button
172 |                                 class="w-full bg-green-500 hover:bg-green-600 text-white font-bold py-3 rounded-lg transition duration-300"
173 |                                 type="submit"
174 |                                 aria-label="Submit"
175 |                             >
176 |                                 <span>
177 |                                     { "Send Email" }
178 |                                     <i class="fa fa-long-arrow-right ml-2" aria-hidden="true" />
179 |                                 </span>
180 |                             </button>
181 |                         </div>
182 |                     </form>
183 |                 </div>
184 |             </div>
185 |         </section>
186 |     }
187 | }
188 | 


--------------------------------------------------------------------------------
/examples/yew/src/components/login_form_one.rs:
--------------------------------------------------------------------------------
  1 | use crate::components::common::{validate_email, validate_input, LoginUserSchema};
  2 | use input_rs::yew::Input;
  3 | use regex::Regex;
  4 | use wasm_bindgen_futures::spawn_local;
  5 | use web_sys::{console, HtmlInputElement, Window};
  6 | use yew::prelude::*;
  7 | 
  8 | use crate::api::auth::login_user;
  9 | 
 10 | #[function_component(LoginFormOne)]
 11 | pub fn login_form_one() -> Html {
 12 |     let error_handle = use_state(String::default);
 13 |     let error = (*error_handle).clone();
 14 | 
 15 |     let email_valid_handle = use_state(|| true);
 16 |     let email_valid = (*email_valid_handle).clone();
 17 | 
 18 |     let password_valid_handle = use_state(|| true);
 19 |     let password_valid = (*password_valid_handle).clone();
 20 | 
 21 |     let email_ref = use_node_ref();
 22 |     let email_handle = use_state(|| "sad".to_string());
 23 |     let email = (*email_handle).clone();
 24 | 
 25 |     let password_ref = use_node_ref();
 26 |     let password_handle = use_state(|| "sad".to_string());
 27 |     let password = (*password_handle).clone();
 28 | 
 29 |     let onsubmit = Callback::from(move |event: SubmitEvent| {
 30 |         event.prevent_default();
 31 | 
 32 |         let email_ref = password.clone();
 33 |         let password_ref = password.clone();
 34 |         let error_handle = error_handle.clone();
 35 |         console::log_1(&format!("Email: {}, Password: {}", email, password).into());
 36 | 
 37 |         spawn_local(async move {
 38 |             let email_val = email_ref.clone();
 39 |             let password_val = password_ref.clone();
 40 |             let error_handle = error_handle.clone();
 41 |             if email_valid && password_valid {
 42 |                 let response = login_user(email_val.to_string(), password_val.to_string()).await;
 43 |                 match response {
 44 |                     Ok(_) => {
 45 |                         console::log_1(&"success".into());
 46 |                         let window: Window = web_sys::window().expect("window not available");
 47 |                         let location = window.location();
 48 |                         let _ = location.set_href("/error");
 49 |                     }
 50 |                     Err(err) => {
 51 |                         error_handle.set(err);
 52 |                     }
 53 |                 }
 54 |             } else {
 55 |                 error_handle.set("Please provide a valid email and password!".into());
 56 |             }
 57 |         });
 58 |     });
 59 | 
 60 |     html! {
 61 |         <div
 62 |           class="min-h-screen bg-gradient-to-tr from-blue-500 to-purple-600 flex items-center justify-center"
 63 |         >
 64 |           <div class="w-96 bg-white rounded-lg shadow-lg p-8">
 65 |             <form class="flex flex-col space-y-6" onsubmit={onsubmit}>
 66 |               if !error.is_empty() {
 67 |                 <div class="mb-3 error bg-red-600 text-white px-4 py-3 font-semibold rounded-md text-center text-base">{error}</div>
 68 |               }
 69 |               <span class="text-4xl text-gray-800 pb-6">{"Login"}</span>
 70 |               <Input
 71 |                 r#type={"tek"}
 72 |                 label={"Email"}
 73 |                 handle={email_handle}
 74 |                 name={"username"}
 75 |                 r#ref={email_ref}
 76 |                 placeholder={"Your Email"}
 77 |                 icon_class={"text-2xl fa fa-person text-gray-500 absolute left-3 top-1/2 transform -translate-y-1/2"}
 78 |                 error_message={"Enter a valid email address!"}
 79 |                 field_class={"relative"}
 80 |                 input_class={"input w-full px-4 py-3 rounded-lg border border-gray-300 bg-gray-100 pl-12"}
 81 |                 error_class={"text-red-500 absolute text-sm mb-2"}
 82 |                 required={true}
 83 |                 valid_handle={email_valid_handle}
 84 |                 validate_function={validate_email}
 85 |               />
 86 |               <Input
 87 |                 r#type={"password"}
 88 |                 label={"Password"}
 89 |                 handle={password_handle}
 90 |                 name={"password"}
 91 |                 r#ref={password_ref}
 92 |                 placeholder={"Password"}
 93 |                 icon_class={"text-2xl fa fa-lock text-gray-500 absolute left-3 top-1/2 transform -translate-y-1/2"}
 94 |                 error_message={"Password can't be blank!"}
 95 |                 field_class={"relative mt-2 mb-2"}
 96 |                 input_class={"input w-full px-4 py-3 rounded-lg border border-gray-300 bg-gray-100 pl-12"}
 97 |                 error_class={"text-red-500 absolute text-sm"}
 98 |                 required={true}
 99 |                 valid_handle={password_valid_handle}
100 |                 validate_function={validate_input}
101 |                 eye_active={"cursor-pointer absolute right-4 top-1/2 transform -translate-y-1/2 text-2xl text-gray-600 toggle-button fa fa-eye"}
102 |                 eye_disabled={"cursor-pointer absolute right-4 top-1/2 transform -translate-y-1/2 text-2xl text-gray-600 toggle-button fa fa-eye-slash"}
103 |               />
104 |               <div class="w-full">
105 |                 <button
106 |                   class="btn-social bg-indigo-600 hover:bg-indigo-700 text-white w-full py-3 rounded-lg text-base font-medium tracking-wide"
107 |                   type="submit"
108 |                 >
109 |                   <i class="fa fa-box-arrow-in-right me-2"></i>
110 |                   {"Sign In"}
111 |                 </button>
112 |               </div>
113 |               <div class="w-full text-center">
114 |                 <span class="text-base text-gray-800">{"Not a member?"}</span>
115 |                 <a href="#" class="text-base text-gray-800">{"Sign Up Now"}</a>
116 |               </div>
117 |               <div class="mt-8">
118 |                 <div class="relative text-center text-gray-800 mt-4">
119 |                   <span class="px-4 bg-white relative z-10">{"Or Sign In With"}</span>
120 |                   <div class="absolute inset-0 flex items-center">
121 |                     <div class="w-full h-px bg-gray-400"></div>
122 |                   </div>
123 |                 </div>
124 |                 <div class="flex justify-center space-x-4 mt-12">
125 |                   <button
126 |                     class="btn-social bg-blue-600 hover:bg-blue-700 text-white w-12 h-12 rounded-lg text-xl leading-12"
127 |                     aria-label="Sign in with Facebook"
128 |                   >
129 |                     <i class="fa fa-facebook"></i>
130 |                   </button>
131 |                   <button
132 |                     class="btn-social bg-red-600 hover:bg-red-700 text-white w-12 h-12 rounded-lg text-xl leading-12"
133 |                     aria-label="Sign in with Google"
134 |                   >
135 |                     <i class="fa fa-google"></i>
136 |                   </button>
137 |                   <button
138 |                     class="btn-social bg-blue-400 hover:bg-blue-500 text-white w-12 h-12 rounded-lg text-xl leading-12"
139 |                     aria-label="Sign in with Twitter"
140 |                   >
141 |                     <i class="fa fa-twitter"></i>
142 |                   </button>
143 |                   <button
144 |                     class="btn-social bg-blue-900 hover:bg-blue-800 text-white w-12 h-12 rounded-lg text-xl leading-12"
145 |                     aria-label="Sign in with LinkedIn"
146 |                   >
147 |                     <i class="fa fa-linkedin"></i>
148 |                   </button>
149 |                 </div>
150 |               </div>
151 |             </form>
152 |           </div>
153 |         </div>
154 |     }
155 | }
156 | 


--------------------------------------------------------------------------------
/examples/yew/src/components/login_form_three.rs:
--------------------------------------------------------------------------------
  1 | use regex::Regex;
  2 | use serde::{Deserialize, Serialize};
  3 | use wasm_bindgen_futures::spawn_local;
  4 | use web_sys::{console, HtmlInputElement, Window};
  5 | use yew::prelude::*;
  6 | 
  7 | use crate::api::auth::login_user;
  8 | 
  9 | #[derive(Debug, Default, Clone, Serialize, Deserialize)]
 10 | struct LoginUserSchema {
 11 |     email: String,
 12 |     password: String,
 13 | }
 14 | 
 15 | #[function_component(LoginFormThree)]
 16 | pub fn login_form_three() -> Html {
 17 |     let error_handle = use_state(String::default);
 18 |     let error = (*error_handle).clone();
 19 | 
 20 |     let email_valid_handle = use_state(|| true);
 21 |     let email_valid = (*email_valid_handle).clone();
 22 | 
 23 |     let eye_active_handle = use_state(|| false);
 24 |     let eye_active = (*eye_active_handle).clone();
 25 | 
 26 |     let password_valid_handle = use_state(|| true);
 27 |     let password_valid = (*password_valid_handle).clone();
 28 | 
 29 |     let password_type_handle = use_state(|| "text");
 30 |     let password_type = (*password_type_handle).clone();
 31 | 
 32 |     let input_email_ref = use_node_ref();
 33 |     let input_email_handle = use_state(String::default);
 34 |     let input_email = (*input_email_handle).clone();
 35 | 
 36 |     let input_password_ref = use_node_ref();
 37 |     let input_password_handle = use_state(String::default);
 38 |     let input_password = (*input_password_handle).clone();
 39 | 
 40 |     let validate_email = |email: &str| {
 41 |         let pattern = Regex::new(r"^[^ ]+@[^ ]+\.[a-z]{2,3}$").unwrap();
 42 |         pattern.is_match(email)
 43 |     };
 44 | 
 45 |     let validate_password = |password: &str| !password.is_empty();
 46 | 
 47 |     let on_email_change = {
 48 |         let input_email_ref = input_email_ref.clone();
 49 | 
 50 |         Callback::from(move |_| {
 51 |             let input = input_email_ref.cast::<HtmlInputElement>();
 52 | 
 53 |             if let Some(input) = input {
 54 |                 let value = input.value();
 55 |                 input_email_handle.set(value);
 56 |                 email_valid_handle.set(validate_email(&input.value()));
 57 |             }
 58 |         })
 59 |     };
 60 | 
 61 |     let on_password_change = {
 62 |         let input_password_ref = input_password_ref.clone();
 63 | 
 64 |         Callback::from(move |_| {
 65 |             let input = input_password_ref.cast::<HtmlInputElement>();
 66 | 
 67 |             if let Some(input) = input {
 68 |                 let value = input.value();
 69 |                 input_password_handle.set(value);
 70 |                 password_valid_handle.set(validate_password(&input.value()));
 71 |             }
 72 |         })
 73 |     };
 74 | 
 75 |     let onsubmit = Callback::from(move |event: SubmitEvent| {
 76 |         event.prevent_default();
 77 | 
 78 |         let email_ref = input_password.clone();
 79 |         let password_ref = input_password.clone();
 80 |         let error_handle = error_handle.clone();
 81 |         console::log_1(&format!("Email: {}, Password: {}", input_email, input_password).into());
 82 | 
 83 |         spawn_local(async move {
 84 |             let email_val = email_ref.clone();
 85 |             let password_val = password_ref.clone();
 86 |             let error_handle = error_handle.clone();
 87 |             if email_valid && password_valid {
 88 |                 let response = login_user(email_val.to_string(), password_val.to_string()).await;
 89 |                 match response {
 90 |                     Ok(_) => {
 91 |                         console::log_1(&"success".into());
 92 |                         let window: Window = web_sys::window().expect("window not available");
 93 |                         let location = window.location();
 94 |                         let _ = location.set_href("/error");
 95 |                     }
 96 |                     Err(err) => {
 97 |                         error_handle.set(err);
 98 |                     }
 99 |                 }
100 |             } else {
101 |                 error_handle.set("Please provide a valid email and password!".into());
102 |             }
103 |         });
104 |     });
105 | 
106 |     let on_toggle_password = {
107 |         Callback::from(move |_| {
108 |             if eye_active {
109 |                 password_type_handle.set("password".into())
110 |             } else {
111 |                 password_type_handle.set("text".into())
112 |             }
113 |             eye_active_handle.set(!eye_active);
114 |         })
115 |     };
116 | 
117 |     html! {
118 |         <section
119 |             style="background: linear-gradient(135deg, #008080, #800080)"
120 |             class="min-h-screen flex justify-center items-center"
121 |         >
122 |             <button
123 |                 class="dark-mode-toggle text-white text-2xl absolute top-8 right-8 cursor-pointer transition-colors hover:text-gray-50"
124 |                 aria-label="Toggle Dark Mode"
125 |             >
126 |                 <i class="fas fa-sun" />
127 |             </button>
128 |             <div
129 |                 class="login-container w-11/12 md:w-2/3 lg:w-1/2 max-w-screen-md p-10 bg-white bg-opacity-90 border border-blue-500 rounded-lg relative"
130 |             >
131 |                 <div class="flex flex-wrap-reverse justify-end items-center">
132 |                     <div
133 |                         class="image-placeholder flex-1 h-96 md:block hidden bg-cover bg-no-repeat bg-center mr-10"
134 |                         style="
135 |                   background-image: url('https://images.unsplash.com/photo-1584713503693-bb386ec95cf2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80');
136 |                 "
137 |                         aria-hidden="true"
138 |                     />
139 |                     <div class="form-container flex-1 max-w-xs">
140 |                         <h2 class="text-blue-500 text-3xl font-semibold mb-6 text-center">
141 |                             { "Welcome Back!" }
142 |                         </h2>
143 |                         <form onsubmit={onsubmit}>
144 |                             if !error.is_empty() {
145 |                                 <div
146 |                                     class="bg-red-600 text-white py-3 font-bold rounded-md text-center mb-4 text-lg"
147 |                                 >
148 |                                     { error }
149 |                                 </div>
150 |                             }
151 |                             <div class="mb-4">
152 |                                 <label for="username" class="text-gray-600 font-semibold">
153 |                                     { "Email" }
154 |                                 </label>
155 |                                 <div class="relative">
156 |                                     <span
157 |                                         class="input-group-text bg-blue-500 text-white px-3 py-2 rounded-l-lg absolute left-0 top-0 bottom-0 flex items-center"
158 |                                     >
159 |                                         <i class="fas fa-user" />
160 |                                     </span>
161 |                                     <input
162 |                                         type="text"
163 |                                         class="form-control rounded-r-lg pl-10 border border-blue-500 focus:ring focus:ring-blue-300 focus:outline-none w-full"
164 |                                         id="username"
165 |                                         name="username"
166 |                                         aria-required="true"
167 |                                         placeholder="Email"
168 |                                         required=true
169 |                                         ref={input_email_ref}
170 |                                         oninput={on_email_change}
171 |                                         aria-label="Email"
172 |                                     />
173 |                                 </div>
174 |                             </div>
175 |                             if !email_valid {
176 |                                 <div class="error-txt text-red-500 text-sm mb-2">
177 |                                     { "Enter a valid email address" }
178 |                                 </div>
179 |                             }
180 |                             <div class="mb-4">
181 |                                 <label for="password" class="text-gray-600 font-semibold">
182 |                                     { "Password" }
183 |                                 </label>
184 |                                 <div class="relative">
185 |                                     <span
186 |                                         class="input-group-text bg-blue-500 text-white px-3 py-2 rounded-l-lg absolute left-0 top-0 bottom-0 flex items-center"
187 |                                     >
188 |                                         <i class="fas fa-lock" />
189 |                                     </span>
190 |                                     <input
191 |                                         type={&*password_type}
192 |                                         class="form-control rounded-r-lg pl-10 border border-blue-500 focus:ring focus:ring-blue-300 focus:outline-none w-full"
193 |                                         id="password"
194 |                                         name="password"
195 |                                         placeholder="Password"
196 |                                         required=true
197 |                                         aria-required="true"
198 |                                         aria-label="Password Input"
199 |                                         ref={input_password_ref}
200 |                                         oninput={on_password_change}
201 |                                     />
202 |                                     <i
203 |                                         class={format!("cursor-pointer absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-600 toggle-button fa {}", if eye_active { "fa-eye" } else { "fa-eye-slash " })}
204 |                                         aria-hidden="true"
205 |                                         role="presentation"
206 |                                         onclick={on_toggle_password}
207 |                                     />
208 |                                 </div>
209 |                             </div>
210 |                             if !password_valid {
211 |                                 <div class="error-txt text-red-500 text-sm my-2">
212 |                                     { "Password can't be blank" }
213 |                                 </div>
214 |                             }
215 |                             <div class="mb-4 flex items-center">
216 |                                 <input
217 |                                     type="checkbox"
218 |                                     id="rememberMe"
219 |                                     name="rememberMe"
220 |                                     class="mr-2"
221 |                                     aria-label="Remember Me Checkbox"
222 |                                 />
223 |                                 <label for="rememberMe" class="text-gray-600">
224 |                                     { "Remember Me" }
225 |                                 </label>
226 |                             </div>
227 |                             <button
228 |                                 type="submit"
229 |                                 class="btn btn-primary w-full flex items-center justify-center rounded-lg px-4 py-2 text-white text-lg font-semibold bg-blue-500 hover:bg-blue-600 active:bg-blue-700"
230 |                                 aria-label="Login Button"
231 |                             >
232 |                                 <i class="fas fa-box-arrow mr-2" />
233 |                                 { "Login" }
234 |                             </button>
235 |                             <div class="forgot-password text-center mt-6 mb-4">
236 |                                 <a
237 |                                     href="#"
238 |                                     class="text-gray-600 font-semibold hover:text-blue-500"
239 |                                     aria-label="Forgot Password Link"
240 |                                 >
241 |                                     { "Forgot Password?" }
242 |                                 </a>
243 |                             </div>
244 |                             <div
245 |                                 class="form-divider flex items-center text-gray-600 mb-6"
246 |                                 aria-hidden="true"
247 |                             >
248 |                                 <div class="flex-1 h-px bg-gray-600" />
249 |                                 <div class="mx-2">{ "Or login with" }</div>
250 |                                 <div class="flex-1 h-px bg-gray-600" />
251 |                             </div>
252 |                             <div class="social-buttons flex space-x-2">
253 |                                 <button
254 |                                     class="btn facebook-btn flex items-center justify-center bg-blue-800 text-white text-3xl rounded-lg w-full h-12 hover:bg-blue-700"
255 |                                     aria-label="Login with Facebook"
256 |                                 >
257 |                                     <i class="fab fa-facebook" />
258 |                                 </button>
259 |                                 <button
260 |                                     class="btn google-btn flex items-center justify-center bg-red-600 text-white text-3xl rounded-lg w-full h-12 hover:bg-red-500"
261 |                                     aria-label="Login with Google"
262 |                                 >
263 |                                     <i class="fab fa-google" />
264 |                                 </button>
265 |                                 <button
266 |                                     class="btn linkedin-btn flex items-center justify-center bg-blue-600 text-white text-3xl rounded-lg w-full h-12 hover:bg-blue-500"
267 |                                     aria-label="Login with LinkedIn"
268 |                                 >
269 |                                     <i class="fab fa-linkedin" />
270 |                                 </button>
271 |                                 <button
272 |                                     class="btn twitter-btn flex items-center justify-center bg-blue-400 text-white text-3xl rounded-lg w-full h-12 hover:bg-blue-300"
273 |                                     aria-label="Login with Twitter"
274 |                                 >
275 |                                     <i class="fab fa-twitter" />
276 |                                 </button>
277 |                             </div>
278 |                         </form>
279 |                     </div>
280 |                 </div>
281 |             </div>
282 |         </section>
283 |     }
284 | }
285 | 


--------------------------------------------------------------------------------
/examples/yew/src/components/login_form_two.rs:
--------------------------------------------------------------------------------
  1 | use regex::Regex;
  2 | use serde::{Deserialize, Serialize};
  3 | use wasm_bindgen_futures::spawn_local;
  4 | use web_sys::{console, HtmlInputElement, Window};
  5 | use yew::prelude::*;
  6 | 
  7 | use crate::api::auth::login_user;
  8 | 
  9 | #[derive(Debug, Default, Clone, Serialize, Deserialize)]
 10 | struct LoginUserSchema {
 11 |     email: String,
 12 |     password: String,
 13 | }
 14 | 
 15 | #[function_component(LoginFormTwo)]
 16 | pub fn login_form_two() -> Html {
 17 |     let error_handle = use_state(String::default);
 18 |     let error = (*error_handle).clone();
 19 | 
 20 |     let email_valid_handle = use_state(|| true);
 21 |     let email_valid = (*email_valid_handle).clone();
 22 | 
 23 |     let eye_active_handle = use_state(|| false);
 24 |     let eye_active = (*eye_active_handle).clone();
 25 | 
 26 |     let password_valid_handle = use_state(|| true);
 27 |     let password_valid = (*password_valid_handle).clone();
 28 | 
 29 |     let password_type_handle = use_state(|| "text");
 30 |     let password_type = (*password_type_handle).clone();
 31 | 
 32 |     let input_email_ref = use_node_ref();
 33 |     let input_email_handle = use_state(String::default);
 34 |     let input_email = (*input_email_handle).clone();
 35 | 
 36 |     let input_password_ref = use_node_ref();
 37 |     let input_password_handle = use_state(String::default);
 38 |     let input_password = (*input_password_handle).clone();
 39 | 
 40 |     let validate_email = |email: &str| {
 41 |         let pattern = Regex::new(r"^[^ ]+@[^ ]+\.[a-z]{2,3}$").unwrap();
 42 |         pattern.is_match(email)
 43 |     };
 44 | 
 45 |     let validate_password = |password: &str| !password.is_empty();
 46 | 
 47 |     let on_email_change = {
 48 |         let input_email_ref = input_email_ref.clone();
 49 | 
 50 |         Callback::from(move |_| {
 51 |             let input = input_email_ref.cast::<HtmlInputElement>();
 52 | 
 53 |             if let Some(input) = input {
 54 |                 let value = input.value();
 55 |                 input_email_handle.set(value);
 56 |                 email_valid_handle.set(validate_email(&input.value()));
 57 |             }
 58 |         })
 59 |     };
 60 | 
 61 |     let on_password_change = {
 62 |         let input_password_ref = input_password_ref.clone();
 63 | 
 64 |         Callback::from(move |_| {
 65 |             let input = input_password_ref.cast::<HtmlInputElement>();
 66 | 
 67 |             if let Some(input) = input {
 68 |                 let value = input.value();
 69 |                 input_password_handle.set(value);
 70 |                 password_valid_handle.set(validate_password(&input.value()));
 71 |             }
 72 |         })
 73 |     };
 74 | 
 75 |     let onsubmit = Callback::from(move |event: SubmitEvent| {
 76 |         event.prevent_default();
 77 | 
 78 |         let email_ref = input_password.clone();
 79 |         let password_ref = input_password.clone();
 80 |         let error_handle = error_handle.clone();
 81 |         console::log_1(&format!("Email: {}, Password: {}", input_email, input_password).into());
 82 | 
 83 |         spawn_local(async move {
 84 |             let email_val = email_ref.clone();
 85 |             let password_val = password_ref.clone();
 86 |             let error_handle = error_handle.clone();
 87 |             if email_valid && password_valid {
 88 |                 let response = login_user(email_val.to_string(), password_val.to_string()).await;
 89 |                 match response {
 90 |                     Ok(_) => {
 91 |                         console::log_1(&"success".into());
 92 |                         let window: Window = web_sys::window().expect("window not available");
 93 |                         let location = window.location();
 94 |                         let _ = location.set_href("/error");
 95 |                     }
 96 |                     Err(err) => {
 97 |                         error_handle.set(err);
 98 |                     }
 99 |                 }
100 |             } else {
101 |                 error_handle.set("Please provide a valid email and password!".into());
102 |             }
103 |         });
104 |     });
105 | 
106 |     let on_toggle_password = {
107 |         Callback::from(move |_| {
108 |             if eye_active {
109 |                 password_type_handle.set("password".into())
110 |             } else {
111 |                 password_type_handle.set("text".into())
112 |             }
113 |             eye_active_handle.set(!eye_active);
114 |         })
115 |     };
116 | 
117 |     html! {
118 |         <section
119 |             class="bg-gradient-to-r from-pink-600 via-orange-500 to-yellow-300 min-h-screen items-center justify-center text-white"
120 |         >
121 |             <div class="container mx-auto">
122 |                 <div class="flex justify-center">
123 |                     <div class="w-full md:w-1/2 lg:w-1/3">
124 |                         <div class="bg-purple-800 rounded-lg p-8 shadow-md mt-10">
125 |                             <div class="flex justify-center">
126 |                                 <div
127 |                                     class="w-24 h-24 bg-center bg-cover rounded-full"
128 |                                     style="
129 |                         background-image: url(https://images.unsplash.com/photo-1690498705508-13f739ebb14b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80);
130 |                       "
131 |                                     alt="Login Image"
132 |                                 />
133 |                             </div>
134 |                             <h3 class="text-center text-lg font-semibold mt-4">
135 |                                 { "Welcome Back" }
136 |                             </h3>
137 |                             <p class="text-center text-sm text-opacity-75">
138 |                                 { "Fill in your credentials below to log in!" }
139 |                             </p>
140 |                             <form action="#" class="mt-6" onsubmit={onsubmit}>
141 |                                 if !error.is_empty() {
142 |                                     <div
143 |                                         class="bg-red-600 text-white py-3 font-bold rounded-md text-center mb-4 text-lg"
144 |                                     >
145 |                                         { error }
146 |                                     </div>
147 |                                 }
148 |                                 <div class="mb-6">
149 |                                     <div class="relative">
150 |                                         <div
151 |                                             class="absolute inset-y-0 left-0 pl-3 flex items-center"
152 |                                         >
153 |                                             <span
154 |                                                 class="fa fa-person text-xl text-black"
155 |                                                 aria-hidden="true"
156 |                                             />
157 |                                         </div>
158 |                                         <input
159 |                                             type="text"
160 |                                             class="w-full px-4 py-2 pl-10 rounded-lg bg-opacity-50 placeholder-black text-black"
161 |                                             placeholder="Email"
162 |                                             required=true
163 |                                             ref={input_email_ref}
164 |                                             oninput={on_email_change}
165 |                                             aria-label="Email"
166 |                                         />
167 |                                     </div>
168 |                                 </div>
169 |                                 if !email_valid {
170 |                                     <div class="error-txt text-red-500 text-sm mb-5">
171 |                                         { "Enter a valid email address" }
172 |                                     </div>
173 |                                 }
174 |                                 <div class="mb-6">
175 |                                     <div class="relative">
176 |                                         <div
177 |                                             class="absolute inset-y-0 left-0 pl-3 flex items-center"
178 |                                         >
179 |                                             <span
180 |                                                 class="fa fa-lock text-xl text-black"
181 |                                                 aria-hidden="true"
182 |                                             />
183 |                                         </div>
184 |                                         <input
185 |                                             type={&*password_type}
186 |                                             class="w-full px-4 py-2 pl-10 rounded-lg bg-opacity-50 placeholder-black text-black"
187 |                                             placeholder="Password"
188 |                                             required=true
189 |                                             aria-label="Password"
190 |                                             ref={input_password_ref}
191 |                                             oninput={on_password_change}
192 |                                         />
193 |                                         <i
194 |                                             class={format!("cursor-pointer absolute right-4 top-1/2 transform -translate-y-1/2 text-2xl text-gray-600 toggle-button fa {}", if eye_active { "fa-eye" } else { "fa-eye-slash " })}
195 |                                             aria-hidden="true"
196 |                                             role="presentation"
197 |                                             onclick={on_toggle_password}
198 |                                         />
199 |                                     </div>
200 |                                 </div>
201 |                                 if !password_valid {
202 |                                     <div class="error-txt text-red-500 text-sm my-2">
203 |                                         { "Password can't be blank" }
204 |                                     </div>
205 |                                 }
206 |                                 <div class="mb-6">
207 |                                     <div class="text-right">
208 |                                         <a
209 |                                             href="#"
210 |                                             class="text-sm text-blue-400"
211 |                                             aria-label="Forgot Password"
212 |                                         >
213 |                                             { "Forgot Password" }
214 |                                         </a>
215 |                                     </div>
216 |                                 </div>
217 |                                 <div class="mb-6">
218 |                                     <button
219 |                                         type="submit"
220 |                                         class="w-full bg-pink-600 hover:bg-pink-500 text-white font-semibold rounded-lg py-3 transition duration-300"
221 |                                     >
222 |                                         { "Get Started" }
223 |                                     </button>
224 |                                 </div>
225 |                             </form>
226 |                             <div class="text-center mt-4 text-sm">
227 |                                 <p class="mb-1">{ "Don't have an account?" }</p>
228 |                                 <a href="#" class="text-blue-400" aria-label="Sign Up">
229 |                                     { "Sign Up" }
230 |                                 </a>
231 |                             </div>
232 |                             <div class="flex justify-center mt-8">
233 |                                 <div class="flex space-x-4">
234 |                                     <a
235 |                                         href="#"
236 |                                         class="w-10 h-10 flex items-center justify-center rounded-full bg-opacity-50 text-white hover:bg-opacity-75 transition duration-300"
237 |                                         aria-label="Facebook"
238 |                                     >
239 |                                         <i class="fa fa-facebook" aria-hidden="true" />
240 |                                     </a>
241 |                                     <a
242 |                                         href="#"
243 |                                         class="w-10 h-10 flex items-center justify-center rounded-full bg-opacity-50 text-white hover:bg-opacity-75 transition duration-300"
244 |                                         aria-label="LinkedIn"
245 |                                     >
246 |                                         <i class="fa fa-linkedin" aria-hidden="true" />
247 |                                     </a>
248 |                                     <a
249 |                                         href="#"
250 |                                         class="w-10 h-10 flex items-center justify-center rounded-full bg-opacity-50 text-white hover:bg-opacity-75 transition duration-300"
251 |                                         aria-label="Twitter"
252 |                                     >
253 |                                         <i class="fa fa-twitter" aria-hidden="true" />
254 |                                     </a>
255 |                                     <a
256 |                                         href="#"
257 |                                         class="w-10 h-10 flex items-center justify-center rounded-full bg-opacity-50 text-white hover:bg-opacity-75 transition duration-300"
258 |                                         aria-label="Instagram"
259 |                                     >
260 |                                         <i class="fa fa-instagram" aria-hidden="true" />
261 |                                     </a>
262 |                                 </div>
263 |                             </div>
264 |                         </div>
265 |                     </div>
266 |                 </div>
267 |             </div>
268 |         </section>
269 |     }
270 | }
271 | 


--------------------------------------------------------------------------------
/examples/yew/src/components/multi_step_form_one.rs:
--------------------------------------------------------------------------------
  1 | use crate::components::common::{validate_email, validate_input};
  2 | use input_rs::yew::Input;
  3 | use web_sys::HtmlInputElement;
  4 | use yew::prelude::*;
  5 | 
  6 | #[function_component(MultiStepFormOne)]
  7 | pub fn multi_step_form_one() -> Html {
  8 |     // TODO:  Figure out how to refactor all of this mess!
  9 |     let error_handle = use_state(String::default);
 10 |     let error = (*error_handle).clone();
 11 | 
 12 |     let email_valid_handle = use_state(|| true);
 13 |     let email_valid = (*email_valid_handle).clone();
 14 | 
 15 |     let full_name_valid_handle = use_state(|| true);
 16 |     let full_name_valid = (*full_name_valid_handle).clone();
 17 | 
 18 |     let phone_number_valid_handle = use_state(|| true);
 19 |     let phone_number_valid = (*phone_number_valid_handle).clone();
 20 | 
 21 |     let address_valid_handle = use_state(|| true);
 22 |     let address_valid = (*address_valid_handle).clone();
 23 | 
 24 |     let birthday_valid_handle = use_state(|| true);
 25 |     let birthday_valid = (*birthday_valid_handle).clone();
 26 | 
 27 |     let gender_valid_handle = use_state(|| true);
 28 |     let gender_valid = (*gender_valid_handle).clone();
 29 | 
 30 |     let username_valid_handle = use_state(|| true);
 31 |     let username_valid = (*username_valid_handle).clone();
 32 | 
 33 |     let password_valid_handle = use_state(|| true);
 34 |     let password_valid = (*password_valid_handle).clone();
 35 | 
 36 |     let input_email_ref = use_node_ref();
 37 |     let input_email_handle = use_state(String::default);
 38 | 
 39 |     let input_full_name_ref = use_node_ref();
 40 |     let input_full_name_handle = use_state(String::default);
 41 | 
 42 |     let input_subject_ref = use_node_ref();
 43 |     let input_subject_handle = use_state(String::default);
 44 | 
 45 |     let input_phone_number_ref = use_node_ref();
 46 |     let input_phone_number_handle = use_state(String::default);
 47 | 
 48 |     let input_address_ref = use_node_ref();
 49 |     let input_address_handle = use_state(String::default);
 50 | 
 51 |     let input_birthday_ref = use_node_ref();
 52 |     let input_birthday_handle = use_state(String::default);
 53 | 
 54 |     let input_gender_ref = use_node_ref();
 55 |     let input_gender_handle = use_state(String::default);
 56 |     let input_gender = (*input_gender_handle).clone();
 57 | 
 58 |     let input_username_ref = use_node_ref();
 59 |     let input_username_handle = use_state(String::default);
 60 |     let input_username_number = (*input_username_handle).clone();
 61 | 
 62 |     let input_password_ref = use_node_ref();
 63 |     let input_password_handle = use_state(String::default);
 64 |     let input_password_number = (*input_password_handle).clone();
 65 | 
 66 |     let current_step_handle = use_state(|| 0);
 67 |     let current_step = (*current_step_handle).clone();
 68 | 
 69 |     let on_next = {
 70 |         let error_handle = error_handle.clone();
 71 |         let counter = current_step_handle.clone();
 72 |         move |_| match *counter {
 73 |             0 => {
 74 |                 if full_name_valid && email_valid {
 75 |                     let value = *counter + 1;
 76 |                     counter.set(value);
 77 |                     error_handle.set("".to_string());
 78 |                 } else {
 79 |                     error_handle
 80 |                         .set("Please provide a valid full name and email address!".to_string());
 81 |                 }
 82 |             }
 83 |             1 => {
 84 |                 if phone_number_valid && address_valid {
 85 |                     let value = *counter + 1;
 86 |                     counter.set(value);
 87 |                     error_handle.set("".to_string());
 88 |                 } else {
 89 |                     error_handle
 90 |                         .set("Please provide a valid phone number and address!".to_string());
 91 |                 }
 92 |             }
 93 |             2 => {
 94 |                 if birthday_valid && gender_valid {
 95 |                     let value = *counter + 1;
 96 |                     counter.set(value);
 97 |                     error_handle.set("".to_string());
 98 |                 } else {
 99 |                     error_handle.set("Please provide a valid birth date and gender!".to_string());
100 |                 }
101 |             }
102 |             _ => println!("Ain't special"),
103 |         }
104 |     };
105 | 
106 |     let on_previous = {
107 |         let counter = current_step_handle.clone();
108 |         move |_| {
109 |             let value = *counter - 1;
110 |             counter.set(value);
111 |         }
112 |     };
113 | 
114 |     let on_gender_change = {
115 |         let input_gender_ref = input_gender_ref.clone();
116 | 
117 |         Callback::from(move |_| {
118 |             let input = input_gender_ref.cast::<HtmlInputElement>();
119 | 
120 |             if let Some(input) = input {
121 |                 let value = input.value();
122 |                 input_gender_handle.set(value);
123 |                 gender_valid_handle.set(validate_input(input.value()));
124 |             }
125 |         })
126 |     };
127 | 
128 |     // TODO: add an onclick handler on last button
129 | 
130 |     let render_progress_item = |(index, _): (usize, &str)| {
131 |         // TODO: Refactor and convert to a for loop/map, make this tag show up: <span class="check bg-pink-800 z-50"></span>
132 |         html! {
133 |             <div class="flex items-center text-left justify-center my-10">
134 |                 <div class="step">
135 |                     <p class="font-semibold mb-2 text-pink-800">{ "Step 1" }</p>
136 |                     <div class="flex items-center">
137 |                         <div
138 |                             class="outer-check bullet border-2 border-pink-800 rounded-full h-7 w-7 flex items-center justify-center"
139 |                         >
140 |                             <span class="step-index font-semibold text-pink-800">{ "1" }</span>
141 |                             if index > 0 {
142 |                                 <span class="check bg-pink-800 z-50" />
143 |                             }
144 |                         </div>
145 |                         if index > 0 {
146 |                             <span class="line bg-pink-800 h-1 w-10" />
147 |                         } else {
148 |                             <span class="line bg-grey-400 h-1 w-10" />
149 |                         }
150 |                     </div>
151 |                 </div>
152 |                 <div class="step">
153 |                     <p class="font-semibold mb-2 text-pink-800">{ "Step 2" }</p>
154 |                     <div class="flex items-center">
155 |                         <div
156 |                             class="outer-check bullet border-2 border-pink-800 rounded-full h-7 w-7 flex items-center justify-center"
157 |                         >
158 |                             <span class="step-index font-semibold text-pink-800">{ "2" }</span>
159 |                             if index > 1 {
160 |                                 <span class="check bg-pink-800" />
161 |                             }
162 |                         </div>
163 |                         if index > 1 {
164 |                             <span class="line bg-pink-800 h-1 w-10" />
165 |                         } else {
166 |                             <span class="line bg-grey-400 h-1 w-10" />
167 |                         }
168 |                     </div>
169 |                 </div>
170 |                 <div class="step">
171 |                     <p class="font-semibold mb-2 text-pink-800">{ "Step 3" }</p>
172 |                     <div class="flex items-center">
173 |                         <div
174 |                             class="outer-check bullet border-2 border-pink-800 rounded-full h-7 w-7 flex items-center justify-center"
175 |                         >
176 |                             <span class="step-index font-semibold text-pink-800">{ "3" }</span>
177 |                             if index > 2 {
178 |                                 <span class="check bg-pink-800" />
179 |                             }
180 |                         </div>
181 |                         if index > 2 {
182 |                             <span class="line bg-pink-800 h-1 w-10" />
183 |                         } else {
184 |                             <span class="line bg-grey-400 h-1 w-10" />
185 |                         }
186 |                     </div>
187 |                 </div>
188 |                 <div class="step">
189 |                     <p class="font-semibold mb-2 text-pink-800">{ "Step 4" }</p>
190 |                     <div class="flex items-center">
191 |                         <div
192 |                             class="outer-check bullet border-2 border-pink-800 rounded-full h-7 w-7 flex items-center justify-center"
193 |                         >
194 |                             <span class="step-index font-semibold text-pink-800">{ "4" }</span>
195 |                         </div>
196 |                     </div>
197 |                 </div>
198 |             </div>
199 |         }
200 |     };
201 | 
202 |     let current_step_content = match current_step {
203 |         0 => html! {
204 |             <div class="page ml-0 transition-transform duration-300">
205 |                 <div class="title text-left text-xl font-semibold mb-4">
206 |                     { "Personal Information" }
207 |                 </div>
208 |                 <Input
209 |                     r#type="text"
210 |                     label="Full Name"
211 |                     handle={input_full_name_handle}
212 |                     name="full-name"
213 |                     r#ref={input_full_name_ref}
214 |                     placeholder="Full Name"
215 |                     error_message="Full name can't be blank!"
216 |                     class="field mb-6"
217 |                     field_class="validate-input mb-6"
218 |                     label_class="label font-semibold text-pink-800"
219 |                     input_class="w-full border border-pink-800 rounded px-4 py-2"
220 |                     error_class="text-red-500 text-sm my-2"
221 |                     required=true
222 |                     valid_handle={full_name_valid_handle}
223 |                     validate_function={validate_input}
224 |                 />
225 |                 <Input
226 |                     r#type="text"
227 |                     label="Email"
228 |                     handle={input_email_handle}
229 |                     name="email"
230 |                     r#ref={input_email_ref}
231 |                     placeholder="Email"
232 |                     error_message="Enter a valid email address!"
233 |                     class="field mb-6"
234 |                     field_class="validate-input mb-6"
235 |                     label_class="label font-semibold text-pink-800"
236 |                     input_class="w-full border border-pink-800 rounded px-4 py-2"
237 |                     error_class="text-red-500 text-sm my-2"
238 |                     required=true
239 |                     valid_handle={email_valid_handle}
240 |                     validate_function={validate_email}
241 |                 />
242 |                 <button
243 |                     class="next bg-purple-800 hover:bg-purple-700 text-white rounded px-4 mt-10 py-2 w-full font-semibold mb-4"
244 |                     onclick={on_next}
245 |                 >
246 |                     { "Next" }
247 |                 </button>
248 |             </div>
249 |         },
250 |         1 => html! {
251 |             <div class="page transition-transform duration-300">
252 |                 <div class="title text-left text-xl font-semibold mb-4">{ "Contact Details" }</div>
253 |                 <Input
254 |                     r#type="tel"
255 |                     label="Phone Number"
256 |                     handle={input_phone_number_handle}
257 |                     name="phone-number"
258 |                     r#ref={input_phone_number_ref}
259 |                     placeholder="+19999"
260 |                     error_message="Phone number can't be blank!"
261 |                     class="field mb-6"
262 |                     field_class="flex telephone-input validate-input mb-6"
263 |                     label_class="label font-semibold text-pink-800"
264 |                     input_class="w-full border border-pink-800 rounded px-4 py-2"
265 |                     error_class="text-red-500 text-sm my-2"
266 |                     required=true
267 |                     valid_handle={phone_number_valid_handle}
268 |                     validate_function={validate_input}
269 |                 />
270 |                 <Input
271 |                     r#type="text"
272 |                     label="Address"
273 |                     handle={input_address_handle}
274 |                     name="address"
275 |                     r#ref={input_address_ref}
276 |                     placeholder="Address"
277 |                     error_message="Address can't be blank!"
278 |                     class="field mb-6"
279 |                     field_class="validate-input mb-6"
280 |                     label_class="label font-semibold text-pink-800"
281 |                     input_class="w-full border border-pink-800 rounded px-4 py-2"
282 |                     error_class="text-red-500 text-sm my-2"
283 |                     required=true
284 |                     valid_handle={address_valid_handle}
285 |                     validate_function={validate_input}
286 |                 />
287 |                 <div class="field btns text-center space-x-5 mt-10">
288 |                     <button
289 |                         class="prev bg-pink-800 hover:bg-pink-700 text-white rounded px-4 py-2 font-semibold"
290 |                         onclick={on_previous}
291 |                     >
292 |                         { "Previous" }
293 |                     </button>
294 |                     <button
295 |                         class="next bg-purple-800 hover:bg-purple-700 text-white rounded px-4 py-2 font-semibold"
296 |                         onclick={on_next}
297 |                     >
298 |                         { "Next" }
299 |                     </button>
300 |                 </div>
301 |             </div>
302 |         },
303 |         2 => html! {
304 |             <div class="page transition-transform duration-300">
305 |                 <div class="title text-left text-xl font-semibold mb-4">{ "Date of Birth" }</div>
306 |                 <Input
307 |                     r#type="date"
308 |                     label="Date of Birth"
309 |                     handle={input_birthday_handle}
310 |                     name="birthday"
311 |                     r#ref={input_birthday_ref}
312 |                     placeholder="Birthday"
313 |                     error_message="Birthday can't be blank!"
314 |                     class="field mb-6"
315 |                     field_class="validate-input mb-6"
316 |                     label_class="label font-semibold text-pink-800"
317 |                     input_class="w-full border border-pink-800 rounded px-4 py-2"
318 |                     error_class="text-red-500 text-sm my-2"
319 |                     required=true
320 |                     valid_handle={birthday_valid_handle}
321 |                     validate_function={validate_input}
322 |                 />
323 |                 <div class="field mb-6">
324 |                     <div class="label font-semibold text-pink-800">{ "Gender" }</div>
325 |                     <select
326 |                         class="w-full border border-pink-800 rounded px-4 py-2"
327 |                         id="gender"
328 |                         name="gender"
329 |                         ref={input_gender_ref}
330 |                         aria-required="true"
331 |                         required=true
332 |                         placeholder="Gender"
333 |                         oninput={on_gender_change}
334 |                     >
335 |                         <option>{ "Male" }</option>
336 |                         <option>{ "Female" }</option>
337 |                         <option>{ "Non-binary" }</option>
338 |                         <option>{ "Other" }</option>
339 |                     </select>
340 |                 </div>
341 |                 if !gender_valid {
342 |                     <div class="error-txt text-red-500 text-sm my-2">
343 |                         { "Gender can't be blank!" }
344 |                     </div>
345 |                 }
346 |                 <div class="field btns text-center space-x-5 mt-10">
347 |                     <button
348 |                         class="prev bg-pink-800 hover:bg-pink-700 text-white rounded px-4 py-2 font-semibold"
349 |                         onclick={on_previous}
350 |                     >
351 |                         { "Previous" }
352 |                     </button>
353 |                     <button
354 |                         class="next bg-purple-800 hover:bg-purple-700 text-white rounded px-4 py-2 font-semibold"
355 |                         onclick={on_next}
356 |                     >
357 |                         { "Next" }
358 |                     </button>
359 |                 </div>
360 |             </div>
361 |         },
362 |         3 => html! {
363 |             <div class="page transition-transform duration-300">
364 |                 <div class="title text-left text-xl font-semibold mb-4">{ "Account Details" }</div>
365 |                 <Input
366 |                     r#type="text"
367 |                     label="Username"
368 |                     handle={input_username_handle}
369 |                     name="username"
370 |                     r#ref={input_username_ref}
371 |                     placeholder="Username"
372 |                     error_message="Username can't be blank!"
373 |                     class="field mb-6"
374 |                     field_class="validate-input mb-6"
375 |                     label_class="label font-semibold text-pink-800"
376 |                     input_class="w-full border border-pink-800 rounded px-4 py-2"
377 |                     error_class="text-red-500 text-sm my-2"
378 |                     required=true
379 |                     valid_handle={username_valid_handle}
380 |                     validate_function={validate_input}
381 |                 />
382 |                 <Input
383 |                     r#type={"password"}
384 |                     label={"Password"}
385 |                     handle={input_password_handle}
386 |                     name={"password"}
387 |                     r#ref={input_password_ref}
388 |                     placeholder={"Password"}
389 |                     error_message={"Password can't be blank!"}
390 |                     field_class={"relative mt-2 mb-2"}
391 |                     input_class={"input w-full px-4 py-2 rounded border border-pink-800 bg-gray-100"}
392 |                     error_class={"text-red-500 absolute text-sm"}
393 |                     required={true}
394 |                     valid_handle={password_valid_handle}
395 |                     validate_function={validate_input}
396 |                     eye_active={"cursor-pointer absolute right-4 top-1/2 transform -translate-y-1/2 text-2xl text-gray-600 toggle-button fa fa-eye"}
397 |                     eye_disabled={"cursor-pointer absolute right-4 top-1/2 transform -translate-y-1/2 text-2xl text-gray-600 toggle-button fa fa-eye-slash"}
398 |                 />
399 |                 <div class="field btns text-center space-x-5 mt-10">
400 |                     <button
401 |                         class="prev bg-pink-800 hover:bg-pink-700 text-white rounded px-4 py-2 font-semibold"
402 |                         onclick={on_previous}
403 |                     >
404 |                         { "Previous" }
405 |                     </button>
406 |                     <button
407 |                         class="submit bg-purple-800 hover:bg-purple-700 text-white rounded px-4 py-2 font-semibold"
408 |                     >
409 |                         { "Submit" }
410 |                     </button>
411 |                 </div>
412 |             </div>
413 |         },
414 |         _ => html! {},
415 |     };
416 | 
417 |     html! {
418 |         <div
419 |             class="min-h-screen bg-gradient-to-tr from-indigo-500 to-pink-500 flex items-center justify-center"
420 |         >
421 |             <div
422 |                 class="container mx-auto p-10 bg-white text-center rounded w-2/3 md:w-1/3 lg:w-1/3"
423 |             >
424 |                 if !error.is_empty() {
425 |                     <div
426 |                         class="error bg-red-600 text-white px-4 py-3 mb-5 font-semibold rounded-md text-center text-base"
427 |                     >
428 |                         { error }
429 |                     </div>
430 |                 }
431 |                 <header class="text-4xl font-semibold mb-3">{ "Multi-Step Form" }</header>
432 |                 <div class="flex items-center text-left justify-center my-3">
433 |                     { render_progress_item((current_step, "")) }
434 |                 </div>
435 |                 <div class="form-outer slide-page  text-left">{ current_step_content }</div>
436 |             </div>
437 |         </div>
438 |     }
439 | }
440 | 


--------------------------------------------------------------------------------
/examples/yew/src/main.rs:
--------------------------------------------------------------------------------
 1 | mod api;
 2 | mod app;
 3 | mod components;
 4 | mod pages;
 5 | mod router;
 6 | 
 7 | fn main() {
 8 |     yew::Renderer::<app::App>::new().render();
 9 | }
10 | 


--------------------------------------------------------------------------------
/examples/yew/src/pages.rs:
--------------------------------------------------------------------------------
1 | pub mod contact_page_one;
2 | pub mod error;
3 | pub mod login_page_one;
4 | pub mod login_page_three;
5 | pub mod login_page_two;
6 | pub mod multi_step_page_one;
7 | 


--------------------------------------------------------------------------------
/examples/yew/src/pages/contact_page_one.rs:
--------------------------------------------------------------------------------
1 | use yew::prelude::*;
2 | 
3 | use crate::components::contact_form_one::ContactFormOne;
4 | 
5 | #[function_component(ContactPageOne)]
6 | pub fn contact_page_one() -> Html {
7 |     html! { <ContactFormOne /> }
8 | }
9 | 


--------------------------------------------------------------------------------
/examples/yew/src/pages/error.rs:
--------------------------------------------------------------------------------
 1 | use yew::prelude::*;
 2 | 
 3 | #[function_component(Error)]
 4 | pub fn error() -> Html {
 5 |     html! {
 6 |         <div>
 7 |             <h1>{ "Error Page." }</h1>
 8 |         </div>
 9 |     }
10 | }
11 | 


--------------------------------------------------------------------------------
/examples/yew/src/pages/login_page_one.rs:
--------------------------------------------------------------------------------
1 | use yew::prelude::*;
2 | 
3 | use crate::components::login_form_one::LoginFormOne;
4 | 
5 | #[function_component(LoginPageOne)]
6 | pub fn login_page_one() -> Html {
7 |     html! { <LoginFormOne /> }
8 | }
9 | 


--------------------------------------------------------------------------------
/examples/yew/src/pages/login_page_three.rs:
--------------------------------------------------------------------------------
1 | use yew::prelude::*;
2 | 
3 | use crate::components::login_form_three::LoginFormThree;
4 | 
5 | #[function_component(LoginPageThree)]
6 | pub fn login_page_three() -> Html {
7 |     html! { <LoginFormThree /> }
8 | }
9 | 


--------------------------------------------------------------------------------
/examples/yew/src/pages/login_page_two.rs:
--------------------------------------------------------------------------------
1 | use yew::prelude::*;
2 | 
3 | use crate::components::login_form_two::LoginFormTwo;
4 | 
5 | #[function_component(LoginPageTwo)]
6 | pub fn login_page_two() -> Html {
7 |     html! { <LoginFormTwo /> }
8 | }
9 | 


--------------------------------------------------------------------------------
/examples/yew/src/pages/multi_step_page_one.rs:
--------------------------------------------------------------------------------
1 | use yew::prelude::*;
2 | 
3 | use crate::components::multi_step_form_one::MultiStepFormOne;
4 | 
5 | #[function_component(MultiStepPageOne)]
6 | pub fn multi_step_page_one() -> Html {
7 |     html! { <MultiStepFormOne /> }
8 | }
9 | 


--------------------------------------------------------------------------------
/examples/yew/src/router.rs:
--------------------------------------------------------------------------------
 1 | use yew::prelude::*;
 2 | use yew_router::prelude::*;
 3 | 
 4 | use crate::pages::contact_page_one::ContactPageOne;
 5 | use crate::pages::error::Error;
 6 | use crate::pages::login_page_one::LoginPageOne;
 7 | use crate::pages::login_page_three::LoginPageThree;
 8 | use crate::pages::login_page_two::LoginPageTwo;
 9 | use crate::pages::multi_step_page_one::MultiStepPageOne;
10 | 
11 | #[derive(Clone, Routable, PartialEq)]
12 | pub enum Route {
13 |     #[at("/error")]
14 |     Error,
15 |     #[at("/login/1")]
16 |     LoginPageOne,
17 |     #[at("/login/2")]
18 |     LoginPageTwo,
19 |     #[at("/login/3")]
20 |     LoginPageThree,
21 |     #[at("/contact/1")]
22 |     ContactPageOne,
23 |     #[at("/multi-step/1")]
24 |     MultiStepPageOne,
25 | }
26 | 
27 | pub fn switch(routes: Route) -> Html {
28 |     match routes {
29 |         Route::LoginPageOne => html! { <LoginPageOne /> },
30 |         Route::LoginPageTwo => html! { <LoginPageTwo /> },
31 |         Route::LoginPageThree => html! { <LoginPageThree /> },
32 |         Route::ContactPageOne => html! { <ContactPageOne /> },
33 |         Route::MultiStepPageOne => html! { <MultiStepPageOne /> },
34 |         Route::Error => html! { <Error /> },
35 |     }
36 | }
37 | 


--------------------------------------------------------------------------------
/examples/yew/src/tailwind.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css?family=Roboto:300,400&display=swap');
 2 | 
 3 | @tailwind base;
 4 | @tailwind components;
 5 | @tailwind utilities;
 6 | @tailwind variants;
 7 | 
 8 | .telephone-input select {
 9 |   max-width: 55px;
10 |   font-size: 14px;
11 |   padding: 10px;
12 | }


--------------------------------------------------------------------------------
/examples/yew/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     "./index.html",
 5 |     "./src/**/*.{rs,html}"
 6 |   ],
 7 |   theme: {},
 8 |   plugins: [],
 9 | }
10 | 
11 | 


--------------------------------------------------------------------------------
/src/dioxus.rs:
--------------------------------------------------------------------------------
  1 | use crate::countries::COUNTRY_CODES;
  2 | use dioxus::prelude::*;
  3 | 
  4 | /// Props for a custom input component.
  5 | /// This struct includes all possible attributes for an HTML `<input>` element.
  6 | /// See [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) for more details.
  7 | #[derive(Props, PartialEq, Clone)]
  8 | pub struct InputProps {
  9 |     /// The type of the input, e.g., "text", "password", etc.
 10 |     #[props(default = "text")]
 11 |     pub r#type: &'static str,
 12 | 
 13 |     /// The label to be displayed for the input field.
 14 |     #[props(default = "")]
 15 |     pub label: &'static str,
 16 | 
 17 |     /// The name of the input field, used for form submission and accessibility.
 18 |     #[props(default = "")]
 19 |     pub name: &'static str,
 20 | 
 21 |     /// Indicates whether the input is required or not.
 22 |     #[props(default = false)]
 23 |     pub required: bool,
 24 | 
 25 |     /// The error message to display when there is a validation error.
 26 |     #[props(default = "")]
 27 |     pub error_message: &'static str,
 28 | 
 29 |     /// The CSS class to be applied to all inner elements.
 30 |     #[props(default = "")]
 31 |     pub input_class: &'static str,
 32 | 
 33 |     /// The CSS class to be applied to the inner input element and icon.
 34 |     #[props(default = "")]
 35 |     pub field_class: &'static str,
 36 | 
 37 |     /// The CSS class to be applied to the label for the input element.
 38 |     #[props(default = "")]
 39 |     pub label_class: &'static str,
 40 | 
 41 |     /// The CSS class to be applied to the input element.
 42 |     #[props(default = "")]
 43 |     pub class: &'static str,
 44 | 
 45 |     /// The CSS class to be applied to the error div element.
 46 |     #[props(default = "")]
 47 |     pub error_class: &'static str,
 48 | 
 49 |     /// The CSS class to be applied to the icon element.
 50 |     #[props(default = "")]
 51 |     pub icon_class: &'static str,
 52 | 
 53 |     /// The state handle for managing the value of the input.
 54 |     pub handle: Signal<String>,
 55 | 
 56 |     /// The state handle for managing the validity state of the input.
 57 |     pub valid_handle: Signal<bool>,
 58 | 
 59 |     /// A callback function to validate the input value. It takes a `String` as input and returns a `bool`.
 60 |     pub validate_function: fn(String) -> bool,
 61 | 
 62 |     /// The icon when the password is visible. Assuming fontawesome icons are used by default.
 63 |     #[props(
 64 |         default = "cursor-pointer right-4 top-1 text-2xl text-gray-600 toggle-button fa fa-eye"
 65 |     )]
 66 |     pub eye_active: &'static str,
 67 | 
 68 |     /// The icon when the password is not visible. Assuming fontawesome icons are used by default.
 69 |     #[props(
 70 |         default = "cursor-pointer right-4 top-1 text-2xl text-gray-600 toggle-button fa fa-eye-slash"
 71 |     )]
 72 |     pub eye_disabled: &'static str,
 73 | 
 74 |     // Accessibility and SEO-related attributes:
 75 |     /// The ID attribute of the input element.
 76 |     #[props(default = "")]
 77 |     pub id: &'static str,
 78 | 
 79 |     /// The placeholder text to be displayed in the input element.
 80 |     #[props(default = "")]
 81 |     pub placeholder: &'static str,
 82 | 
 83 |     /// The aria-label attribute for screen readers, providing a label for accessibility.
 84 |     #[props(default = "")]
 85 |     pub aria_label: &'static str,
 86 | 
 87 |     /// The aria-required attribute for screen readers, indicating whether the input is required.
 88 |     #[props(default = "true")]
 89 |     pub aria_required: &'static str,
 90 | 
 91 |     /// The aria-invalid attribute for screen readers, indicating whether the input value is invalid.
 92 |     #[props(default = "true")]
 93 |     pub aria_invalid: &'static str,
 94 | 
 95 |     /// The aria-describedby attribute for screen readers, describing the input element's error message.
 96 |     #[props(default = "")]
 97 |     pub aria_describedby: &'static str,
 98 | 
 99 |     // Newly added attributes from MDN:
100 |     /// Hint for expected file type in file upload controls.
101 |     #[props(default = "")]
102 |     pub accept: &'static str,
103 | 
104 |     /// The alternative text for `<input type="image">`. Required for accessibility.
105 |     #[props(default = "")]
106 |     pub alt: &'static str,
107 | 
108 |     /// Controls automatic capitalization in inputted text.
109 |     #[props(default = "")]
110 |     pub autocapitalize: &'static str,
111 | 
112 |     /// Hint for the browser's autofill feature.
113 |     #[props(default = "")]
114 |     pub autocomplete: &'static str,
115 | 
116 |     /// Media capture input method in file upload controls.
117 |     #[props(default = "")]
118 |     pub capture: &'static str,
119 | 
120 |     /// Whether the control is checked (for checkboxes or radio buttons).
121 |     #[props(default = false)]
122 |     pub checked: bool,
123 | 
124 |     /// Name of the form field to use for sending the element's directionality in form submission.
125 |     #[props(default = "")]
126 |     pub dirname: &'static str,
127 | 
128 |     /// Whether the form control is disabled.
129 |     #[props(default = false)]
130 |     pub disabled: bool,
131 | 
132 |     /// Associates the input with a specific form element.
133 |     #[props(default = "")]
134 |     pub form: &'static str,
135 | 
136 |     /// URL to use for form submission (for `<input type="image" | "submit">`).
137 |     #[props(default = "")]
138 |     pub formaction: &'static str,
139 | 
140 |     /// Form data set encoding type for submission (for `<input type="image" | "submit">`).
141 |     #[props(default = "")]
142 |     pub formenctype: &'static str,
143 | 
144 |     /// HTTP method to use for form submission (for `<input type="image" | "submit">`).
145 |     #[props(default = "")]
146 |     pub formmethod: &'static str,
147 | 
148 |     /// Bypass form validation for submission (for `<input type="image" | "submit">`).
149 |     #[props(default = false)]
150 |     pub formnovalidate: bool,
151 | 
152 |     /// Browsing context for form submission (for `<input type="image" | "submit">`).
153 |     #[props(default = "")]
154 |     pub formtarget: &'static str,
155 | 
156 |     /// Same as the `height` attribute for `<img>` elements.
157 |     #[props(default = None)]
158 |     pub height: Option<u32>,
159 | 
160 |     /// ID of the `<datalist>` element to use for autocomplete suggestions.
161 |     #[props(default = "")]
162 |     pub list: &'static str,
163 | 
164 |     /// The maximum value for date, number, range, etc.
165 |     #[props(default = "")]
166 |     pub max: &'static str,
167 | 
168 |     /// Maximum length of the input value (in characters).
169 |     #[props(default = None)]
170 |     pub maxlength: Option<usize>,
171 | 
172 |     /// The minimum value for date, number, range, etc.
173 |     #[props(default = "")]
174 |     pub min: &'static str,
175 | 
176 |     /// Minimum length of the input value (in characters).
177 |     #[props(default = None)]
178 |     pub minlength: Option<usize>,
179 | 
180 |     /// Boolean indicating whether multiple values are allowed (for file inputs, emails, etc.).
181 |     #[props(default = false)]
182 |     pub multiple: bool,
183 | 
184 |     /// Regex pattern the value must match to be valid.
185 |     #[props(default = ".*")]
186 |     pub pattern: &'static str,
187 | 
188 |     /// Boolean indicating whether the input is read-only.
189 |     #[props(default = false)]
190 |     pub readonly: bool,
191 | 
192 |     /// Size of the input field (e.g., character width).
193 |     #[props(default = None)]
194 |     pub size: Option<u32>,
195 | 
196 |     /// Address of the image resource for `<input type="image">`.
197 |     #[props(default = "")]
198 |     pub src: &'static str,
199 | 
200 |     /// Incremental values that are valid for the input.
201 |     #[props(default = "")]
202 |     pub step: &'static str,
203 | 
204 |     /// The value of the control (used for two-way data binding).
205 |     #[props(default = "")]
206 |     pub value: &'static str,
207 | 
208 |     /// Same as the `width` attribute for `<img>` elements.
209 |     #[props(default = None)]
210 |     pub width: Option<u32>,
211 | }
212 | 
213 | /// A custom input component that handles user input and validation.
214 | ///
215 | /// # Arguments
216 | /// * `props` - The properties of the component.
217 | ///   - `valid_handle` - A state hook to track the validity of the input.
218 | ///   - `aria_invalid` - A string representing the 'aria-invalid' attribute value for accessibility. Defaults to "true".
219 | ///   - `aria_required` - A string representing the 'aria-required' attribute value for accessibility. Defaults to "true".
220 | ///   - `r#type` - The type of the input element. Defaults to "text".
221 | ///   - `handle` - A state hook to set the value of the input.
222 | ///   - `validate_function` - A function to validate the input value.
223 | ///
224 | /// # Returns
225 | /// (Element): A Dioxus element representation of the input component.
226 | ///
227 | /// # Examples
228 | /// ```rust
229 | /// use regex::Regex;
230 | /// use input_rs::dioxus::Input;
231 | /// use dioxus::prelude::*;
232 | ///
233 | /// #[derive(Debug, Default, Clone)]
234 | /// struct LoginUserSchema {
235 | ///     email: String,
236 | ///     password: String,
237 | /// }
238 | ///
239 | /// fn LoginFormOne() -> Element {
240 | ///     let error_handle = use_signal(|| String::new());
241 | ///     let email_valid_handle = use_signal(|| true);
242 | ///     let password_valid_handle = use_signal(|| true);
243 | ///
244 | ///     let email_handle = use_signal(|| String::new());
245 | ///     let password_handle = use_signal(|| String::new());
246 | ///
247 | ///     let validate_email = |email: String| {
248 | ///         let pattern = Regex::new(r"^[^ ]+@[^ ]+\.[a-z]{2,3}$").unwrap();
249 | ///         pattern.is_match(&email)
250 | ///     };
251 | ///     
252 | ///     let validate_password = |password: String| {
253 | ///         !password.is_empty()
254 | ///     };
255 | ///
256 | ///     let onsubmit = {
257 | ///         move |e: FormEvent| {
258 | ///             e.stop_propagation();
259 | ///             // Custom logic for your endpoint goes here.
260 | ///         }
261 | ///     };
262 | ///
263 | ///     rsx! {
264 | ///         div {
265 | ///             class: "form-one-content",
266 | ///             role: "main",
267 | ///             aria_label: "Sign In Form",
268 | ///             div {
269 | ///                 class: "text",
270 | ///                 h2 { "Sign In" }
271 | ///                 if !error_handle().is_empty() {
272 | ///                     div { class: "error", "{error_handle}" }
273 | ///                 }
274 | ///             }
275 | ///             form {
276 | ///                 onsubmit: onsubmit,
277 | ///                 aria_label: "Sign In Form",
278 | ///                 Input {
279 | ///                     r#type: "text",
280 | ///                     handle: email_handle,
281 | ///                     name: "email",
282 | ///                     placeholder: "Email",
283 | ///                     icon_class: "fas fa-user",
284 | ///                     error_message: "Enter a valid email address",
285 | ///                     field_class: "form-one-field",
286 | ///                     error_class: "error-txt",
287 | ///                     required: true,
288 | ///                     valid_handle: email_valid_handle,
289 | ///                     validate_function: validate_email,
290 | ///                 }
291 | ///                 Input {
292 | ///                     r#type: "password",
293 | ///                     handle: password_handle,
294 | ///                     name: "password",
295 | ///                     placeholder: "Password",
296 | ///                     icon_class: "fas fa-lock",
297 | ///                     error_message: "Password can't be blank!",
298 | ///                     field_class: "form-one-field",
299 | ///                     error_class: "error-txt",
300 | ///                     required: true,
301 | ///                     valid_handle: password_valid_handle,
302 | ///                     validate_function: validate_password,
303 | ///                     eye_active: "fa fa-eye",
304 | ///                     eye_disabled: "fa fa-eye-slash",
305 | ///                 }
306 | ///                 div {
307 | ///                     class: "form-one-forgot-pass",
308 | ///                     a {
309 | ///                         href: "#",
310 | ///                         aria_label: "Forgot Password?",
311 | ///                         "Forgot Password?"
312 | ///                     }
313 | ///                 }
314 | ///                 button {
315 | ///                     r#type: "submit",
316 | ///                     "Sign in"
317 | ///                 }
318 | ///                 div {
319 | ///                     class: "sign-up",
320 | ///                     "Not a member? ",
321 | ///                     a {
322 | ///                         href: "#",
323 | ///                         aria_label: "Sign up now",
324 | ///                         "Sign up now"
325 | ///                     }
326 | ///                 }
327 | ///             }
328 | ///         }
329 | ///     }
330 | /// }
331 | /// ```
332 | #[component]
333 | pub fn Input(mut props: InputProps) -> Element {
334 |     let mut is_eye_active = use_signal(|| false);
335 |     let password_type = if is_eye_active() { "text" } else { "password" };
336 |     let mut country = use_signal(String::default);
337 | 
338 |     let onchange = {
339 |         move |e: Event<FormData>| {
340 |             let value = e.value();
341 |             props.handle.set(value.clone());
342 |             props.valid_handle.set((props.validate_function)(value));
343 |         }
344 |     };
345 | 
346 |     let on_select_change = {
347 |         move |e: Event<FormData>| {
348 |             let value = e.value();
349 |             country.set(value.clone());
350 |             props.handle.set(value);
351 |         }
352 |     };
353 | 
354 |     let on_phone_number_input = {
355 |         move |e: Event<FormData>| {
356 |             let input_value = e.value();
357 |             for (code, _, _, _, _, _) in &COUNTRY_CODES {
358 |                 if code.starts_with(&input_value) {
359 |                     country.set(input_value);
360 |                     break;
361 |                 }
362 |             }
363 |             // Filter out non-numeric characters
364 |             let numeric_value: String = e.value().chars().filter(|c| c.is_numeric()).collect();
365 |             props.handle.set('+'.to_string() + &numeric_value);
366 |         }
367 |     };
368 | 
369 |     let toggle_eye_icon = {
370 |         move |_| {
371 |             is_eye_active.set(!is_eye_active());
372 |         }
373 |     };
374 | 
375 |     let input_field = match props.r#type {
376 |         "password" => rsx! {
377 |             input {
378 |                 r#type: "{password_type}",
379 |                 class: "{props.input_class}",
380 |                 id: "{props.id}",
381 |                 name: "{props.name}",
382 |                 value: "{props.handle}",
383 |                 placeholder: "{props.placeholder}",
384 |                 aria_label: "{props.aria_label}",
385 |                 aria_required: "{props.aria_required}",
386 |                 aria_invalid: "{props.aria_invalid}",
387 |                 aria_describedby: "{props.aria_describedby}",
388 |                 oninput: onchange,
389 |                 required: props.required,
390 |                 autocomplete: props.autocomplete,
391 |                 autocapitalize: props.autocapitalize,
392 |                 readonly: "{props.readonly}",
393 |                 disabled: "{props.disabled}",
394 |                 minlength: props.minlength.map(|v| v.to_string()).unwrap_or_default(),
395 |                 maxlength: props.maxlength.map(|v| v.to_string()).unwrap_or_default(),
396 |                 pattern: "{props.pattern}",
397 |                 size: props.size.map(|v| v.to_string()).unwrap_or_default(),
398 |             }
399 |             span {
400 |                 class: if is_eye_active() { props.eye_active } else { props.eye_disabled },
401 |                 onclick: toggle_eye_icon
402 |             }
403 |         },
404 |         "tel" => rsx! {
405 |             select {
406 |                 style: "max-width: 55px; font-size: 14px; padding: 10px;",
407 |                 onchange: on_select_change,
408 |                 { COUNTRY_CODES.iter().map(|(code, emoji, _, name, _, _)| rsx! {
409 |                     option { value: "{code}", selected: *code == country(), "{emoji} {name} ({code})" }
410 |                 })}
411 |             }
412 |             input {
413 |                 r#type: "tel",
414 |                 class: "{props.input_class}",
415 |                 id: "{props.id}",
416 |                 name: "{props.name}",
417 |                 value: "{props.handle}",
418 |                 placeholder: "{props.placeholder}",
419 |                 aria_label: "{props.aria_label}",
420 |                 aria_required: "{props.aria_required}",
421 |                 aria_invalid: "{props.aria_invalid}",
422 |                 aria_describedby: "{props.aria_describedby}",
423 |                 oninput: on_phone_number_input,
424 |                 required: props.required,
425 |                 autocomplete: props.autocomplete,
426 |                 autocapitalize: props.autocapitalize,
427 |                 readonly: "{props.readonly}",
428 |                 disabled: "{props.disabled}",
429 |                 minlength: props.minlength.map(|v| v.to_string()).unwrap_or_default(),
430 |                 maxlength: props.maxlength.map(|v| v.to_string()).unwrap_or_default(),
431 |                 pattern: "{props.pattern}",
432 |                 size: props.size.map(|v| v.to_string()).unwrap_or_default(),
433 |             }
434 |         },
435 |         "textarea" => rsx! {
436 |             textarea {
437 |                 class: "{props.input_class}",
438 |                 id: "{props.id}",
439 |                 name: "{props.name}",
440 |                 value: "{props.handle}",
441 |                 placeholder: "{props.placeholder}",
442 |                 aria_label: "{props.aria_label}",
443 |                 aria_required: "{props.aria_required}",
444 |                 aria_invalid: "{props.aria_invalid}",
445 |                 aria_describedby: "{props.aria_describedby}",
446 |                 oninput: onchange,
447 |                 required: props.required,
448 |                 readonly: "{props.readonly}",
449 |                 disabled: "{props.disabled}",
450 |                 minlength: props.minlength.map(|v| v.to_string()).unwrap_or_default(),
451 |                 maxlength: props.maxlength.map(|v| v.to_string()).unwrap_or_default(),
452 |             }
453 |         },
454 |         _ => rsx! {
455 |             input {
456 |                 r#type: "{props.r#type}",
457 |                 class: "{props.input_class}",
458 |                 id: "{props.id}",
459 |                 name: "{props.name}",
460 |                 value: "{props.handle}",
461 |                 placeholder: "{props.placeholder}",
462 |                 aria_label: "{props.aria_label}",
463 |                 aria_required: "{props.aria_required}",
464 |                 aria_invalid: "{props.aria_invalid}",
465 |                 aria_describedby: "{props.aria_describedby}",
466 |                 oninput: onchange,
467 |                 required: props.required,
468 |                 autocomplete: props.autocomplete,
469 |                 autocapitalize: props.autocapitalize,
470 |                 readonly: "{props.readonly}",
471 |                 disabled: "{props.disabled}",
472 |                 minlength: props.minlength.map(|v| v.to_string()).unwrap_or_default(),
473 |                 maxlength: props.maxlength.map(|v| v.to_string()).unwrap_or_default(),
474 |                 pattern: "{props.pattern}",
475 |                 size: props.size.map(|v| v.to_string()).unwrap_or_default(),
476 |             }
477 |         },
478 |     };
479 | 
480 |     rsx! {
481 |         div {
482 |             class: "{props.class}",
483 |             label {
484 |                 class: "{props.label_class}",
485 |                 r#for: "{props.id}",
486 |                 "{props.label}"
487 |             }
488 |             div {
489 |                 class: "{props.field_class}",
490 |                 {input_field}
491 |                 span {class: "{props.icon_class}" }
492 |             }
493 |             if !(props.valid_handle)() {
494 |                 div {
495 |                     class: "{props.error_class}",
496 |                     id: "{props.aria_describedby}",
497 |                     "{props.error_message}"
498 |                 }
499 |             }
500 |         }
501 |     }
502 | }
503 | 


--------------------------------------------------------------------------------
/src/leptos.rs:
--------------------------------------------------------------------------------
  1 | #![allow(unused)]
  2 | 
  3 | use crate::countries::COUNTRY_CODES;
  4 | use leptos::{ev::MouseEvent, prelude::*, *};
  5 | 
  6 | /// A custom input component that handles user input and validation.
  7 | ///
  8 | /// # Arguments
  9 | /// * `props` - The properties of the component.
 10 | ///   - `valid_handle` - A state hook to track the validity of the input.
 11 | ///   - `aria_invalid` - A string representing the 'aria-invalid' attribute value for accessibility. Defaults to "true".
 12 | ///   - `aria_required` - A string representing the 'aria-required' attribute value for accessibility. Defaults to "true".
 13 | ///   - `r#type` - The type of the input element. Defaults to "text".
 14 | ///   - `handle` - A state hook to set the value of the input.
 15 | ///   - `validate_function` - A function to validate the input value.
 16 | ///
 17 | /// # Returns
 18 | /// (IntoView): A Leptos element representation of the input component.
 19 | ///
 20 | /// # Examples
 21 | /// ```rust
 22 | /// use leptos::{prelude::*, *};
 23 | /// use regex::Regex;
 24 | /// use serde::{Deserialize, Serialize};
 25 | /// use input_rs::leptos::Input;
 26 | ///
 27 | ///
 28 | /// #[derive(Debug, Default, Clone, Serialize, Deserialize)]
 29 | /// struct LoginUserSchema {
 30 | ///     email: String,
 31 | ///     password: String,
 32 | /// }
 33 | ///
 34 | /// fn validate_email(email: String) -> bool {
 35 | ///     let pattern = Regex::new(r"^[^ ]+@[^ ]+\.[a-z]{2,3}$").unwrap();
 36 | ///     pattern.is_match(&email)
 37 | /// }
 38 | ///
 39 | /// fn validate_password(password: String) -> bool {
 40 | ///     !&password.is_empty()
 41 | /// }
 42 | ///
 43 | /// #[component]
 44 | /// fn LoginForm() -> impl IntoView {
 45 | ///     let error_handle = signal(String::default());
 46 | ///     let error = error_handle.0.get();
 47 | ///
 48 | ///     let email_valid_handle = signal(true);
 49 | ///     let email_valid = email_valid_handle.0.get();
 50 | ///
 51 | ///     let password_valid_handle = signal(true);
 52 | ///     let password_valid = password_valid_handle.0.get();
 53 | ///
 54 | ///     let email_handle = signal(String::default());
 55 | ///     let email = email_handle.0.get();
 56 | ///
 57 | ///     let password_handle = signal(String::default());
 58 | ///     let password = password_handle.0.get();
 59 | ///
 60 | ///     let onsubmit = move |ev: leptos::ev::SubmitEvent| {
 61 | ///         ev.prevent_default();
 62 | ///
 63 | ///         let email_ref = email.clone();
 64 | ///         let password_ref = password.clone();
 65 | ///         let error_handle = error_handle.clone();
 66 | ///
 67 | ///         // Custom logic for your endpoint goes here
 68 | ///     };
 69 | ///
 70 | ///     view! {
 71 | ///         <div class="form-one-content" role="main" aria-label="Sign In Form">
 72 | ///             <div class="text">
 73 | ///                 <h2>{"Sign In"}</h2>
 74 | ///                 { move || if !error.is_empty() {
 75 | ///                         Some(view! {<div class="error">error</div>})
 76 | ///                     }
 77 | ///                         else {None}
 78 | ///                 }
 79 | ///             </div>
 80 | ///             <form on:submit={onsubmit}>
 81 | ///                 <Input
 82 | ///                     r#type="text"
 83 | ///                     handle={email_handle}
 84 | ///                     name="email"
 85 | ///                     label="Email"
 86 | ///                     placeholder="Email"
 87 | ///                     input_class="form-one-field"
 88 | ///                     field_class="form-one-field"
 89 | ///                     error_class="error-txt"
 90 | ///                     required=true
 91 | ///                     valid_handle={email_valid_handle}
 92 | ///                     validate_function={validate_email}
 93 | ///                     error_message="Enter a valid email address"
 94 | ///                 />
 95 | ///                 <Input
 96 | ///                     r#type="password"
 97 | ///                     handle={password_handle}
 98 | ///                     name="password"
 99 | ///                     label="Password"
100 | ///                     placeholder="Password"
101 | ///                     input_class="form-one-field"
102 | ///                     field_class="form-one-field"
103 | ///                     error_class="error-txt"
104 | ///                     required=true
105 | ///                     valid_handle={password_valid_handle}
106 | ///                     validate_function={validate_password}
107 | ///                     error_message="Password can't be blank!"
108 | ///                     eye_active="fa fa-eye"
109 | ///                     eye_disabled="fa fa-eye-slash"
110 | ///                 />
111 | ///                 <div class="form-one-forgot-pass">
112 | ///                     <a href="#">{"Forgot Password?"}</a>
113 | ///                 </div>
114 | ///                 <button type="submit">{"Sign in"}</button>
115 | ///                 <div class="sign-up">
116 | ///                     {"Not a member?"}
117 | ///                     <a href="#">{"Sign up now"}</a>
118 | ///                 </div>
119 | ///             </form>
120 | ///         </div>
121 | ///     }
122 | /// }
123 | /// ```
124 | #[component]
125 | pub fn Input(
126 |     /// Props for a custom input component.
127 |     /// This struct includes all possible attributes for an HTML `<input>` element.
128 |     /// See [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) for more details.
129 |     ///
130 |     /// The type of the input, e.g., "text", "password", etc.
131 |     #[prop(default = "text")]
132 |     r#type: &'static str,
133 | 
134 |     /// The label to be displayed for the input field.
135 |     #[prop(default = "")]
136 |     label: &'static str,
137 | 
138 |     /// The name of the input field, used for form submission and accessibility.
139 |     #[prop(default = "")]
140 |     name: &'static str,
141 | 
142 |     /// Indicates whether the input is required or not.
143 |     #[prop(default = false)]
144 |     required: bool,
145 | 
146 |     /// The error message to display when there is a validation error.
147 |     #[prop(default = "")]
148 |     error_message: &'static str,
149 | 
150 |     /// The CSS class to be applied to all inner elements.
151 |     #[prop(default = "")]
152 |     input_class: &'static str,
153 | 
154 |     /// The CSS class to be applied to the inner input element and icon.
155 |     #[prop(default = "")]
156 |     field_class: &'static str,
157 | 
158 |     /// The CSS class to be applied to the label for the input element.
159 |     #[prop(default = "")]
160 |     label_class: &'static str,
161 | 
162 |     /// The CSS class to be applied to the input element.
163 |     #[prop(default = "")]
164 |     class: &'static str,
165 | 
166 |     /// The CSS class to be applied to the error div element.
167 |     #[prop(default = "")]
168 |     error_class: &'static str,
169 | 
170 |     /// The CSS class to be applied to the icon element.
171 |     #[prop(default = "")]
172 |     icon_class: &'static str,
173 | 
174 |     /// The state handle for managing the value of the input.
175 |     handle: (ReadSignal<String>, WriteSignal<String>),
176 | 
177 |     /// The state handle for managing the validity state of the input.
178 |     valid_handle: (ReadSignal<bool>, WriteSignal<bool>),
179 | 
180 |     /// A callback function to validate the input value. It takes a `String` as input and returns a `bool`.
181 |     validate_function: fn(String) -> bool,
182 | 
183 |     /// The icon when the password is visible. Assuming fontawesome icons are used by default.
184 |     #[prop(
185 |         default = "cursor-pointer right-4 top-1 text-2xl text-gray-600 toggle-button fa fa-eye"
186 |     )]
187 |     eye_active: &'static str,
188 | 
189 |     /// The icon when the password is not visible. Assuming fontawesome icons are used by default.
190 |     #[prop(
191 |         default = "cursor-pointer right-4 top-1 text-2xl text-gray-600 toggle-button fa fa-eye-slash"
192 |     )]
193 |     eye_disabled: &'static str,
194 | 
195 |     // Accessibility and SEO-related attributes:
196 |     /// The ID attribute of the input element.
197 |     #[prop(default = "")]
198 |     id: &'static str,
199 | 
200 |     /// The placeholder text to be displayed in the input element.
201 |     #[prop(default = "")]
202 |     placeholder: &'static str,
203 | 
204 |     /// The aria-label attribute for screen readers, providing a label for accessibility.
205 |     #[prop(default = "")]
206 |     aria_label: &'static str,
207 | 
208 |     /// The aria-required attribute for screen readers, indicating whether the input is required.
209 |     #[prop(default = "true")]
210 |     aria_required: &'static str,
211 | 
212 |     /// The aria-invalid attribute for screen readers, indicating whether the input value is invalid.
213 |     #[prop(default = "true")]
214 |     aria_invalid: &'static str,
215 | 
216 |     /// The aria-describedby attribute for screen readers, describing the input element's error message.
217 |     #[prop(default = "")]
218 |     aria_describedby: &'static str,
219 | 
220 |     // Newly added attributes from MDN:
221 |     /// Hint for expected file type in file upload controls.
222 |     #[prop(default = "")]
223 |     accept: &'static str,
224 | 
225 |     /// The alternative text for `<input r#type="image">`. Required for accessibility.
226 |     #[prop(default = "")]
227 |     alt: &'static str,
228 | 
229 |     /// Controls automatic capitalization in inputted text.
230 |     #[prop(default = "")]
231 |     autocapitalize: &'static str,
232 | 
233 |     /// Hint for the browser's autofill feature.
234 |     #[prop(default = "")]
235 |     autocomplete: &'static str,
236 | 
237 |     /// Media capture input method in file upload controls.
238 |     #[prop(default = "")]
239 |     capture: &'static str,
240 | 
241 |     /// Whether the control is checked (for checkboxes or radio buttons).
242 |     #[prop(default = false)]
243 |     checked: bool,
244 | 
245 |     /// Name of the form field to use for sending the element's directionality in form submission.
246 |     #[prop(default = "")]
247 |     dirname: &'static str,
248 | 
249 |     /// Whether the form control is disabled.
250 |     #[prop(default = false)]
251 |     disabled: bool,
252 | 
253 |     /// Associates the input with a specific form element.
254 |     #[prop(default = "")]
255 |     form: &'static str,
256 | 
257 |     /// URL to use for form submission (for `<input r#type="image" | "submit">`).
258 |     #[prop(default = "")]
259 |     formaction: &'static str,
260 | 
261 |     /// Form data set encoding type for submission (for `<input r#type="image" | "submit">`).
262 |     #[prop(default = "")]
263 |     formenctype: &'static str,
264 | 
265 |     /// HTTP method to use for form submission (for `<input r#type="image" | "submit">`).
266 |     #[prop(default = "")]
267 |     formmethod: &'static str,
268 | 
269 |     /// Bypass form validation for submission (for `<input r#type="image" | "submit">`).
270 |     #[prop(default = false)]
271 |     formnovalidate: bool,
272 | 
273 |     /// Browsing context for form submission (for `<input r#type="image" | "submit">`).
274 |     #[prop(default = "")]
275 |     formtarget: &'static str,
276 | 
277 |     /// Same as the `height` attribute for `<img>` elements.
278 |     #[prop(default = None)]
279 |     height: Option<u32>,
280 | 
281 |     /// ID of the `<datalist>` element to use for autocomplete suggestions.
282 |     #[prop(default = "")]
283 |     list: &'static str,
284 | 
285 |     /// The maximum value for date, number, range, etc.
286 |     #[prop(default = "")]
287 |     max: &'static str,
288 | 
289 |     /// Maximum length of the input value (in characters).
290 |     #[prop(default = None)]
291 |     maxlength: Option<usize>,
292 | 
293 |     /// The minimum value for date, number, range, etc.
294 |     #[prop(default = "")]
295 |     min: &'static str,
296 | 
297 |     /// Minimum length of the input value (in characters).
298 |     #[prop(default = None)]
299 |     minlength: Option<usize>,
300 | 
301 |     /// Boolean indicating whether multiple values are allowed (for file inputs, emails, etc.).
302 |     #[prop(default = false)]
303 |     multiple: bool,
304 | 
305 |     /// Regex pattern the value must match to be valid.
306 |     #[prop(default = ".*")]
307 |     pattern: &'static str,
308 | 
309 |     /// Boolean indicating whether the input is read-only.
310 |     #[prop(default = false)]
311 |     readonly: bool,
312 | 
313 |     /// Size of the input field (e.g., character width).
314 |     #[prop(default = None)]
315 |     size: Option<u32>,
316 | 
317 |     /// Address of the image resource for `<input r#type="image">`.
318 |     #[prop(default = "")]
319 |     src: &'static str,
320 | 
321 |     /// Incremental values that are valid for the input.
322 |     #[prop(default = "")]
323 |     step: &'static str,
324 | 
325 |     /// The value of the control (used for two-way data binding).
326 |     #[prop(default = "")]
327 |     value: &'static str,
328 | 
329 |     /// Same as the `width` attribute for `<img>` elements.
330 |     #[prop(default = None)]
331 |     width: Option<u32>,
332 | ) -> impl IntoView {
333 |     let (eye_active_handle, set_eye_active_handle) = signal(false);
334 |     let (password_type, set_password_type) = signal("password".to_string());
335 |     let valid = valid_handle;
336 |     let input_ref: NodeRef<html::Input> = NodeRef::new();
337 | 
338 |     let onchange = {
339 |         move |ev: web_sys::Event| {
340 |             let input_value = input_ref.get().expect("<input> should be mounted").value();
341 |             handle.1.set(input_value.clone());
342 |             valid.1.set(validate_function(input_value));
343 |         }
344 |     };
345 | 
346 |     let on_toggle_password = {
347 |         move |ev: MouseEvent| {
348 |             if eye_active_handle.get() {
349 |                 set_password_type.set("password".to_string());
350 |             } else {
351 |                 set_password_type.set("text".to_string());
352 |             }
353 |             set_eye_active_handle.set(!eye_active_handle.get());
354 |         }
355 |     };
356 | 
357 |     let tag = {
358 |         move || {
359 |             match r#type {
360 |             "password" => Some(view! {
361 |                 <>
362 |                     <input
363 |                         r#type={password_type.get()}
364 |                         class={input_class}
365 |                         id={id}
366 |                         name={name}
367 |                         value={handle.0.get()}
368 |                         placeholder={placeholder}
369 |                         aria-label={aria_label}
370 |                         aria-required={aria_required}
371 |                         aria-invalid={aria_invalid}
372 |                         aria-describedby={aria_describedby}
373 |                         on:input={onchange}
374 |                         required={required}
375 |                         node_ref={input_ref}
376 |                         autocomplete={autocomplete}
377 |                         autocapitalize={autocapitalize}
378 |                         readonly={readonly}
379 |                         minlength={minlength.map(|v| v.to_string())}
380 |                         maxlength={maxlength.map(|v| v.to_string())}
381 |                         pattern={pattern}
382 |                         size={size.map(|v| v.to_string())}
383 |                         disabled={disabled}
384 |                         list={list}
385 |                         step={step}
386 |                         min={min}
387 |                         max={max}
388 |                         accept={accept}
389 |                     />
390 |                     <span
391 |                         class={if eye_active_handle.get() { eye_active } else { eye_disabled }}
392 |                         on:click={on_toggle_password}
393 |                     />
394 |                 </>
395 |             }.into_any()),
396 |             // "textarea" => Some(view! {
397 |             //     <>
398 |             //         <textarea
399 |             //             class={input_class}
400 |             //             id={id}
401 |             //             name={name}
402 |             //             placeholder={placeholder}
403 |             //             aria-label={aria_label}
404 |             //             aria-required={aria_required}
405 |             //             aria-invalid={aria_invalid}
406 |             //             aria-describedby={aria_describedby}
407 |             //             on:input={onchange}
408 |             //             required={required}
409 |             //             node_ref={input_ref}
410 |             //         />
411 |             //     </>
412 |             // }.into_any()),
413 |             "tel" => Some(view! {
414 |                 <>
415 |                     <select class={field_class} on:change={onchange}>
416 |                         <For
417 |                             each=move || COUNTRY_CODES
418 |                             key=|country| *country
419 |                             let:country
420 |                         >
421 |                             {move || {
422 |                                 let (code, emoji, _, name, _, _) = country;
423 |                                 view! {
424 |                                     <option value={code} selected={*code == handle.0.get()}>{ format!("{} {} {}", emoji, name, code) }</option>
425 |                                 }
426 |                             }}
427 |                         </For>
428 |                     </select>
429 |                     <input
430 |                         r#type={"tel"}
431 |                         class={input_class}
432 |                         id={id}
433 |                         name={name}
434 |                         value={handle.0.get()}
435 |                         placeholder={placeholder}
436 |                         aria-label={aria_label}
437 |                         aria-required={aria_required}
438 |                         aria-invalid={aria_invalid}
439 |                         aria-describedby={aria_describedby}
440 |                         on:input={onchange}
441 |                         required={required}
442 |                         node_ref={input_ref}
443 |                         autocomplete={autocomplete}
444 |                         autocapitalize={autocapitalize}
445 |                         readonly={readonly}
446 |                         minlength={minlength.map(|v| v.to_string())}
447 |                         maxlength={maxlength.map(|v| v.to_string())}
448 |                         pattern={pattern}
449 |                         size={size.map(|v| v.to_string())}
450 |                         disabled={disabled}
451 |                         list={list}
452 |                         step={step}
453 |                         min={min}
454 |                         max={max}
455 |                         accept={accept}
456 |                     />
457 |                 </>
458 |             }.into_any()),
459 |             _ => Some(view! {
460 |                 <>
461 |                     <input
462 |                         r#type={r#type.to_string()}
463 |                         class={input_class}
464 |                         id={id}
465 |                         name={name}
466 |                         value={handle.0.get()}
467 |                         placeholder={placeholder}
468 |                         aria-label={aria_label}
469 |                         aria-required={aria_required}
470 |                         aria-invalid={aria_invalid}
471 |                         aria-describedby={aria_describedby}
472 |                         on:input={onchange}
473 |                         required={required}
474 |                         node_ref={input_ref}
475 |                         autocomplete={autocomplete}
476 |                         autocapitalize={autocapitalize}
477 |                         readonly={readonly}
478 |                         minlength={minlength.map(|v| v.to_string())}
479 |                         maxlength={maxlength.map(|v| v.to_string())}
480 |                         pattern={pattern}
481 |                         size={size.map(|v| v.to_string())}
482 |                         disabled={disabled}
483 |                         list={list}
484 |                         step={step}
485 |                         min={min}
486 |                         max={max}
487 |                         accept={accept}
488 |                     />
489 |                 </>
490 |             }.into_any()),
491 |         }
492 |         }
493 |     };
494 | 
495 |     view! {
496 |         <div class={class}>
497 |             <label class={label_class} for={id}>{label}</label>
498 |             <div class={field_class}>
499 |                 {tag}
500 |                 <span class={icon_class} />
501 |             </div>
502 |             {move ||
503 |                 if !valid.0.get() {
504 |                     Some(view! {
505 |                         <div class={error_class} id={aria_describedby}>
506 |                             {error_message}
507 |                         </div>
508 |                     })
509 |                 } else {
510 |                     None
511 |                 }
512 |             }
513 |         </div>
514 |     }
515 | }
516 | 


--------------------------------------------------------------------------------
/src/lib.rs:
--------------------------------------------------------------------------------
 1 | #![doc(
 2 |     html_logo_url = "https://raw.githubusercontent.com/opensass/input-rs/refs/heads/main/assets/logo-new.png",
 3 |     html_favicon_url = "https://raw.githubusercontent.com/opensass/input-rs/refs/heads/main/assets/favicon.png"
 4 | )]
 5 | #![cfg_attr(docsrs, feature(doc_auto_cfg))]
 6 | #![doc = include_str!("../README.md")]
 7 | 
 8 | pub(crate) mod countries;
 9 | #[cfg(feature = "dio")]
10 | pub mod dioxus;
11 | #[cfg(feature = "lep")]
12 | pub mod leptos;
13 | #[cfg(feature = "yew")]
14 | pub mod yew;
15 | 


--------------------------------------------------------------------------------