Menu: support submenu
This commit is contained in:
parent
92af897590
commit
898575637e
2 changed files with 37 additions and 4 deletions
|
@ -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 {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue