rust/dx-admin-template
1
0
Fork 0
mirror of https://github.com/mztlive/dx-admin-template.git synced 2026-01-06 13:02:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix bug

Browse Source
This commit is contained in:
tommy
2025-11-05 17:09:20 +08:00
parent 7b53288c76
commit 09e96859d6
5 changed files with 152 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/ui/popover.rs
View File

@@ -13,20 +13,43 @@ pub fn Popover(
class: "ui-popover-trigger",
style: "position: relative; display: inline-flex; align-items: center;",
onmousedown: move |_| open.set(!open()),
tabindex: 0,
onfocusout: move |_| open.set(false),
{trigger}
if open() {
div {
style: "position: fixed; inset: 0; z-index: 40; background: transparent; pointer-events: auto;",
onmousedown: {
let mut open_signal = open.clone();
move |event| {
event.stop_propagation();
open_signal.set(false);
}
},
onwheel: {
let mut open_signal = open.clone();
move |event| {
event.stop_propagation();
open_signal.set(false);
}
},
ontouchmove: {
let mut open_signal = open.clone();
move |event| {
event.stop_propagation();
open_signal.set(false);
}
},
}
div {
class: "ui-popover",
"data-placement": placement.clone(),
style: match placement.as_str() {
"top" => "position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -0.75rem);",
"bottom" => "position: absolute; left: 50%; top: 100%; transform: translate(-50%, 0.75rem);",
"left" => "position: absolute; right: 100%; top: 50%; transform: translate(-0.75rem, -50%);",
"right" => "position: absolute; left: 100%; top: 50%; transform: translate(0.75rem, -50%);",
_ => "position: absolute; left: 50%; top: 100%; transform: translate(-50%, 0.75rem);"
"top" => "position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -0.75rem); z-index: 50;",
"bottom" => "position: absolute; left: 50%; top: 100%; transform: translate(-50%, 0.75rem); z-index: 50;",
"left" => "position: absolute; right: 100%; top: 50%; transform: translate(-0.75rem, -50%); z-index: 50;",
"right" => "position: absolute; left: 100%; top: 50%; transform: translate(0.75rem, -50%); z-index: 50;",
_ => "position: absolute; left: 50%; top: 100%; transform: translate(-50%, 0.75rem); z-index: 50;"
},
onmousedown: move |event| event.stop_propagation(),
onclick: move |event| event.stop_propagation(),
{content}
}