diff --git a/demo/src/components/site_header.rs b/demo/src/components/site_header.rs index 1293314..f0f4eec 100644 --- a/demo/src/components/site_header.rs +++ b/demo/src/components/site_header.rs @@ -161,15 +161,15 @@ pub fn SiteHeader() -> impl IntoView { change_theme(MouseEvent::new("click").unwrap()), - "Light" => change_theme(MouseEvent::new("click").unwrap()), - "github" => { _ = window().open_with_url("http://github.com/thaw-ui/thaw"); },//FIXME: breaks page - "discord" => { _ = window().open_with_url("https://discord.gg/YPxuprzu6M"); },//FIXME: breaks page - _ => navigate_signal.get()(&value, Default::default()) + position=MenuPosition::BottomEnd + on_select=move |value : String| match value.as_str() { + "Dark" => change_theme(MouseEvent::new("click").unwrap()), + "Light" => change_theme(MouseEvent::new("click").unwrap()), + "github" => { _ = window().open_with_url("http://github.com/thaw-ui/thaw"); },//FIXME: breaks page + "discord" => { _ = window().open_with_url("https://discord.gg/YPxuprzu6M"); },//FIXME: breaks page + _ => navigate_signal.get()(&value, Default::default()) - } + } > - - + "Facebook" + "Twitter" - - - + "Facebook" + "Twitter" + "Mastodon" } @@ -40,7 +40,7 @@ view! { ```rust demo use leptos_meta::Style; -let on_select = move |key| println!("{}", key); +let on_select = move |value| println!("{}", value); view! { - + @@ -56,7 +56,7 @@ view! { - + @@ -64,7 +64,7 @@ view! { - + @@ -72,7 +72,7 @@ view! { - + @@ -80,7 +80,7 @@ view! { - + @@ -88,7 +88,7 @@ view! { - + @@ -96,7 +96,7 @@ view! { - + @@ -104,7 +104,7 @@ view! { - + @@ -112,7 +112,7 @@ view! { - + @@ -120,7 +120,7 @@ view! { - + @@ -128,7 +128,7 @@ view! { - + @@ -136,7 +136,7 @@ view! { - + @@ -149,35 +149,33 @@ view! { ### Menu Props -| Name | Type | Default | Description | -| ------------ | ----------------------------------- | ---------------------------- | ------------------------------------------- | -| class | `OptionalProp>` | `Default::default()` | Addtional classes for the menu element. | -| on_select | `Callback` | | Called when item is selected. | -| trigger_type | `MenuTriggerType` | `MenuTriggerType::Click` | Action that displays the menu. | -| placement | `MenuPlacement` | `MenuPlacement::Bottom` | Menu placement. | -| children | `Children` | | The content inside menu. | +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| class | `OptionalProp>` | `Default::default()` | Addtional classes for the menu element. | +| on_select | `Callback` | | Called when item is selected. | +| trigger_type | `MenuTriggerType` | `MenuTriggerType::Click` | Action that displays the menu. | +| position | `MenuPosition` | `MenuPosition::Bottom` | Menu position. | +| children | `Children` | | The content inside menu. | ### MenuItem Props -| Name | Type | Default | Description | -| -------- | -------------------------------------------- | -------------------- | ------------------------------------------------ | -| class | `OptionalProp>` | `Default::default()` | Addtional classes for the menu item element. | -| key | `MaybeSignal` | `Default::default()` | The key of the menu item. | -| label | `MaybeSignal` | `Default::default()` | The label of the menu item. | -| icon | `OptionalMaybeSignal` | `None` | The icon of the menu item. | -| disabled | `MaybeSignal` | `false` | Whether the menu item is disabled. | - +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| class | `OptionalProp>` | `Default::default()` | Addtional classes for the menu item element. | +| value | `MaybeSignal` | `Default::default()` | The value of the menu item. | +| label | `MaybeSignal` | `Default::default()` | The label of the menu item. | +| icon | `OptionalMaybeSignal` | `None` | The icon of the menu item. | +| disabled | `MaybeSignal` | `false` | Whether the menu item is disabled. | ### Menu Slots -| Name | Default | Description | -| --------------- | ------- | ------------------------------------------------ | +| Name | Default | Description | +| ----------- | ------- | -------------------------------------------- | | MenuTrigger | `None` | The element or component that triggers menu. | ### MenuTriger Props -| Name | Type | Default | Description | -| ------------ | ----------------------------------- | ---------------------------- | -------------------------------------------------- | -| class | `OptionalProp>` | `Default::default()` | Addtional classes for the menu trigger element. | -| children | `Children` | | The content inside menu trigger. | - +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| class | `OptionalProp>` | `Default::default()` | Addtional classes for the menu trigger element. | +| children | `Children` | | The content inside menu trigger. | diff --git a/demo_markdown/docs/popover/mod.md b/demo_markdown/docs/popover/mod.md index f3201c1..bc9564a 100644 --- a/demo_markdown/docs/popover/mod.md +++ b/demo_markdown/docs/popover/mod.md @@ -30,7 +30,7 @@ view! { - + @@ -38,7 +38,7 @@ view! { - + @@ -46,7 +46,7 @@ view! { - + @@ -54,7 +54,7 @@ view! { - + @@ -62,7 +62,7 @@ view! { - + @@ -70,7 +70,7 @@ view! { - + @@ -78,7 +78,7 @@ view! { - + @@ -86,7 +86,7 @@ view! { - + @@ -94,7 +94,7 @@ view! { - + @@ -102,7 +102,7 @@ view! { - + @@ -110,7 +110,7 @@ view! { - + @@ -118,7 +118,7 @@ view! { - + @@ -152,12 +152,12 @@ view! { ### Popover Props -| Name | Type | Default | Description | -| --------- | ----------------------------------- | ----------------------- | ----------------------------- | -| class | `OptionalProp>` | `Default::default()` | Content class of the popover. | -| placement | `PopoverPlacement` | `PopoverPlacement::Top` | Popover placement. | -| tooltip | `bool` | `false` | Tooltip. | -| children | `Children` | | The content inside popover. | +| Name | Type | Default | Description | +| -------- | ----------------------------------- | ---------------------- | ----------------------------- | +| class | `OptionalProp>` | `Default::default()` | Content class of the popover. | +| position | `PopoverPosition` | `PopoverPosition::Top` | Popover position. | +| tooltip | `bool` | `false` | Tooltip. | +| children | `Children` | | The content inside popover. | ### Popover Slots diff --git a/thaw/src/menu/menu_item.rs b/thaw/src/menu/menu_item.rs index 9ad0992..12ad46e 100644 --- a/thaw/src/menu/menu_item.rs +++ b/thaw/src/menu/menu_item.rs @@ -9,10 +9,10 @@ use thaw_utils::{class_list, mount_style, OptionalMaybeSignal}; #[component] pub fn MenuItem( #[prop(optional, into)] icon: OptionalMaybeSignal, - #[prop(into)] label: MaybeSignal, - #[prop(into)] key: MaybeSignal, + #[prop(into)] value: MaybeSignal, #[prop(optional, into)] disabled: MaybeSignal, #[prop(optional, into)] class: MaybeProp, + children: Children, ) -> impl IntoView { mount_style("menu-item", include_str!("./menu-item.css")); @@ -28,7 +28,7 @@ pub fn MenuItem( if disabled.get() { return; } - on_select(key.get()); + on_select(value.get()); }; view! { @@ -51,7 +51,7 @@ pub fn MenuItem( - {label} + {children()} } } diff --git a/thaw/src/menu/mod.rs b/thaw/src/menu/mod.rs index 2dbdc12..e568252 100644 --- a/thaw/src/menu/mod.rs +++ b/thaw/src/menu/mod.rs @@ -29,7 +29,7 @@ pub fn Menu( #[prop(optional, into)] class: MaybeProp, menu_trigger: MenuTrigger, #[prop(optional)] trigger_type: MenuTriggerType, - #[prop(optional)] placement: MenuPlacement, + #[prop(optional)] position: MenuPosition, #[prop(into)] on_select: ArcOneCallback, #[prop(optional, into)] appearance: Option>, children: Children, @@ -110,7 +110,7 @@ pub fn Menu( > {trigger_children()} - + for FollowerPlacement { - fn from(value: MenuPlacement) -> Self { +impl From for FollowerPlacement { + fn from(value: MenuPosition) -> Self { match value { - MenuPlacement::Top => Self::Top, - MenuPlacement::Bottom => Self::Bottom, - MenuPlacement::Left => Self::Left, - MenuPlacement::Right => Self::Right, - MenuPlacement::TopStart => Self::TopStart, - MenuPlacement::TopEnd => Self::TopEnd, - MenuPlacement::LeftStart => Self::LeftStart, - MenuPlacement::LeftEnd => Self::LeftEnd, - MenuPlacement::RightStart => Self::RightStart, - MenuPlacement::RightEnd => Self::RightEnd, - MenuPlacement::BottomStart => Self::BottomStart, - MenuPlacement::BottomEnd => Self::BottomEnd, + MenuPosition::Top => Self::Top, + MenuPosition::Bottom => Self::Bottom, + MenuPosition::Left => Self::Left, + MenuPosition::Right => Self::Right, + MenuPosition::TopStart => Self::TopStart, + MenuPosition::TopEnd => Self::TopEnd, + MenuPosition::LeftStart => Self::LeftStart, + MenuPosition::LeftEnd => Self::LeftEnd, + MenuPosition::RightStart => Self::RightStart, + MenuPosition::RightEnd => Self::RightEnd, + MenuPosition::BottomStart => Self::BottomStart, + MenuPosition::BottomEnd => Self::BottomEnd, } } } diff --git a/thaw/src/popover/mod.rs b/thaw/src/popover/mod.rs index 2e11b68..cefaf26 100644 --- a/thaw/src/popover/mod.rs +++ b/thaw/src/popover/mod.rs @@ -16,9 +16,12 @@ pub fn Popover( #[prop(optional, into)] class: MaybeProp, #[prop(optional)] trigger_type: PopoverTriggerType, popover_trigger: PopoverTrigger, - #[prop(optional)] placement: PopoverPlacement, + /// Configures the position of the Popover. + #[prop(optional)] + position: PopoverPosition, /// A popover can appear styled with brand or inverted. When not specified, the default style is used. - #[prop(optional, into)] appearance: Option>, + #[prop(optional, into)] + appearance: Option>, children: Children, ) -> impl IntoView { mount_style("popover", include_str!("./popover.css")); @@ -117,7 +120,7 @@ pub fn Popover( > {trigger_children()} - + for FollowerPlacement { - fn from(value: PopoverPlacement) -> Self { +impl From for FollowerPlacement { + fn from(value: PopoverPosition) -> Self { match value { - PopoverPlacement::Top => Self::Top, - PopoverPlacement::Bottom => Self::Bottom, - PopoverPlacement::Left => Self::Left, - PopoverPlacement::Right => Self::Right, - PopoverPlacement::TopStart => Self::TopStart, - PopoverPlacement::TopEnd => Self::TopEnd, - PopoverPlacement::LeftStart => Self::LeftStart, - PopoverPlacement::LeftEnd => Self::LeftEnd, - PopoverPlacement::RightStart => Self::RightStart, - PopoverPlacement::RightEnd => Self::RightEnd, - PopoverPlacement::BottomStart => Self::BottomStart, - PopoverPlacement::BottomEnd => Self::BottomEnd, + PopoverPosition::Top => Self::Top, + PopoverPosition::Bottom => Self::Bottom, + PopoverPosition::Left => Self::Left, + PopoverPosition::Right => Self::Right, + PopoverPosition::TopStart => Self::TopStart, + PopoverPosition::TopEnd => Self::TopEnd, + PopoverPosition::LeftStart => Self::LeftStart, + PopoverPosition::LeftEnd => Self::LeftEnd, + PopoverPosition::RightStart => Self::RightStart, + PopoverPosition::RightEnd => Self::RightEnd, + PopoverPosition::BottomStart => Self::BottomStart, + PopoverPosition::BottomEnd => Self::BottomEnd, } } }