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: add leptos support #2

Merged
merged 1 commit into from
Dec 24, 2024
Merged

feat: add leptos support #2

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
871 changes: 843 additions & 28 deletions Cargo.lock
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions Cargo.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,12 @@ exclude = ["assets", "examples"]
web-sys = "0.3.76"
yew = { version = "0.21.0", default-features = false, optional = true }
dioxus = { version = "0.6.1", optional = true }
leptos = { version = "0.7.2", optional = true }

[features]
yew = ["dep:yew"]
dio = ["dioxus"]
lep = ["leptos"]

[profile.release]
opt-level = "z"
Expand Down
166 changes: 166 additions & 0 deletions Leptos.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
# 🌱 Leptos Radio RS Usage

Adding Radio 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 `radiors` to your dependencies:

```sh
cargo add radiors --features=lep
```

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

## 🛠️ Usage

Incorporating the Radio components into your Leptos application is easy. Follow these steps:

1. Import the Radio components into your Leptos project:

```rust
use leptos::prelude::*;
use radiors::leptos::{Radio, Group};
use radiors::{Size, Orientation};
```

1. Use the `Radio` components within your Leptos application:

```rust
use leptos::prelude::*;
use radiors::leptos::{Radio, Group};
use radiors::{Size, Orientation};

#[component]
pub fn app() -> impl IntoView {
let selected_value = signal("Option1".to_string());

view! {
<Group
selected={selected_value.0.get()}
onchange=Callback::from(move |new_value: String| {
selected_value.1.set(new_value);
})
orientation=Orientation::Vertical
class="radio-group"
>
<Radio
label="Option 1"
value="Option1"
class="radio-button"
/>
<Radio
label="Option 2"
value="Option2"
class="radio-button"
/>
</Group>
}
}
```

## 🔧 Props

### `Group` Props

#### Main Props

| Property | Type | Description | Default |
| ---------- | --------- | ---------------------------------------------------- | ------- |
| `selected` | `String` | The currently selected value of the radio group. | `""` |
| `children` | `ChildrenFragment` | Child `Radio` components to render within the group. | `""` |

#### Styling Props

```sh
+-----------------------------------------------------------+
| [Group Container] | <-- `class` & `style`
| |
| +-----------------------------------------------+ | <-- `orientation`
| | [Child Radio Buttons] | | <-- `children`
| +-----------------------------------------------+ |
| |
+-----------------------------------------------------------+
```

| Property | Type | Description | Default |
| ------------- | -------------- | ------------------------------------------------------------ | ------------------------- |
| `style` | `&'static str` | Inline styles for the radio group container. | `""` |
| `class` | `&'static str` | CSS class for the radio group container. | `""` |
| `orientation` | `Orientation` | Orientation of the radio group (`Horizontal` or `Vertical`). | `Orientation::Horizontal` |

#### Behavioral Props

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

### `Radio` Props

#### Main Props

| Property | Type | Description | Default |
| ---------- | -------------- | ------------------------------------------------------- | ------- |
| `label` | `&'static str` | Text label displayed alongside the radio button. | `""` |
| `value` | `&'static str` | Unique value for the radio button. | `""` |
| `src` | `&'static str` | Optional image URL to display next to the radio button. | `""` |
| `selected` | `bool` | Indicates whether this radio button is selected. | `false` |
| `disabled` | `bool` | Disables the radio button when `true`. | `false` |

#### Styling Props

```sh
+-----------------------------------------------------------+
| [Radio Container] | <-- `class` & `style`
| |
| +-------------------------------------------------+ | <-- `selected_class` & `selected_style` (when selected)
| | [Radio Button] | | <-- `disabled_class` & `disabled_style` (when disabled)
| | | |
| | +---------------------------------------+ | |
| | | [Hidden Input] | | | <-- `input_class` & `input_style`
| | +---------------------------------------+ | |
| | | |
| | +---------------------------------------+ | |
| | | [Optional Image] | | | <-- `image_class` & `image_style`
| | +---------------------------------------+ | |
| | | |
| | +---------------------------------------+ | |
| | | [Radio Label] | | | <-- `label_class` & `label_style`
| | +---------------------------------------+ | |
| +-------------------------------------------------+ |
| |
+-----------------------------------------------------------+
```

| Property | Type | Description | Default |
| ----------------- | -------------- | ---------------------------------------------------------------- | -------------------- |
| `style` | `&'static str` | Custom inline styles for the radio container. | `""` |
| `class` | `&'static str` | CSS class for the radio container. | `""` |
| `label_style` | `&'static str` | Inline styles for the radio label. | `""` |
| `label_class` | `&'static str` | CSS class for the radio label. | `""` |
| `image_style` | `&'static str` | Inline styles for the image (if `src` is provided). | `""` |
| `image_class` | `&'static str` | CSS class for the image (if `src` is provided). | `""` |
| `size` | `Size` | Size of the radio button (`Small`, `Medium`, `Large`). | `Size::XSmall` |
| `type` | `Type` | Styling type of the radio button (e.g., `Primary`, `Secondary`). | `Type::None` |
| `selected_style` | `&'static str` | Inline styles for the selected state of the radio button. | `""` |
| `selected_class` | `&'static str` | CSS class for the selected state of the radio button. | `""` |
| `disabled_style` | `&'static str` | Inline styles for the disabled state of the radio button. | `""` |
| `disabled_class` | `&'static str` | CSS class for the disabled state of the radio button. | `""` |
| `animation_style` | `&'static str` | Inline styles for animations applied to the radio button. | `""` |
| `animation_class` | `&'static str` | CSS class for animations applied to the radio button. | `""` |
| `input_style` | `&'static str` | Inline styles for the hidden `<input>` element. | `HIDDEN_INPUT_STYLE` |
| `input_class` | `&'static str` | CSS class for the hidden `<input>` element. | `""` |

#### Behavioral Props

| Property | Type | Description | Default |
| --------- | ------------------ | ---------------------------------------------------- | ------- |
| `onclick` | `Callback<String>` | Callback triggered when the radio button is clicked. | No-op |

## 💡 Notes

- Use the `Group` component to manage state for multiple `Radio` components.
- Callback props like `onchange` and `onclick` allow you to handle user interactions effectively.
- Make sure that the `value` for each `Radio` is unique within the `Group` to avoid conflicts.
- Customize the layout with the `orientation` prop (`Horizontal` or `Vertical`).
- Enhance the appearance by applying custom classes and styles or using any CSS framework.
6 changes: 3 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
| --- | --- |
| Yew | [![Netlify Status](https://api.netlify.com/api/v1/badges/a0efc7e9-f20e-4dd9-93e1-c8f4fde7506f/deploy-status)](https://radio-rs.netlify.app) |
| Dioxus | [![Netlify Status](https://api.netlify.com/api/v1/badges/4dabc732-d6de-4598-a629-980be35c003f/deploy-status)](https://radio-rs-dioxus.netlify.app) |
| Leptos | TODO |
| Leptos | [![Netlify Status](https://api.netlify.com/api/v1/badges/4912ca4b-34ae-421d-8091-d1b836f13cdf/deploy-status)](https://radio-rs-leptos.netlify.app) |

## 📜 Intro

Expand All @@ -43,11 +43,11 @@ The following features make Radio RS a valuable addition to your WASM-based proj

Refer to [our guide](YEW.md) to integrate this component into your Yew app.

## 🧬 Dioxus Usage
## 🧬 Dioxus Usage (WIP)

Refer to [our guide](DIOXUS.md) to integrate this component into your Dioxus app.

## 🌱 Leptos Usage (TODO)
## 🌱 Leptos Usage (WIP)

Refer to [our guide](LEPTOS.md) to integrate this component into your Leptos app.

Expand Down
2 changes: 2 additions & 0 deletions examples/leptos/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
target/**/*
dist/**/*
Loading
Loading