feat(WW-4125): bindable position + auto vertical/horizontal opening direction

src/wwElement.vue

@@ -93,6 +93,8 @@ export default {
     });
 
     const triggerBox = ref({});
+    const resolvedPosition = ref(props.content.position);
+
     const synchronizeTriggerBox = () => {
       if (!triggerElementRef?.value) return;
       const box = triggerElementRef.value.getBoundingClientRect();
@@ -104,6 +106,95 @@ export default {
         width: box.width,
         height: box.height,
       };
+      computeResolvedPosition();
+    };
+
+    const computeResolvedPosition = () => {
+      const position = props.content.position;
+      const box = triggerBox.value;
+      if (!box || box.width === undefined) {
+        resolvedPosition.value = position;
+        return;
+      }
+
+      const frontWindow = wwLib.getFrontWindow();
+      const viewportHeight = frontWindow.innerHeight;
+      const viewportWidth = frontWindow.innerWidth;
+
+      const dropdownElement = dropdownElementRef?.value;
+      if (!dropdownElement) {
+        resolvedPosition.value = position;
+        return;
+      }
+
+      const dropdownHeight = dropdownElement.offsetHeight || box.height;
+      const dropdownWidth = dropdownElement.offsetWidth || box.width;
+      const computedStyle = frontWindow.getComputedStyle(dropdownElement);
+      const renderedPosition = resolvedPosition.value;
+
+      const getRenderedOffset = (property, reference) => {
+        const value = Number.parseFloat(computedStyle[property]);
+        return Number.isFinite(value) ? value - reference : 0;
+      };
+
+      let offsetY = 0;
+      let offsetX = 0;
+      switch (renderedPosition) {
+        case "top":
+          offsetY = getRenderedOffset("bottom", viewportHeight - box.top);
+          break;
+        case "bottom":
+          offsetY = getRenderedOffset("top", box.bottom);
+          break;
+        case "left":
+          offsetX = getRenderedOffset("right", viewportWidth - box.left);
+          break;
+        case "right":
+          offsetX = getRenderedOffset("left", box.right);
+          break;
+      }
+
+      if (
+        props.content.autoVertical &&
+        (position === "top" || position === "bottom")
+      ) {
+        const spaceBelow = viewportHeight - box.bottom - offsetY;
+        const spaceAbove = box.top - offsetY;
+        const fitsBelow = spaceBelow >= dropdownHeight;
+        const fitsAbove = spaceAbove >= dropdownHeight;
+        if (!fitsBelow && (fitsAbove || spaceAbove > spaceBelow)) {
+          resolvedPosition.value = "top";
+        } else {
+          resolvedPosition.value = "bottom";
+        }
+        return;
+      }
+
+      if (
+        props.content.autoHorizontal &&
+        (position === "left" || position === "right")
+      ) {
+        const spaceRight = viewportWidth - box.right - offsetX;
+        const spaceLeft = box.left - offsetX;
+        const fitsRight = spaceRight >= dropdownWidth;
+        const fitsLeft = spaceLeft >= dropdownWidth;
+        if (position === "right") {
+          if (!fitsRight && (fitsLeft || spaceLeft > spaceRight)) {
+            resolvedPosition.value = "left";
+          } else {
+            resolvedPosition.value = "right";
+          }
+        } else {
+          if (!fitsLeft && (fitsRight || spaceRight > spaceLeft)) {
+            resolvedPosition.value = "right";
+          } else {
+            resolvedPosition.value = "left";
+          }
+        }
+        return;
+      }
+
+      resolvedPosition.value = position;
     };
 
     function onWindowClick(event) {
@@ -153,15 +244,17 @@ export default {
       scrollableParents.push(wwLib.getFrontWindow());
     }
 
+    function observeDropdownSize() {
+      if (!resizeObserver || !dropdownElementRef.value) return;
+      resizeObserver.observe(dropdownElementRef.value);
+    }
+
     function startPositioningDropdown() {
       synchronizeTriggerBox();
       wwLib.getFrontDocument().addEventListener("click", onWindowClick);
-      resizeObserver = new ResizeObserver((entries) => {
-        const entry = entries[0];
-        triggerBox.value.width = entry.contentRect.width;
-        triggerBox.value.height = entry.contentRect.height;
-      });
+      resizeObserver = new ResizeObserver(synchronizeTriggerBox);
       resizeObserver.observe(triggerElementRef.value);
+      observeDropdownSize();
       setScrollableParents(triggerElementRef.value);
       scrollableParents.forEach((p) => {
         p.addEventListener("scroll", synchronizeTriggerBox, { passive: true });
@@ -174,6 +267,7 @@ export default {
     function stopPositioningDropdown() {
       wwLib.getFrontDocument().removeEventListener("click", onWindowClick);
       resizeObserver?.disconnect();
+      resizeObserver = null;
       scrollableParents.forEach((p) => {
         p.removeEventListener("scroll", synchronizeTriggerBox);
         wwLib
@@ -189,6 +283,11 @@ export default {
         delayedIsClosed.value = false;
         nextTick(() => {
           delayedIsOpen.value = true;
+          nextTick(() => {
+            if (!isDisplayed.value) return;
+            observeDropdownSize();
+            computeResolvedPosition();
+          });
         });
       } else {
         stopPositioningDropdown();
@@ -221,10 +320,27 @@ export default {
       }
     );
 
+    watch(
+      () => [
+        props.content.position,
+        props.content.autoVertical,
+        props.content.autoHorizontal,
+        props.content.offsetX,
+        props.content.offsetY,
+      ],
+      ([position], [previousPosition]) => {
+        if (position !== previousPosition) {
+          resolvedPosition.value = position;
+        }
+        nextTick(() => computeResolvedPosition());
+      }
+    );
+
     return {
       appDiv,
       synchronizeTriggerBox,
       triggerBox,
+      resolvedPosition,
       isOpened,
       timeoutId,
       isEditing,
@@ -237,7 +353,7 @@ export default {
   computed: {
     style() {
       const style = {};
-      const position = this.content.position;
+      const position = this.resolvedPosition;
       const alignment = this.content.alignment;
 
       const offsetX =

ww-config.js

@@ -49,10 +49,40 @@ export default {
       classes: true,
       states: true,
       responsive: true,
+      /* wwEditor:start */
       bindingValidation: {
         type: 'string',
-        tooltip: 'A string that defines the position of the dropdown. Possible values are top, right, bottom, and left.',
-      }
+        tooltip: 'A string that defines the position of the dropdown. Possible values are top, right, bottom, and left. Bind it to drive the opening direction from a formula (e.g. the trigger position on the page).',
+      },
+      /* wwEditor:end */
+    },
+    autoVertical: {
+      type: "OnOff",
+      label: {
+        en: "Auto vertical",
+      },
+      defaultValue: false,
+      bindable: true,
+      /* wwEditor:start */
+      bindingValidation: {
+        type: "boolean",
+        tooltip: "A boolean that, when true, flips a top/bottom dropdown to the opposite side when it would overflow the viewport (bottom by default, flips to top near the bottom edge).",
+      },
+      /* wwEditor:end */
+    },
+    autoHorizontal: {
+      type: "OnOff",
+      label: {
+        en: "Auto horizontal",
+      },
+      defaultValue: false,
+      bindable: true,
+      /* wwEditor:start */
+      bindingValidation: {
+        type: "boolean",
+        tooltip: "A boolean that, when true, flips a left/right dropdown to the opposite side when it would overflow the viewport (near the left or right edge).",
+      },
+      /* wwEditor:end */
     },
     alignment: {
       label: { en: "Align" },