adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-02-02 08:34:15 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

add class to modal (#206)

Browse source 
* add class to modal

* add class to modal

* add closable option to modal
This commit is contained in:
kandrelczyk 2024-06-10 17:30:31 +02:00 • committed by GitHub
parent cb37d9cfe9
commit a9f02ede65
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 20 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
demo_markdown/docs/modal/mod.md
View file

@ -15,12 +15,14 @@ view! {
| Name | Type | Default | Description | | Name | Type | Default | Description |
| -------------- | --------------------- | -------------------- | ------------------------------------------- | | -------------- | --------------------- | -------------------- | ------------------------------------------- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the modal element. |
| show | `Model<bool>` | | Whether to show modal. | | show | `Model<bool>` | | Whether to show modal. |
| title | `MaybeSignal<String>` | `Default::default()` | Modal title. | | title | `MaybeSignal<String>` | `Default::default()` | Modal title. |
| width | `MaybeSignal<String>` | `600px` | Modal width. | | width | `MaybeSignal<String>` | `600px` | Modal width. |
| z_index | `MaybeSignal<i16>` | `2000` | z-index of the modal. | | z_index | `MaybeSignal<i16>` | `2000` | z-index of the modal. |
| mask_closeable | `MaybeSignal<bool>` | `true` | Whether to emit hide event when click mask. | | mask_closeable | `MaybeSignal<bool>` | `true` | Whether to emit hide event when click mask. |
| close_on_esc | `bool` | `true` | Whether to close modal on Esc is pressed. | | close_on_esc | `bool` | `true` | Whether to close modal on Esc is pressed. |
| closable | `bool` | `true` | Whether to display the close button. |
| children | `Children` | | Modal's content. | | children | `Children` | | Modal's content. |
### Modal Slots ### Modal Slots

27
thaw/src/modal/mod.rs
View file

@ -1,7 +1,7 @@
use crate::{Card, CardFooter, CardHeader, CardHeaderExtra, Icon, Scrollbar, ScrollbarRef}; use crate::{Card, CardFooter, CardHeader, CardHeaderExtra, Icon, Scrollbar, ScrollbarRef};
use leptos::*; use leptos::*;
use thaw_components::{CSSTransition, FocusTrap, OptionComp, Teleport}; use thaw_components::{CSSTransition, FocusTrap, If, OptionComp, Teleport, Then};
use thaw_utils::{mount_style, use_click_position, ComponentRef, Model}; use thaw_utils::{class_list, mount_style, use_click_position, ComponentRef, Model, OptionalProp};
#[slot] #[slot]
pub struct ModalFooter { pub struct ModalFooter {
@ -13,11 +13,13 @@ pub fn Modal(
#[prop(into)] show: Model<bool>, #[prop(into)] show: Model<bool>,
#[prop(default = true.into(), into)] mask_closeable: MaybeSignal<bool>, #[prop(default = true.into(), into)] mask_closeable: MaybeSignal<bool>,
#[prop(default = true, into)] close_on_esc: bool, #[prop(default = true, into)] close_on_esc: bool,
#[prop(default = true, into)] closable: bool,
#[prop(default = 2000.into(), into)] z_index: MaybeSignal<i16>, #[prop(default = 2000.into(), into)] z_index: MaybeSignal<i16>,
#[prop(default = MaybeSignal::Static("600px".to_string()), into)] width: MaybeSignal<String>, #[prop(default = MaybeSignal::Static("600px".to_string()), into)] width: MaybeSignal<String>,
#[prop(optional, into)] title: MaybeSignal<String>, #[prop(optional, into)] title: MaybeSignal<String>,
children: Children, children: Children,
#[prop(optional)] modal_footer: Option<ModalFooter>, #[prop(optional)] modal_footer: Option<ModalFooter>,
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
) -> impl IntoView { ) -> impl IntoView {
mount_style("modal", include_str!("./modal.css")); mount_style("modal", include_str!("./modal.css"));
@ -80,6 +82,7 @@ pub fn Modal(
String::from("display: none") String::from("display: none")
} }
}) })
comp_ref=scrollbar_ref comp_ref=scrollbar_ref
> >
<CSSTransition <CSSTransition
@ -106,7 +109,9 @@ pub fn Modal(
let:display let:display
> >
<div <div
class="thaw-modal-body" class=class_list![
"thaw-modal-body", class.map(| c | move || c.get())
]
ref=modal_ref ref=modal_ref
role="dialog" role="dialog"
aria-modal="true" aria-modal="true"
@ -117,12 +122,16 @@ pub fn Modal(
<span class="thaw-model-title">{move || title.get()}</span> <span class="thaw-model-title">{move || title.get()}</span>
</CardHeader> </CardHeader>
<CardHeaderExtra slot> <CardHeaderExtra slot>
<span <If cond=closable>
style="cursor: pointer;" <Then slot>
on:click=move |_| show.set(false) <span
> style="cursor: pointer;"
<Icon icon=icondata_ai::AiCloseOutlined/> on:click=move |_| show.set(false)
</span> >
<Icon icon=icondata_ai::AiCloseOutlined/>
</span>
</Then>
</If>
</CardHeaderExtra> </CardHeaderExtra>
{children()} {children()}
<CardFooter slot if_=modal_footer.is_some()> <CardFooter slot if_=modal_footer.is_some()>