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

feat: Menu prop and Popover prop

Browse source
This commit is contained in:
luoxiao 2024-07-27 18:04:36 +08:00
parent 875e7ffbbc
commit 767fb97e3a
6 changed files with 112 additions and 111 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
demo/src/components/site_header.rs
View file

@ -161,15 +161,15 @@ pub fn SiteHeader() -> impl IntoView {
</AutoCompletePrefix> </AutoCompletePrefix>
</AutoComplete> </AutoComplete>
<Menu <Menu
placement=MenuPlacement::BottomEnd position=MenuPosition::BottomEnd
on_select=move |value : String| match value.as_str() { on_select=move |value : String| match value.as_str() {
"Dark" => change_theme(MouseEvent::new("click").unwrap()), "Dark" => change_theme(MouseEvent::new("click").unwrap()),
"Light" => 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 "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 "discord" => { _ = window().open_with_url("https://discord.gg/YPxuprzu6M"); },//FIXME: breaks page
_ => navigate_signal.get()(&value, Default::default()) _ => navigate_signal.get()(&value, Default::default())
} }
> >
<MenuTrigger slot class="demo-header__menu-mobile"> <MenuTrigger slot class="demo-header__menu-mobile">
<Button <Button
@ -178,9 +178,9 @@ pub fn SiteHeader() -> impl IntoView {
attr:style="font-size: 22px; padding: 0px 6px;" attr:style="font-size: 22px; padding: 0px 6px;"
/> />
</MenuTrigger> </MenuTrigger>
<MenuItem key=theme_name label=theme_name/> <MenuItem value=theme_name>{theme_name}</MenuItem>
<MenuItem icon=icondata::AiGithubOutlined key="github" label="Github"/> <MenuItem icon=icondata::AiGithubOutlined value="github">"Github"</MenuItem>
<MenuItem icon=icondata::BiDiscordAlt key="discord" label="Discord"/> <MenuItem icon=icondata::BiDiscordAlt value="discord">"Discord"</MenuItem>
{ {
use crate::pages::{gen_menu_data, MenuGroupOption, MenuItemOption}; use crate::pages::{gen_menu_data, MenuGroupOption, MenuItemOption};
gen_menu_data().into_iter().map(|data| { gen_menu_data().into_iter().map(|data| {
@ -193,7 +193,7 @@ pub fn SiteHeader() -> impl IntoView {
children.into_iter().map(|item| { children.into_iter().map(|item| {
let MenuItemOption { label, value } = item; let MenuItemOption { label, value } = item;
view! { view! {
<MenuItem label key=value/> <MenuItem value=value>{label}</MenuItem>
} }
}).collect_view() }).collect_view()
} }

82
demo_markdown/docs/menu/mod.md
View file

@ -1,4 +1,4 @@
# Menu # Menu
```rust demo ```rust demo
//let message = use_message(); //let message = use_message();
@ -11,7 +11,7 @@
// } // }
//}; //};
let on_select = move |key| println!("{}", key); let on_select = move |value| println!("{}", value);
view! { view! {
<Space> <Space>
@ -19,17 +19,17 @@ view! {
<MenuTrigger slot> <MenuTrigger slot>
<Button>"Hover"</Button> <Button>"Hover"</Button>
</MenuTrigger> </MenuTrigger>
<MenuItem key="facebook" icon=icondata::AiFacebookOutlined label="Facebook"></MenuItem> <MenuItem value="facebook" icon=icondata::AiFacebookOutlined>"Facebook"</MenuItem>
<MenuItem key="twitter" disabled=true icon=icondata::AiTwitterOutlined label="Twitter"></MenuItem> <MenuItem value="twitter" disabled=true icon=icondata::AiTwitterOutlined>"Twitter"</MenuItem>
</Menu> </Menu>
<Menu on_select> <Menu on_select>
<MenuTrigger slot> <MenuTrigger slot>
<Button>"Click"</Button> <Button>"Click"</Button>
</MenuTrigger> </MenuTrigger>
<MenuItem key="facebook" icon=icondata::AiFacebookOutlined label="Facebook"></MenuItem> <MenuItem value="facebook" icon=icondata::AiFacebookOutlined>"Facebook"</MenuItem>
<MenuItem key="twitter" icon=icondata::AiTwitterOutlined label="Twitter"></MenuItem> <MenuItem value="twitter" icon=icondata::AiTwitterOutlined>"Twitter"</MenuItem>
<MenuItem key="no_icon" disabled=true label="Mastodon"></MenuItem> <MenuItem value="no_icon" disabled=true>"Mastodon"</MenuItem>
</Menu> </Menu>
</Space> </Space>
} }
@ -40,7 +40,7 @@ view! {
```rust demo ```rust demo
use leptos_meta::Style; use leptos_meta::Style;
let on_select = move |key| println!("{}", key); let on_select = move |value| println!("{}", value);
view! { view! {
<Style> <Style>
@ -48,7 +48,7 @@ view! {
</Style> </Style>
<Grid x_gap=8 y_gap=8 cols=3 class="demo-menu"> <Grid x_gap=8 y_gap=8 cols=3 class="demo-menu">
<GridItem> <GridItem>
<Menu on_select placement=MenuPlacement::TopStart> <Menu on_select position=MenuPosition::TopStart>
<MenuTrigger slot> <MenuTrigger slot>
<Button>"Top Start"</Button> <Button>"Top Start"</Button>
</MenuTrigger> </MenuTrigger>
@ -56,7 +56,7 @@ view! {
</Menu> </Menu>
</GridItem> </GridItem>
<GridItem> <GridItem>
<Menu on_select placement=MenuPlacement::Top> <Menu on_select position=MenuPosition::Top>
<MenuTrigger slot> <MenuTrigger slot>
<Button>"Top"</Button> <Button>"Top"</Button>
</MenuTrigger> </MenuTrigger>
@ -64,7 +64,7 @@ view! {
</Menu> </Menu>
</GridItem> </GridItem>
<GridItem> <GridItem>
<Menu on_select placement=MenuPlacement::TopEnd> <Menu on_select position=MenuPosition::TopEnd>
<MenuTrigger slot> <MenuTrigger slot>
<Button>"Top End"</Button> <Button>"Top End"</Button>
</MenuTrigger> </MenuTrigger>
@ -72,7 +72,7 @@ view! {
</Menu> </Menu>
</GridItem> </GridItem>
<GridItem> <GridItem>
<Menu on_select placement=MenuPlacement::LeftStart> <Menu on_select position=MenuPosition::LeftStart>
<MenuTrigger slot> <MenuTrigger slot>
<Button>"Left Start"</Button> <Button>"Left Start"</Button>
</MenuTrigger> </MenuTrigger>
@ -80,7 +80,7 @@ view! {
</Menu> </Menu>
</GridItem> </GridItem>
<GridItem offset=1> <GridItem offset=1>
<Menu on_select placement=MenuPlacement::RightStart> <Menu on_select position=MenuPosition::RightStart>
<MenuTrigger slot> <MenuTrigger slot>
<Button>"Right Start"</Button> <Button>"Right Start"</Button>
</MenuTrigger> </MenuTrigger>
@ -88,7 +88,7 @@ view! {
</Menu> </Menu>
</GridItem> </GridItem>
<GridItem> <GridItem>
<Menu on_select placement=MenuPlacement::Left> <Menu on_select position=MenuPosition::Left>
<MenuTrigger slot> <MenuTrigger slot>
<Button>"Left"</Button> <Button>"Left"</Button>
</MenuTrigger> </MenuTrigger>
@ -96,7 +96,7 @@ view! {
</Menu> </Menu>
</GridItem> </GridItem>
<GridItem offset=1> <GridItem offset=1>
<Menu on_select placement=MenuPlacement::Right> <Menu on_select position=MenuPosition::Right>
<MenuTrigger slot> <MenuTrigger slot>
<Button>"Right"</Button> <Button>"Right"</Button>
</MenuTrigger> </MenuTrigger>
@ -104,7 +104,7 @@ view! {
</Menu> </Menu>
</GridItem> </GridItem>
<GridItem> <GridItem>
<Menu on_select placement=MenuPlacement::LeftEnd> <Menu on_select position=MenuPosition::LeftEnd>
<MenuTrigger slot> <MenuTrigger slot>
<Button>"Left End"</Button> <Button>"Left End"</Button>
</MenuTrigger> </MenuTrigger>
@ -112,7 +112,7 @@ view! {
</Menu> </Menu>
</GridItem> </GridItem>
<GridItem offset=1> <GridItem offset=1>
<Menu on_select placement=MenuPlacement::RightEnd> <Menu on_select position=MenuPosition::RightEnd>
<MenuTrigger slot> <MenuTrigger slot>
<Button>"Right End"</Button> <Button>"Right End"</Button>
</MenuTrigger> </MenuTrigger>
@ -120,7 +120,7 @@ view! {
</Menu> </Menu>
</GridItem> </GridItem>
<GridItem> <GridItem>
<Menu on_select placement=MenuPlacement::BottomStart> <Menu on_select position=MenuPosition::BottomStart>
<MenuTrigger slot> <MenuTrigger slot>
<Button>"Bottom Start"</Button> <Button>"Bottom Start"</Button>
</MenuTrigger> </MenuTrigger>
@ -128,7 +128,7 @@ view! {
</Menu> </Menu>
</GridItem> </GridItem>
<GridItem> <GridItem>
<Menu on_select placement=MenuPlacement::Bottom> <Menu on_select position=MenuPosition::Bottom>
<MenuTrigger slot> <MenuTrigger slot>
<Button>"Bottom"</Button> <Button>"Bottom"</Button>
</MenuTrigger> </MenuTrigger>
@ -136,7 +136,7 @@ view! {
</Menu> </Menu>
</GridItem> </GridItem>
<GridItem> <GridItem>
<Menu on_select placement=MenuPlacement::BottomEnd> <Menu on_select position=MenuPosition::BottomEnd>
<MenuTrigger slot> <MenuTrigger slot>
<Button>"Bottom End"</Button> <Button>"Bottom End"</Button>
</MenuTrigger> </MenuTrigger>
@ -149,35 +149,33 @@ view! {
### Menu Props ### Menu Props
| Name | Type | Default | Description | | Name | Type | Default | Description |
| ------------ | ----------------------------------- | ---------------------------- | ------------------------------------------- | | --- | --- | --- | --- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the menu element. | | class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the menu element. |
| on_select | `Callback<String>` | | Called when item is selected. | | on_select | `Callback<String>` | | Called when item is selected. |
| trigger_type | `MenuTriggerType` | `MenuTriggerType::Click` | Action that displays the menu. | | trigger_type | `MenuTriggerType` | `MenuTriggerType::Click` | Action that displays the menu. |
| placement | `MenuPlacement` | `MenuPlacement::Bottom` | Menu placement. | | position | `MenuPosition` | `MenuPosition::Bottom` | Menu position. |
| children | `Children` | | The content inside menu. | | children | `Children` | | The content inside menu. |
### MenuItem Props ### MenuItem Props
| Name | Type | Default | Description | | Name | Type | Default | Description |
| -------- | -------------------------------------------- | -------------------- | ------------------------------------------------ | | --- | --- | --- | --- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the menu item element. | | class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the menu item element. |
| key | `MaybeSignal<String>` | `Default::default()` | The key of the menu item. | | value | `MaybeSignal<String>` | `Default::default()` | The value of the menu item. |
| label | `MaybeSignal<String>` | `Default::default()` | The label of the menu item. | | label | `MaybeSignal<String>` | `Default::default()` | The label of the menu item. |
| icon | `OptionalMaybeSignal<icondata_core::Icon>` | `None` | The icon of the menu item. | | icon | `OptionalMaybeSignal<icondata_core::Icon>` | `None` | The icon of the menu item. |
| disabled | `MaybeSignal<bool>` | `false` | Whether the menu item is disabled. | | disabled | `MaybeSignal<bool>` | `false` | Whether the menu item is disabled. |
### Menu Slots ### Menu Slots
| Name | Default | Description | | Name | Default | Description |
| --------------- | ------- | ------------------------------------------------ | | ----------- | ------- | -------------------------------------------- |
| MenuTrigger | `None` | The element or component that triggers menu. | | MenuTrigger | `None` | The element or component that triggers menu. |
### MenuTriger Props ### MenuTriger Props
| Name | Type | Default | Description | | Name | Type | Default | Description |
| ------------ | ----------------------------------- | ---------------------------- | -------------------------------------------------- | | --- | --- | --- | --- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the menu trigger element. | | class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the menu trigger element. |
| children | `Children` | | The content inside menu trigger. | | children | `Children` | | The content inside menu trigger. |

36
demo_markdown/docs/popover/mod.md
View file

@ -30,7 +30,7 @@ view! {
</Style> </Style>
<Grid x_gap=8 y_gap=8 cols=3 class="demo-popover"> <Grid x_gap=8 y_gap=8 cols=3 class="demo-popover">
<GridItem> <GridItem>
<Popover placement=PopoverPlacement::TopStart> <Popover position=PopoverPosition::TopStart>
<PopoverTrigger slot> <PopoverTrigger slot>
<Button>"Top Start"</Button> <Button>"Top Start"</Button>
</PopoverTrigger> </PopoverTrigger>
@ -38,7 +38,7 @@ view! {
</Popover> </Popover>
</GridItem> </GridItem>
<GridItem> <GridItem>
<Popover placement=PopoverPlacement::Top> <Popover position=PopoverPosition::Top>
<PopoverTrigger slot> <PopoverTrigger slot>
<Button>"Top"</Button> <Button>"Top"</Button>
</PopoverTrigger> </PopoverTrigger>
@ -46,7 +46,7 @@ view! {
</Popover> </Popover>
</GridItem> </GridItem>
<GridItem> <GridItem>
<Popover placement=PopoverPlacement::TopEnd> <Popover position=PopoverPosition::TopEnd>
<PopoverTrigger slot> <PopoverTrigger slot>
<Button>"Top End"</Button> <Button>"Top End"</Button>
</PopoverTrigger> </PopoverTrigger>
@ -54,7 +54,7 @@ view! {
</Popover> </Popover>
</GridItem> </GridItem>
<GridItem> <GridItem>
<Popover placement=PopoverPlacement::LeftStart trigger_type=PopoverTriggerType::Click> <Popover position=PopoverPosition::LeftStart trigger_type=PopoverTriggerType::Click>
<PopoverTrigger slot> <PopoverTrigger slot>
<Button>"Left Start"</Button> <Button>"Left Start"</Button>
</PopoverTrigger> </PopoverTrigger>
@ -62,7 +62,7 @@ view! {
</Popover> </Popover>
</GridItem> </GridItem>
<GridItem offset=1> <GridItem offset=1>
<Popover placement=PopoverPlacement::RightStart> <Popover position=PopoverPosition::RightStart>
<PopoverTrigger slot> <PopoverTrigger slot>
<Button>"Right Start"</Button> <Button>"Right Start"</Button>
</PopoverTrigger> </PopoverTrigger>
@ -70,7 +70,7 @@ view! {
</Popover> </Popover>
</GridItem> </GridItem>
<GridItem> <GridItem>
<Popover placement=PopoverPlacement::Left trigger_type=PopoverTriggerType::Click> <Popover position=PopoverPosition::Left trigger_type=PopoverTriggerType::Click>
<PopoverTrigger slot> <PopoverTrigger slot>
<Button>"Left"</Button> <Button>"Left"</Button>
</PopoverTrigger> </PopoverTrigger>
@ -78,7 +78,7 @@ view! {
</Popover> </Popover>
</GridItem> </GridItem>
<GridItem offset=1> <GridItem offset=1>
<Popover placement=PopoverPlacement::Right> <Popover position=PopoverPosition::Right>
<PopoverTrigger slot> <PopoverTrigger slot>
<Button>"Right"</Button> <Button>"Right"</Button>
</PopoverTrigger> </PopoverTrigger>
@ -86,7 +86,7 @@ view! {
</Popover> </Popover>
</GridItem> </GridItem>
<GridItem> <GridItem>
<Popover placement=PopoverPlacement::LeftEnd> <Popover position=PopoverPosition::LeftEnd>
<PopoverTrigger slot> <PopoverTrigger slot>
<Button>"Left End"</Button> <Button>"Left End"</Button>
</PopoverTrigger> </PopoverTrigger>
@ -94,7 +94,7 @@ view! {
</Popover> </Popover>
</GridItem> </GridItem>
<GridItem offset=1> <GridItem offset=1>
<Popover placement=PopoverPlacement::RightEnd> <Popover position=PopoverPosition::RightEnd>
<PopoverTrigger slot> <PopoverTrigger slot>
<Button>"Right End"</Button> <Button>"Right End"</Button>
</PopoverTrigger> </PopoverTrigger>
@ -102,7 +102,7 @@ view! {
</Popover> </Popover>
</GridItem> </GridItem>
<GridItem> <GridItem>
<Popover placement=PopoverPlacement::BottomStart> <Popover position=PopoverPosition::BottomStart>
<PopoverTrigger slot> <PopoverTrigger slot>
<Button>"Bottom Start"</Button> <Button>"Bottom Start"</Button>
</PopoverTrigger> </PopoverTrigger>
@ -110,7 +110,7 @@ view! {
</Popover> </Popover>
</GridItem> </GridItem>
<GridItem> <GridItem>
<Popover placement=PopoverPlacement::Bottom> <Popover position=PopoverPosition::Bottom>
<PopoverTrigger slot> <PopoverTrigger slot>
<Button>"Bottom"</Button> <Button>"Bottom"</Button>
</PopoverTrigger> </PopoverTrigger>
@ -118,7 +118,7 @@ view! {
</Popover> </Popover>
</GridItem> </GridItem>
<GridItem> <GridItem>
<Popover placement=PopoverPlacement::BottomEnd> <Popover position=PopoverPosition::BottomEnd>
<PopoverTrigger slot> <PopoverTrigger slot>
<Button>"Bottom End"</Button> <Button>"Bottom End"</Button>
</PopoverTrigger> </PopoverTrigger>
@ -152,12 +152,12 @@ view! {
### Popover Props ### Popover Props
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --------- | ----------------------------------- | ----------------------- | ----------------------------- | | -------- | ----------------------------------- | ---------------------- | ----------------------------- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Content class of the popover. | | class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Content class of the popover. |
| placement | `PopoverPlacement` | `PopoverPlacement::Top` | Popover placement. | | position | `PopoverPosition` | `PopoverPosition::Top` | Popover position. |
| tooltip | `bool` | `false` | Tooltip. | | tooltip | `bool` | `false` | Tooltip. |
| children | `Children` | | The content inside popover. | | children | `Children` | | The content inside popover. |
### Popover Slots ### Popover Slots

8
thaw/src/menu/menu_item.rs
View file

@ -9,10 +9,10 @@ use thaw_utils::{class_list, mount_style, OptionalMaybeSignal};
#[component] #[component]
pub fn MenuItem( pub fn MenuItem(
#[prop(optional, into)] icon: OptionalMaybeSignal<icondata_core::Icon>, #[prop(optional, into)] icon: OptionalMaybeSignal<icondata_core::Icon>,
#[prop(into)] label: MaybeSignal<String>, #[prop(into)] value: MaybeSignal<String>,
#[prop(into)] key: MaybeSignal<String>,
#[prop(optional, into)] disabled: MaybeSignal<bool>, #[prop(optional, into)] disabled: MaybeSignal<bool>,
#[prop(optional, into)] class: MaybeProp<String>, #[prop(optional, into)] class: MaybeProp<String>,
children: Children,
) -> impl IntoView { ) -> impl IntoView {
mount_style("menu-item", include_str!("./menu-item.css")); mount_style("menu-item", include_str!("./menu-item.css"));
@ -28,7 +28,7 @@ pub fn MenuItem(
if disabled.get() { if disabled.get() {
return; return;
} }
on_select(key.get()); on_select(value.get());
}; };
view! { view! {
@ -51,7 +51,7 @@ pub fn MenuItem(
<Icon icon=icon style="font-size: 18px; margin-right: 8px"/> <Icon icon=icon style="font-size: 18px; margin-right: 8px"/>
</OptionComp> </OptionComp>
<span style="flex-grow: 1">{label}</span> <span style="flex-grow: 1">{children()}</span>
</div> </div>
} }
} }

34
thaw/src/menu/mod.rs
View file

@ -29,7 +29,7 @@ pub fn Menu(
#[prop(optional, into)] class: MaybeProp<String>, #[prop(optional, into)] class: MaybeProp<String>,
menu_trigger: MenuTrigger, menu_trigger: MenuTrigger,
#[prop(optional)] trigger_type: MenuTriggerType, #[prop(optional)] trigger_type: MenuTriggerType,
#[prop(optional)] placement: MenuPlacement, #[prop(optional)] position: MenuPosition,
#[prop(into)] on_select: ArcOneCallback<String>, #[prop(into)] on_select: ArcOneCallback<String>,
#[prop(optional, into)] appearance: Option<MaybeSignal<MenuAppearance>>, #[prop(optional, into)] appearance: Option<MaybeSignal<MenuAppearance>>,
children: Children, children: Children,
@ -110,7 +110,7 @@ pub fn Menu(
> >
{trigger_children()} {trigger_children()}
</div> </div>
<Follower slot show=is_show_menu placement> <Follower slot show=is_show_menu placement=position>
<CSSTransition <CSSTransition
node_ref=menu_ref node_ref=menu_ref
name="menu-transition" name="menu-transition"
@ -163,7 +163,7 @@ impl MenuAppearance {
} }
#[derive(Default)] #[derive(Default)]
pub enum MenuPlacement { pub enum MenuPosition {
Top, Top,
#[default] #[default]
Bottom, Bottom,
@ -179,21 +179,21 @@ pub enum MenuPlacement {
BottomEnd, BottomEnd,
} }
impl From<MenuPlacement> for FollowerPlacement { impl From<MenuPosition> for FollowerPlacement {
fn from(value: MenuPlacement) -> Self { fn from(value: MenuPosition) -> Self {
match value { match value {
MenuPlacement::Top => Self::Top, MenuPosition::Top => Self::Top,
MenuPlacement::Bottom => Self::Bottom, MenuPosition::Bottom => Self::Bottom,
MenuPlacement::Left => Self::Left, MenuPosition::Left => Self::Left,
MenuPlacement::Right => Self::Right, MenuPosition::Right => Self::Right,
MenuPlacement::TopStart => Self::TopStart, MenuPosition::TopStart => Self::TopStart,
MenuPlacement::TopEnd => Self::TopEnd, MenuPosition::TopEnd => Self::TopEnd,
MenuPlacement::LeftStart => Self::LeftStart, MenuPosition::LeftStart => Self::LeftStart,
MenuPlacement::LeftEnd => Self::LeftEnd, MenuPosition::LeftEnd => Self::LeftEnd,
MenuPlacement::RightStart => Self::RightStart, MenuPosition::RightStart => Self::RightStart,
MenuPlacement::RightEnd => Self::RightEnd, MenuPosition::RightEnd => Self::RightEnd,
MenuPlacement::BottomStart => Self::BottomStart, MenuPosition::BottomStart => Self::BottomStart,
MenuPlacement::BottomEnd => Self::BottomEnd, MenuPosition::BottomEnd => Self::BottomEnd,
} }
} }
} }

39
thaw/src/popover/mod.rs
View file

@ -16,9 +16,12 @@ pub fn Popover(
#[prop(optional, into)] class: MaybeProp<String>, #[prop(optional, into)] class: MaybeProp<String>,
#[prop(optional)] trigger_type: PopoverTriggerType, #[prop(optional)] trigger_type: PopoverTriggerType,
popover_trigger: PopoverTrigger, 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. /// A popover can appear styled with brand or inverted. When not specified, the default style is used.
#[prop(optional, into)] appearance: Option<MaybeSignal<PopoverAppearance>>, #[prop(optional, into)]
appearance: Option<MaybeSignal<PopoverAppearance>>,
children: Children, children: Children,
) -> impl IntoView { ) -> impl IntoView {
mount_style("popover", include_str!("./popover.css")); mount_style("popover", include_str!("./popover.css"));
@ -117,7 +120,7 @@ pub fn Popover(
> >
{trigger_children()} {trigger_children()}
</div> </div>
<Follower slot show=is_show_popover placement> <Follower slot show=is_show_popover placement=position>
<CSSTransition <CSSTransition
node_ref=popover_ref node_ref=popover_ref
name="popover-transition" name="popover-transition"
@ -173,7 +176,7 @@ pub enum PopoverTriggerType {
impl Copy for PopoverTriggerType {} impl Copy for PopoverTriggerType {}
#[derive(Default)] #[derive(Default)]
pub enum PopoverPlacement { pub enum PopoverPosition {
#[default] #[default]
Top, Top,
Bottom, Bottom,
@ -189,21 +192,21 @@ pub enum PopoverPlacement {
BottomEnd, BottomEnd,
} }
impl From<PopoverPlacement> for FollowerPlacement { impl From<PopoverPosition> for FollowerPlacement {
fn from(value: PopoverPlacement) -> Self { fn from(value: PopoverPosition) -> Self {
match value { match value {
PopoverPlacement::Top => Self::Top, PopoverPosition::Top => Self::Top,
PopoverPlacement::Bottom => Self::Bottom, PopoverPosition::Bottom => Self::Bottom,
PopoverPlacement::Left => Self::Left, PopoverPosition::Left => Self::Left,
PopoverPlacement::Right => Self::Right, PopoverPosition::Right => Self::Right,
PopoverPlacement::TopStart => Self::TopStart, PopoverPosition::TopStart => Self::TopStart,
PopoverPlacement::TopEnd => Self::TopEnd, PopoverPosition::TopEnd => Self::TopEnd,
PopoverPlacement::LeftStart => Self::LeftStart, PopoverPosition::LeftStart => Self::LeftStart,
PopoverPlacement::LeftEnd => Self::LeftEnd, PopoverPosition::LeftEnd => Self::LeftEnd,
PopoverPlacement::RightStart => Self::RightStart, PopoverPosition::RightStart => Self::RightStart,
PopoverPlacement::RightEnd => Self::RightEnd, PopoverPosition::RightEnd => Self::RightEnd,
PopoverPlacement::BottomStart => Self::BottomStart, PopoverPosition::BottomStart => Self::BottomStart,
PopoverPlacement::BottomEnd => Self::BottomEnd, PopoverPosition::BottomEnd => Self::BottomEnd,
} }
} }
} }