Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: migrate to dioxus 0.6 && update docs #16

Merged
merged 1 commit into from
Dec 26, 2024
Merged

feat: migrate to dioxus 0.6 && update docs #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions Cargo.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ name = "input-rs"
version = "0.2.3"
edition = "2021"
rust-version = "1.79"
description = "A feature-rich, accessible, highly customizable, functional, reusable input component for Wasm Frameworks."
description = "🔤 A highly customizable input component for WASM frameworks like Yew, Dioxus, and Leptos."
license = "Apache-2.0"
keywords = ["input", "yew", "dioxus", "leptos", "input-rs"]
categories = ["web-programming", "science"]
Expand All @@ -17,8 +17,8 @@ exclude = ["assets", "examples"]
[dependencies]
web-sys = { version = "0.3", default-features = false }
yew = { version = "0.21.0", default-features = false, optional = true }
dioxus = { version = "0.5", optional = true }
leptos = { version = "0.7.0", optional = true }
dioxus = { version = "0.6.1", optional = true }
leptos = { version = "0.7.2", optional = true }

[dev-dependencies]
bump2version = "0.1.4"
Expand All @@ -39,5 +39,9 @@ panic = "abort"
strip = "symbols"
incremental = false

[package.metadata.docs.rs]
all-features = true
rustdoc-args = ["--cfg", "docsrs"]

[badges]
maintenance = { status = "actively-developed" }
127 changes: 127 additions & 0 deletions DIOXUS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
# 🧬 Input RS Dioxus Usage

Adding Input RS to your project is simple:

1. Make sure your project is set up with **Dioxus**. Refer to the [Dioxus Getting Started Guide](https://dioxuslabs.com/learn/0.6/getting_started) for setup instructions.

1. Add the Input component to your dependencies by including it in your `Cargo.toml` file.

```sh
cargo add input-rs --features=dio
```

1. Import the `Input` components into your Dioxus component and start using it in your app.

## 🛠️ Usage

Incorporating the Input component into your application is easy. Follow these steps:

1. Import `Input` into your component:

```rust
use dioxus::prelude::*;
use input_rs::dioxus::Input;
```

1. Use the `Input` component in your application:

```rust
use dioxus::prelude::*;
use input_rs::dioxus::Input;

#[component]
pub fn App() -> Element {
let input_value = use_signal(|| String::new());
let is_valid = use_signal(|| true);

fn validate_input(value: String) -> bool {
!value.trim().is_empty()
}

rsx! {
div {
class: "app-container",
h1 { "Custom Input Example" }
Input {
r#type: "text",
label: "Enter your name:",
id: "name-input",
handle: input_value.clone(),
valid_handle: is_valid.clone(),
validate_function: validate_input,
placeholder: "Type here...",
class: "custom-input",
label_class: "input-label",
field_class: "input-field",
error_message: "This field cannot be empty",
error_class: "input-error",
}
if !is_valid() {
p { class: "error-message", "Please correct the input." }
}
}
}
}
```

## 🔧 Props

### Main Props

| Property | Type | Description | Default |
| ------------------- | -------------------- | ------------------------------------------------------------------------------------ | -------- |
| `r#type` | `&'static str` | Type of the input (e.g., `text`, `password`, `email`, etc.). | `"text"` |
| `label` | `&'static str` | Label text for the input field. | `""` |
| `id` | `&'static str` | Unique ID for the input element. | `""` |
| `placeholder` | `&'static str` | Placeholder text for the input. | `""` |
| `handle` | `Signal<String>` | Signal handle for the input value. | None |
| `valid_handle` | `Signal<bool>` | Signal handle for the validity of the input value. | None |
| `validate_function` | `fn(String) -> bool` | Validation function for the input value. Returns `true` if valid, `false` otherwise. | None |
| `required` | `bool` | Indicates whether the input is required. | `false` |
| `error_message` | `&'static str` | Error message to display if the input is invalid. | `""` |

### Styling Props

```sh
+-----------------------------+ <-- `class`
| |
| +-----------------------+ | <-- `label_class`
| | Label | |
| +-----------------------+ |
| |
| +-----------------------+ | <-- `field_class`
| | +-------+ +--------+ | |
| | | Input | | Icon | | | <-- `input_class` and `icon_class`
| | +-------+ +--------+ | |
| +-----------------------+ |
| |
| +-----------------------+ | <-- `error_class` (if invalid)
| | Error Message | |
| +-----------------------+ |
+-----------------------------+
```

| Property | Type | Description | Default |
| ------------- | -------------- | ------------------------------------------ | ------- |
| `class` | `&'static str` | CSS class for the input container. | `""` |
| `label_class` | `&'static str` | CSS class for the label element. | `""` |
| `input_class` | `&'static str` | CSS class applied to the input element. | `""` |
| `field_class` | `&'static str` | CSS class for the input field container. | `""` |
| `error_class` | `&'static str` | CSS class for the error message container. | `""` |

### Accessibility Props

| Property | Type | Description | Default |
| ------------------ | -------------- | ----------------------------------------------- | -------- |
| `aria_label` | `&'static str` | Label for accessibility. | `""` |
| `aria_required` | `&'static str` | Accessibility hint for required status. | `"true"` |
| `aria_invalid` | `&'static str` | Accessibility hint for invalid input. | `"true"` |
| `aria_describedby` | `&'static str` | Links the input to a description (e.g., error). | `""` |

## 💡 Notes

- The `Input` component can be used for various input types like text, password, etc.
- You can bind the component to state hooks for two-way data binding.
- Utilize `validate_function` to validate user input and display error messages.
- The `eye_active` and `eye_disabled` props allow for password visibility toggling with FontAwesome icons.
- Customize the appearance with CSS classes for better integration into your app's design.
194 changes: 194 additions & 0 deletions LEPTOS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,194 @@
# 🌱 Leptos Input RS Usage

Adding Input RS to your Leptos project is simple:

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.

1. Add `input-rs` to your dependencies:

```sh
cargo add input-rs --features=lep
```

1. Import the `Input` component into your Leptos component and start using it in your app.

## 🛠️ Usage

Incorporating the `Input` component into your Leptos application is easy. Follow these steps:

1. Import the `Input` component into your Leptos project:

```rust
use leptos::{prelude::*, *};
use input_rs::leptos::Input;
use regex::Regex;
```

1. Use the `Input` component within your Leptos application:

```rust
use leptos::{prelude::*, *};
use input_rs::leptos::Input;
use regex::Regex;


fn validate_input(value: String) -> bool {
!value.trim().is_empty()
}

#[component]
pub fn app() -> impl IntoView {
let error_handle = signal(String::default());
let error = error_handle.0.get();

let email_valid_handle = signal(true);
let email_valid = email_valid_handle.0.get();

let password_valid_handle = signal(true);
let password_valid = password_valid_handle.0.get();

let email_handle = signal(String::default());
let email = email_handle.0.get();

let password_handle = signal(String::default());
let password = password_handle.0.get();

let onsubmit = move |ev: leptos::ev::SubmitEvent| {
ev.prevent_default();

let email_ref = email.clone();
let password_ref = password.clone();
let error_handle = error_handle.clone();

// Custom logic for your endpoint goes here
};

view! {
<div class="form-one-content" role="main" aria-label="Sign In Form">
<div class="text">
<h2>{"Sign In"}</h2>
{ move || if !error.is_empty() {
Some(view! {<div class="error">error</div>})
}
else {None}
}
</div>
<form on:submit={onsubmit}>
<Input
r#type="text"
handle={email_handle}
name="email"
label="Email"
placeholder="Email"
input_class="form-one-field"
field_class="form-one-field"
error_class="error-txt"
required=true
valid_handle={email_valid_handle}
validate_function={validate_input}
error_message="Enter a valid email address"
/>
<Input
r#type="password"
handle={password_handle}
name="password"
label="Password"
placeholder="Password"
input_class="form-one-field"
field_class="form-one-field"
error_class="error-txt"
required=true
valid_handle={password_valid_handle}
validate_function={validate_input}
error_message="Password can't be blank!"
eye_active="fa fa-eye"
eye_disabled="fa fa-eye-slash"
/>
<div class="form-one-forgot-pass">
<a href="#">{"Forgot Password?"}</a>
</div>
<button type="submit">{"Sign in"}</button>
<div class="sign-up">
{"Not a member?"}
<a href="#">{"Sign up now"}</a>
</div>
</form>
</div>
}
}
```

## 🔧 Props

### `Input` Props

#### Main Props

| Property | Type | Description | Default |
| ------------------- | ------------------------------------------- | ---------------------------------------------------------- | -------- |
| `r#type` | `&'static str` | The type of the input element (e.g., `text`, `password`). | `"text"` |
| `handle` | `(ReadSignal<String>, WriteSignal<String>)` | State handle for managing the value of the input. | `""` |
| `valid_handle` | `(ReadSignal<bool>, WriteSignal<bool>)` | State handle for managing the validity state of the input. | `""` |
| `validate_function` | `fn(String) -> bool` | Callback function to validate the input value. | `""` |
| `error_message` | `&'static str` | Error message displayed when the input is invalid. | `""` |

#### Accessibility and SEO Props

| Property | Type | Description | Default |
| ------------------ | -------------- | --------------------------------------------------------------- | -------- |
| `id` | `&'static str` | The ID attribute of the input element. | `""` |
| `aria_label` | `&'static str` | The aria-label for screen readers. | `""` |
| `aria_required` | `&'static str` | Indicates whether the input is required. | `"true"` |
| `aria_invalid` | `&'static str` | Indicates whether the input value is invalid. | `"true"` |
| `aria_describedby` | `&'static str` | Describes the input element's error message for screen readers. | `""` |

#### Styling Props

| Property | Type | Description | Default |
| ------------- | -------------- | -------------------------------------------------------------------- | ------- |
| `class` | `&'static str` | The CSS class for the container element of the input. | `""` |
| `input_class` | `&'static str` | The CSS class for the inner input element. | `""` |
| `field_class` | `&'static str` | The CSS class for the input field. | `""` |
| `label_class` | `&'static str` | The CSS class for the label element. | `""` |
| `error_class` | `&'static str` | The CSS class for the error message container. | `""` |
| `icon_class` | `&'static str` | The CSS class for the icon element (for password visibility toggle). | `""` |

#### Behavioral Props

| Property | Type | Description | Default |
| -------------- | -------------- | ----------------------------------------------- | ------------------- |
| `eye_active` | `&'static str` | The icon used when the password is visible. | `"fa fa-eye"` |
| `eye_disabled` | `&'static str` | The icon used when the password is not visible. | `"fa fa-eye-slash"` |

#### Additional Props

| Property | Type | Description | Default |
| ------------- | -------------- | ---------------------------------------------------- | ------- |
| `placeholder` | `&'static str` | The placeholder text displayed in the input element. | `""` |
| `required` | `bool` | Specifies whether the input is required or not. | `false` |
| `disabled` | `bool` | Disables the input when true. | `false` |
| `readonly` | `bool` | Makes the input read-only when true. | `false` |

#### Input Element Specific Attributes

| Property | Type | Description | Default |
| ----------- | --------------- | --------------------------------------------------------------- | ------- |
| `size` | `Option<u32>` | The size of the input element (character width). | `None` |
| `maxlength` | `Option<usize>` | The maximum number of characters allowed in the input. | `None` |
| `pattern` | `&'static str` | Regex pattern for input validation. | `".*"` |
| `minlength` | `Option<usize>` | The minimum length of the input value. | `None` |
| `multiple` | `bool` | Whether multiple values are allowed (for file or email inputs). | `false` |

#### Behavioral Props

| Property | Type | Description | Default |
| ---------- | ------------------ | ------------------------------------------------ | ------- |
| `onchange` | `Callback<String>` | Callback triggered when the input value changes. | No-op |

## 💡 Notes

- The `Input` component can be used for various input types like text, password, etc.
- You can bind the component to state hooks for two-way data binding.
- Utilize `validate_function` to validate user input and display error messages.
- The `eye_active` and `eye_disabled` props allow for password visibility toggling with FontAwesome icons.
- Customize the appearance with CSS classes for better integration into your app's design.
Loading
Loading