@w5-ui/wc 0.8.0 → 0.8.1

package/dist/index.js

@@ -11783,6 +11783,18 @@ function Pill($$anchor, $$props) {
   });
   append($$anchor, span);
 }
+function along(pointer, size, viewport, margin) {
+  const far = viewport - margin;
+  if (pointer + size <= far) return Math.max(margin, pointer);
+  if (pointer - size >= margin) return pointer - size;
+  return Math.max(margin, Math.min(pointer, far - size));
+}
+function computeMenuPosition(input) {
+  return {
+    left: along(input.x, input.menuWidth, input.viewportWidth, input.margin),
+    top: along(input.y, input.menuHeight, input.viewportHeight, input.margin)
+  };
+}
 var root$2r = /* @__PURE__ */ from_html(`<li role="separator" class="my-1 h-px bg-row-active"></li>`);
 var root_1$1N = /* @__PURE__ */ from_html(` <!> `, 1);
 var root_2$1u = /* @__PURE__ */ from_html(`<li role="menuitem" class="flex cursor-pointer items-center whitespace-nowrap rounded-[5px] px-3 py-1.5 text-13 text-text-2 outline-none hover:bg-row-active hover:text-text-1 data-[active=true]:bg-row-active data-[active=true]:text-text-1 data-[danger=true]:text-status-danger data-[danger=true]:hover:bg-status-danger/10 data-[warning=true]:text-status-warning data-[warning=true]:hover:bg-status-warning/10 data-[success=true]:text-status-success data-[success=true]:hover:bg-status-success/10 aria-disabled:cursor-not-allowed aria-disabled:opacity-40"><!></li>`);
@@ -11809,10 +11821,25 @@ function ContextMenu($$anchor, $$props) {
     },
     []
   ));
-  const menuW = 168;
-  let menuH = /* @__PURE__ */ user_derived(() => items().length * 30 + 8);
-  let cx = /* @__PURE__ */ user_derived(() => Math.min(x(), (typeof window !== "undefined" ? window.innerWidth : 1200) - menuW - 8));
-  let cy = /* @__PURE__ */ user_derived(() => Math.min(y(), (typeof window !== "undefined" ? window.innerHeight : 800) - get(menuH) - 8));
+  const MENU_MARGIN = 8;
+  let cx = /* @__PURE__ */ state(0);
+  let cy = /* @__PURE__ */ state(0);
+  user_effect(() => {
+    void items();
+    if (!open() || get(menuEl) === void 0) return;
+    const { width, height } = get(menuEl).getBoundingClientRect();
+    const placed = computeMenuPosition({
+      x: x(),
+      y: y(),
+      menuWidth: width,
+      menuHeight: height,
+      viewportWidth: window.innerWidth,
+      viewportHeight: window.innerHeight,
+      margin: MENU_MARGIN
+    });
+    set(cx, placed.left, true);
+    set(cy, placed.top, true);
+  });
   function activate(id) {
     $$props.onaction?.(id);
     $$props.onclose?.();