Menu: support submenu

This commit is contained in:
thislight 2024-11-03 23:33:37 +08:00
parent 92af897590
commit 898575637e
No known key found for this signature in database
GPG key ID: FCFE5192241CCD4E
2 changed files with 37 additions and 4 deletions

View file

@ -7,6 +7,22 @@
width: max-content; width: max-content;
box-shadow: var(--tutu-shadow-e8); box-shadow: var(--tutu-shadow-e8);
contain: content; contain: content;
&.e1 {
box-shadow: var(--tutu-shadow-e9);
}
&.e2 {
box-shadow: var(--tutu-shadow-e10);
}
&.e3 {
box-shadow: var(--tutu-shadow-e11);
}
&.e4 {
box-shadow: var(--tutu-shadow-e12);
}
} }
dialog.Menu::backdrop { dialog.Menu::backdrop {

View file

@ -14,7 +14,7 @@ import {
animateShrinkToTopRight, animateShrinkToTopRight,
} from "../platform/anim"; } from "../platform/anim";
export type Anchor = Pick<DOMRect, "top" | "left" | "right"> export type Anchor = Pick<DOMRect, "top" | "left" | "right"> & { e?: number };
export type MenuProps = ParentProps<{ export type MenuProps = ParentProps<{
open?: boolean; open?: boolean;
@ -52,8 +52,23 @@ const Menu: Component<MenuProps> = (props) => {
const [anchorPos, setAnchorPos] = createSignal<{ const [anchorPos, setAnchorPos] = createSignal<{
left?: number; left?: number;
top?: number; top?: number;
e?: number;
}>({}); }>({});
if (import.meta.env.DEV) {
createEffect(() => {
switch (anchorPos().e) {
case 1:
case 2:
case 3:
case 3:
return;
default:
console.warn('value %s is invalid for param "e"', anchorPos().e);
}
});
}
let openAnimationOrigin: "lt" | "rt" = "lt"; let openAnimationOrigin: "lt" | "rt" = "lt";
createEffect(() => { createEffect(() => {
@ -65,18 +80,19 @@ const Menu: Component<MenuProps> = (props) => {
const rend = root.getBoundingClientRect(); const rend = root.getBoundingClientRect();
const { width } = windowSize; const { width } = windowSize;
const { left, top, right } = a; const { left, top, right, e } = a;
if (left > width / 2) { if (left > width / 2) {
openAnimationOrigin = "rt"; openAnimationOrigin = "rt";
setAnchorPos({ setAnchorPos({
left: right - rend.width, left: right - rend.width,
top, top,
e,
}); });
animateGrowFromTopRight(root, { easing: ANIM_CURVE_STD }); animateGrowFromTopRight(root, { easing: ANIM_CURVE_STD });
} else { } else {
openAnimationOrigin = "lt"; openAnimationOrigin = "lt";
setAnchorPos({ left, top }); setAnchorPos({ left, top, e });
const overflow = root.style.overflow; const overflow = root.style.overflow;
root.style.overflow = "hidden"; root.style.overflow = "hidden";
@ -154,7 +170,7 @@ const Menu: Component<MenuProps> = (props) => {
e.stopPropagation(); e.stopPropagation();
} }
}} }}
class="Menu" class={`Menu e${anchorPos().e || 0}`}
style={{ style={{
left: px(anchorPos().left), left: px(anchorPos().left),
top: px(anchorPos().top), top: px(anchorPos().top),
@ -164,6 +180,7 @@ const Menu: Component<MenuProps> = (props) => {
<div <div
style={{ style={{
background: "var(--tutu-color-surface)", background: "var(--tutu-color-surface)",
display: "contents"
}} }}
> >
<MenuList>{props.children}</MenuList> <MenuList>{props.children}</MenuList>