-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: revamp && init add WASM frameworks support && add more customiz…
…ation (#3)
- Loading branch information
Showing
32 changed files
with
1,717 additions
and
1,025 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| [bumpversion] | ||
| current_version = 0.1.0 | ||
|
|
||
| [bumpversion:file:Cargo.toml] | ||
| search = version = "{current_version}" | ||
| replace = version = "{new_version}" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,29 +1,40 @@ | ||
| [package] | ||
| name = "yew-alert" | ||
| name = "alert-rs" | ||
| version = "0.1.0" | ||
| description = "⚠️ A simple and flexible alert component for the Yew framework." | ||
| edition = "2021" | ||
| rust-version = "1.79" | ||
| description = "⚠️ A highly customizable alert component for WASM frameworks like Yew, Dioxus, and Leptos." | ||
| license = "MIT" | ||
| repository = "https://github.com/next-rs/yew-alert" | ||
| homepage = "https://github.com/next-rs/yew-alert" | ||
| documentation = "https://docs.rs/yew-alert/" | ||
| keywords = ["alert", "yew", "rust", "dioxus", "leptos"] | ||
| categories = ["web-programming", "science"] | ||
| repository = "https://github.com/opensass/alert-rs" | ||
| documentation = "https://docs.rs/alert-rs/" | ||
| authors = ["Mahmoud Harmouch <[email protected]>"] | ||
| edition = "2021" | ||
| exclude = ["/examples"] | ||
| keywords = ["yew", "rust", "alert", "yew-alert"] | ||
| categories = ["web-programming", "no-std"] | ||
| exclude = ["assets", "examples"] | ||
|
|
||
| # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html | ||
|
|
||
| [dependencies] | ||
| gloo = "0.11.0" | ||
| web-sys = { version = "0.3.67", features = ["Window"] } | ||
| yew = "0.21.0" | ||
| gloo = { version = "0.11.0", default-features = false, features = ["timers"], optional = true } | ||
| wasm-bindgen = "0.2.99" | ||
| web-sys = { version = "0.3.76", features = ["Window"] } | ||
| yew = { version = "0.21.0", default-features = false, optional = true } | ||
|
|
||
| [features] | ||
| yew = ["dep:yew", "gloo"] | ||
|
|
||
| [profile.release] | ||
| codegen-units = 1 | ||
| opt-level = "z" | ||
| debug = false | ||
| lto = "thin" | ||
| codegen-units = 1 | ||
| panic = "abort" | ||
| strip = "symbols" | ||
| incremental = false | ||
|
|
||
| [badges] | ||
| maintenance = { status = "actively-developed" } | ||
| maintenance = { status = "actively-developed" } | ||
|
|
||
| [dev-dependencies] | ||
| log = "0.4.22" | ||
| bump2version = "0.1.4" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,150 +1,58 @@ | ||
| # ⚠️ Yew Alert | ||
| <div align="center"> | ||
|
|
||
| [](https://crates.io/crates/yew-alert) | ||
| [](https://crates.io/crates/yew-alert) | ||
|  | ||
|  | ||
| [](https://yew-alert.netlify.app) | ||
| # ⚠️ Alert RS | ||
|
|
||
| --- | ||
| [](https://crates.io/crates/alert-rs) | ||
| [](https://crates.io/crates/alert-rs) | ||
|  | ||
| [](https://www.rust-lang.org/) | ||
| [](https://www.rust-lang.org) | ||
| [](https://github.com/wiseaidev) | ||
|
|
||
| [](https://yew-alert.netlify.app/) | ||
| [](https://discord.gg/b5JbvHW5nv) | ||
|
|
||
| --- | ||
|  | ||
|
|
||
| ## 📜 Introduction | ||
| </div> | ||
|
|
||
| Yew Alert is a simple yet flexible alert component for the Yew framework, designed to provide customizable and responsive alerts to enhance user interaction. | ||
| ## 🎬 Demo | ||
|
|
||
| ## 🤔 Why is this Component Useful? | ||
|  | ||
|
|
||
| The Alert component offers several benefits to improve your web application: | ||
| ## 📜 Intro | ||
|
|
||
| 1. ⚙️ Customization: Tailor the appearance and behavior of alerts based on your application's design and requirements. | ||
| `Alert-RS` is a highly customizable alert component designed for Wasm-based frameworks like **Yew**, **Dioxus**, and **Leptos**. Create fully-featured, styled alerts with configurable behaviors like auto-close, button actions, and customizable icons, all within your Rust-based frontend. | ||
|
|
||
| 2. 🚀 Responsive Design: Ensures optimal display and interaction across various devices and screen sizes. | ||
| ## 🤔 Why Use Alert-RS? | ||
|
|
||
| 3. 💬 Easy Integration: Seamlessly integrate alerts into Yew projects with minimal setup and configuration. | ||
| The following are some reasons why Alert-RS is a fantastic addition to your Wasm projects: | ||
|
|
||
| ## ⚙️ Installation | ||
| 1. **🚨 Custom Alerts**: Create fully customizable alert boxes with title, message, and buttons. | ||
| 1. **🎨 Styling Flexibility**: Customize every element with CSS classes and inline styles. | ||
| 1. **⚡ Button Actions**: Display and handle buttons like Confirm, Cancel, and Close with callback support. | ||
| 1. **⏲️ Auto-Close**: Optionally auto-close the alert after a timeout. | ||
| 1. **🔧 Highly Configurable**: Control alert position, icon type, and visibility based on scroll position. | ||
|
|
||
| Integrating Yew Alert into your Yew project is straightforward. Follow these steps: | ||
| ## Y Yew Usage | ||
|
|
||
| 1. Make sure you have Yew set up in your project. If not, refer to the [Yew documentation](https://yew.rs/docs/getting-started/introduction) for installation instructions. | ||
| Refer to [our guide](YEW.md) to integrate this component into your Yew app. | ||
|
|
||
| 1. Install the library using your preferred package manager: | ||
| ## 🧬 Dioxus Usage (TODO) | ||
|
|
||
| ```bash | ||
| $ cargo add yew-alert | ||
| ``` | ||
| Refer to [our guide](DIOXUS.md) to integrate this component into your Dioxus app. | ||
|
|
||
| 1. Start using the Alert component to enhance your application's user feedback. | ||
| ## 🌱 Leptos Usage (TODO) | ||
|
|
||
| ## 🛠️ Usage | ||
| Refer to [our guide](LEPTOS.md) to integrate this component into your Leptos app. | ||
|
|
||
| Incorporating Yew Alert into your application is easy. Follow these steps: | ||
| ## 🤝 Contributions | ||
|
|
||
| 1. Import the Alert component into your Yew project: | ||
| Contributions are welcome! Whether it's bug fixes, feature requests, or examples, we would love your help to make Alert-RS better. | ||
|
|
||
| ```rust | ||
| use yew::prelude::*; | ||
| use yew_alert::Alert; | ||
| ``` | ||
|
|
||
| 1. Define the alert properties and use the Alert component in your Yew component: | ||
|
|
||
| ```rust | ||
| #[function_component(App)] | ||
| pub fn app() -> Html { | ||
| let show_alert = use_state(|| true); | ||
| html! { | ||
| <Alert | ||
| message={"This is an alert message"} | ||
| show_alert={show_alert} | ||
| timeout={2500} | ||
| title={"Alert Title"} | ||
| alert_class={"w-96 h-48 text-white"} | ||
| icon_class={"flex justify-center"} | ||
| confirm_button_text={"Okay"} | ||
| cancel_button_text={"Cancel"} | ||
| confirm_button_class={"bg-green-500 text-white rounded"} | ||
| cancel_button_class={"bg-red-500 text-white rounded"} | ||
| show_confirm_button={true} | ||
| show_cancel_button={true} | ||
| show_close_button={true} | ||
| on_confirm={Callback::noop()} | ||
| on_cancel={Callback::noop()} | ||
| position={"top-right"} | ||
| container_class={"flex items-center text-center justify-center bg-gray-800 text-white border border-gray-600"} | ||
| title_class={"dark:text-white"} | ||
| message_class={"dark:text-gray-300"} | ||
| icon_type={"success"} | ||
| icon_color={""} | ||
| icon_width={"50"} | ||
| /> | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| 1. Customize the Alert appearance and behavior using provided props. | ||
|
|
||
| 1. Enjoy enhanced user feedback with Yew Alert. | ||
|
|
||
| ## 🔧 Props | ||
|
|
||
| ### Main Props | ||
|
|
||
| | Name | Type | Default Value | Description | | ||
| | --- | --- | --- | ----- | | ||
| | `message` | `&'static str` | `""` | The message content of the alert. | | ||
| | `show_alert` | `UseStateHandle<bool>` | - | State to control the visibility of the alert.| | ||
| | `timeout` | `u32` | `2500` | The duration in milliseconds before the alert automatically closes.| | ||
| | `title` | `&'static str` | `"Info"` | The title of the alert. | | ||
|
|
||
| ### Style and Layout Props | ||
|
|
||
| | Name | Type | Default Value | Description | | ||
| | --- | --- | --- | ----- | | ||
| | `alert_class` | `&'static str` | `"w-96 h-48 text-white"` | The class applied to the alert container. | | ||
| | `icon_class` | `&'static str` | `"flex justify-center"` | The class applied to the icon container. | | ||
|
|
||
| ### Button Props | ||
|
|
||
| | Name | Type | Default Value | Description | | ||
| | --- | --- | --- | ----- | | ||
| | `confirm_button_text`| `&'static str` | `"Okay"` | The text displayed on the confirm button. | | ||
| | `cancel_button_text` | `&'static str` | `"Cancel"` | The text displayed on the cancel button. | | ||
| | `confirm_button_class`| `&'static str` | `"bg-green-500 text-white rounded"`| The class applied to the confirm button. | | ||
| | `cancel_button_class` | `&'static str` | `"bg-red-500 text-white rounded"` | The class applied to the cancel button. | | ||
| | `show_confirm_button` | `bool` | `true` | Determines whether the confirm button is shown. | | ||
| | `show_cancel_button` | `bool` | `true` | Determines whether the cancel button is shown. | | ||
| | `show_close_button` | `bool` | `true` | Determines whether the close button (x) is shown.| | ||
|
|
||
| ### Positioning and Layout Props | ||
|
|
||
| | Name | Type | Default Value | Description | | ||
| | --- | --- | --- | ----- | | ||
| | `position` | `&'static str` | `"top-right"` | The position of the alert on the screen. Possible values: "top-left", "top-right", "middle", "bottom", "top", "bottom-right", "bottom-left".| | ||
| | `container_class` | `&'static str` | `"flex items-center text-center justify-center bg-gray-800 text-white border border-gray-600"` | The class applied to the outermost container of the alert.| | ||
| | `title_class` | `&'static str` | `"dark:text-white"` | The class applied to the alert title. | | ||
| | `message_class` | `&'static str` | `"dark:text-gray-300"` | The class applied to the alert message. | | ||
|
|
||
| ### Icon Props | ||
|
|
||
| | Name | Type | Default Value | Description | | ||
| | --- | --- | --- | ----- | | ||
| | `icon_type` | `&'static str` | `"success"` | The type of icon to be displayed. Possible values: "warning", "error", "success", "info", "question".| | ||
| | `icon_color` | `&'static str` | `""` | The color of the icon. If empty, a default color is used based on the icon type.| | ||
| | `icon_width` | `&'static str` | `"50"` | The width of the icon. | | ||
|
|
||
| ## 📙 Examples | ||
|
|
||
| Explore different styling and features in the [examples folder](examples/tailwind). | ||
|
|
||
| ## 🤝 Contribution | ||
|
|
||
| We welcome contributions from the community to enhance this component. Feel free to open issues, submit pull requests, or provide feedback. Let's collaborate to make user interaction in Yew even more dynamic and user-friendly! | ||
| 1. Fork the repository. | ||
| 1. Create a new branch for your feature/bugfix. | ||
| 1. Submit a pull request for review. | ||
|
|
||
| ## 📜 License | ||
|
|
||
| Yew Alert is licensed under the `MIT` License, allowing you to use, modify, and distribute it freely. Refer to the [`LICENSE`](LICENSE) file for more details. | ||
| Alert-RS is licensed under the [MIT License](LICENSE). You are free to use, modify, and distribute this library in your projects. |
Oops, something went wrong.