@zipify/wysiwyg 4.1.0-1 → 4.1.0-3

package/dist/wysiwyg.css

@@ -345,37 +345,37 @@
     display: none;
 }
 
-.zw-modal[data-v-078bbe11] {
+.zw-modal[data-v-27bd5280] {
     border-radius: 2px;
     box-shadow: 0 0 4px rgba(var(--zw-color-black), 0.3);
     background-color: rgb(var(--zw-color-n15));
-    max-height: var(--3cdf9de8);
-    max-width: var(--8ae6b87e);
+    max-height: var(--63a50094);
+    max-width: var(--325bc339);
     z-index: 1000;
     position: fixed;
     will-change: transform;
 }
-.zw-modal--enter-active[data-v-078bbe11] {
+.zw-modal--enter-active[data-v-27bd5280] {
     transition: opacity 0.15s ease-out;
 }
-.zw-modal--enter-from[data-v-078bbe11],
-.zw-modal--leave-to[data-v-078bbe11] {
+.zw-modal--enter-from[data-v-27bd5280],
+.zw-modal--leave-to[data-v-27bd5280] {
     opacity: 0;
 }
-.zw-modal--leave-active[data-v-078bbe11] {
+.zw-modal--leave-active[data-v-27bd5280] {
     transition: opacity 0.1s ease-in;
 }
 
 /* Scrollbar overrides in modal */
-.zw-modal[data-v-078bbe11] .simplebar-offset,
-.zw-modal[data-v-078bbe11] .simplebar-mask {
+.zw-modal[data-v-27bd5280] .simplebar-offset,
+.zw-modal[data-v-27bd5280] .simplebar-mask {
     position: initial;
 }
-.zw-modal[data-v-078bbe11] .simplebar-content {
+.zw-modal[data-v-27bd5280] .simplebar-content {
     max-height: var(--zw-modal-max-height);
     padding: 0 !important;
 }
-.zw-modal[data-v-078bbe11] .simplebar-content-wrapper {
+.zw-modal[data-v-27bd5280] .simplebar-content-wrapper {
     overscroll-behavior: contain;
 }
 

package/dist/wysiwyg.mjs

@@ -15201,7 +15201,7 @@ var hash$1 = {
   bottom: "top",
   top: "bottom"
 };
-function getOppositePlacement(placement) {
+function getOppositePlacement$1(placement) {
   return placement.replace(/left|right|bottom|top/g, function(matched) {
     return hash$1[matched];
   });
@@ -15470,10 +15470,10 @@ function getExpandedFallbackPlacements(placement) {
   if (getBasePlacement$1(placement) === auto) {
     return [];
   }
-  var oppositePlacement = getOppositePlacement(placement);
+  var oppositePlacement = getOppositePlacement$1(placement);
   return [getOppositeVariationPlacement(placement), oppositePlacement, getOppositeVariationPlacement(oppositePlacement)];
 }
-function flip(_ref) {
+function flip$1(_ref) {
   var state = _ref.state, options = _ref.options, name = _ref.name;
   if (state.modifiersData[name]._skip) {
     return;
@@ -15482,7 +15482,7 @@ function flip(_ref) {
   var preferredPlacement = state.options.placement;
   var basePlacement = getBasePlacement$1(preferredPlacement);
   var isBasePlacement = basePlacement === preferredPlacement;
-  var fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipVariations ? [getOppositePlacement(preferredPlacement)] : getExpandedFallbackPlacements(preferredPlacement));
+  var fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipVariations ? [getOppositePlacement$1(preferredPlacement)] : getExpandedFallbackPlacements(preferredPlacement));
   var placements2 = [preferredPlacement].concat(fallbackPlacements).reduce(function(acc, placement2) {
     return acc.concat(getBasePlacement$1(placement2) === auto ? computeAutoPlacement(state, {
       placement: placement2,
@@ -15513,9 +15513,9 @@ function flip(_ref) {
     });
     var mainVariationSide = isVertical ? isStartVariation ? right : left : isStartVariation ? bottom : top;
     if (referenceRect[len] > popperRect[len]) {
-      mainVariationSide = getOppositePlacement(mainVariationSide);
+      mainVariationSide = getOppositePlacement$1(mainVariationSide);
     }
-    var altVariationSide = getOppositePlacement(mainVariationSide);
+    var altVariationSide = getOppositePlacement$1(mainVariationSide);
     var checks = [];
     if (checkMainAxis) {
       checks.push(overflow[_basePlacement] <= 0);
@@ -15560,11 +15560,11 @@ function flip(_ref) {
     state.reset = true;
   }
 }
-const flip$1 = {
+const flip$2 = {
   name: "flip",
   enabled: true,
   phase: "main",
-  fn: flip,
+  fn: flip$1,
   requiresIfExists: ["offset"],
   data: {
     _skip: false
@@ -16024,7 +16024,7 @@ function popperGenerator(generatorOptions) {
     return instance;
   };
 }
-var defaultModifiers = [eventListeners, popperOffsets$1, computeStyles$1, applyStyles$1, offset$2, flip$1, preventOverflow$1, arrow$1, hide$1];
+var defaultModifiers = [eventListeners, popperOffsets$1, computeStyles$1, applyStyles$1, offset$2, flip$2, preventOverflow$1, arrow$1, hide$1];
 var createPopper = /* @__PURE__ */ popperGenerator({
   defaultModifiers
 });
@@ -25405,10 +25405,21 @@ const NumberField = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "dat
 const min = Math.min;
 const max = Math.max;
 const round = Math.round;
+const floor = Math.floor;
 const createCoords = (v) => ({
   x: v,
   y: v
 });
+const oppositeSideMap = {
+  left: "right",
+  right: "left",
+  bottom: "top",
+  top: "bottom"
+};
+const oppositeAlignmentMap = {
+  start: "end",
+  end: "start"
+};
 function clamp(start2, value, end2) {
   return max(start2, min(value, end2));
 }
@@ -25433,6 +25444,58 @@ function getSideAxis(placement) {
 function getAlignmentAxis(placement) {
   return getOppositeAxis(getSideAxis(placement));
 }
+function getAlignmentSides(placement, rects, rtl) {
+  if (rtl === void 0) {
+    rtl = false;
+  }
+  const alignment = getAlignment(placement);
+  const alignmentAxis = getAlignmentAxis(placement);
+  const length = getAxisLength(alignmentAxis);
+  let mainAlignmentSide = alignmentAxis === "x" ? alignment === (rtl ? "end" : "start") ? "right" : "left" : alignment === "start" ? "bottom" : "top";
+  if (rects.reference[length] > rects.floating[length]) {
+    mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
+  }
+  return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
+}
+function getExpandedPlacements(placement) {
+  const oppositePlacement = getOppositePlacement(placement);
+  return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
+}
+function getOppositeAlignmentPlacement(placement) {
+  return placement.replace(/start|end/g, (alignment) => oppositeAlignmentMap[alignment]);
+}
+function getSideList(side, isStart, rtl) {
+  const lr = ["left", "right"];
+  const rl = ["right", "left"];
+  const tb = ["top", "bottom"];
+  const bt = ["bottom", "top"];
+  switch (side) {
+    case "top":
+    case "bottom":
+      if (rtl)
+        return isStart ? rl : lr;
+      return isStart ? lr : rl;
+    case "left":
+    case "right":
+      return isStart ? tb : bt;
+    default:
+      return [];
+  }
+}
+function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
+  const alignment = getAlignment(placement);
+  let list = getSideList(getSide(placement), direction === "start", rtl);
+  if (alignment) {
+    list = list.map((side) => side + "-" + alignment);
+    if (flipAlignment) {
+      list = list.concat(list.map(getOppositeAlignmentPlacement));
+    }
+  }
+  return list;
+}
+function getOppositePlacement(placement) {
+  return placement.replace(/left|right|bottom|top/g, (side) => oppositeSideMap[side]);
+}
 function expandPaddingObject(padding) {
   return {
     top: 0,
@@ -25652,6 +25715,100 @@ async function detectOverflow(state, options) {
     right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
   };
 }
+const flip = function(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: "flip",
+    options,
+    async fn(state) {
+      var _middlewareData$arrow, _middlewareData$flip;
+      const {
+        placement,
+        middlewareData,
+        rects,
+        initialPlacement,
+        platform: platform2,
+        elements
+      } = state;
+      const {
+        mainAxis: checkMainAxis = true,
+        crossAxis: checkCrossAxis = true,
+        fallbackPlacements: specifiedFallbackPlacements,
+        fallbackStrategy = "bestFit",
+        fallbackAxisSideDirection = "none",
+        flipAlignment = true,
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+      if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
+        return {};
+      }
+      const side = getSide(placement);
+      const isBasePlacement = getSide(initialPlacement) === initialPlacement;
+      const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
+      const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
+      if (!specifiedFallbackPlacements && fallbackAxisSideDirection !== "none") {
+        fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
+      }
+      const placements2 = [initialPlacement, ...fallbackPlacements];
+      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const overflows = [];
+      let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
+      if (checkMainAxis) {
+        overflows.push(overflow[side]);
+      }
+      if (checkCrossAxis) {
+        const sides = getAlignmentSides(placement, rects, rtl);
+        overflows.push(overflow[sides[0]], overflow[sides[1]]);
+      }
+      overflowsData = [...overflowsData, {
+        placement,
+        overflows
+      }];
+      if (!overflows.every((side2) => side2 <= 0)) {
+        var _middlewareData$flip2, _overflowsData$filter;
+        const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
+        const nextPlacement = placements2[nextIndex];
+        if (nextPlacement) {
+          return {
+            data: {
+              index: nextIndex,
+              overflows: overflowsData
+            },
+            reset: {
+              placement: nextPlacement
+            }
+          };
+        }
+        let resetPlacement = (_overflowsData$filter = overflowsData.filter((d) => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
+        if (!resetPlacement) {
+          switch (fallbackStrategy) {
+            case "bestFit": {
+              var _overflowsData$map$so;
+              const placement2 = (_overflowsData$map$so = overflowsData.map((d) => [d.placement, d.overflows.filter((overflow2) => overflow2 > 0).reduce((acc, overflow2) => acc + overflow2, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$map$so[0];
+              if (placement2) {
+                resetPlacement = placement2;
+              }
+              break;
+            }
+            case "initialPlacement":
+              resetPlacement = initialPlacement;
+              break;
+          }
+        }
+        if (placement !== resetPlacement) {
+          return {
+            reset: {
+              placement: resetPlacement
+            }
+          };
+        }
+      }
+      return {};
+    }
+  };
+};
 async function convertValueToCoords(state, options) {
   const {
     placement,
@@ -26340,6 +26497,141 @@ const platform = {
   isElement,
   isRTL
 };
+function observeMove(element, onMove) {
+  let io = null;
+  let timeoutId;
+  const root2 = getDocumentElement(element);
+  function cleanup() {
+    clearTimeout(timeoutId);
+    io && io.disconnect();
+    io = null;
+  }
+  function refresh(skip, threshold) {
+    if (skip === void 0) {
+      skip = false;
+    }
+    if (threshold === void 0) {
+      threshold = 1;
+    }
+    cleanup();
+    const {
+      left: left2,
+      top: top2,
+      width,
+      height
+    } = element.getBoundingClientRect();
+    if (!skip) {
+      onMove();
+    }
+    if (!width || !height) {
+      return;
+    }
+    const insetTop = floor(top2);
+    const insetRight = floor(root2.clientWidth - (left2 + width));
+    const insetBottom = floor(root2.clientHeight - (top2 + height));
+    const insetLeft = floor(left2);
+    const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
+    const options = {
+      rootMargin,
+      threshold: max(0, min(1, threshold)) || 1
+    };
+    let isFirstUpdate = true;
+    function handleObserve(entries) {
+      const ratio = entries[0].intersectionRatio;
+      if (ratio !== threshold) {
+        if (!isFirstUpdate) {
+          return refresh();
+        }
+        if (!ratio) {
+          timeoutId = setTimeout(() => {
+            refresh(false, 1e-7);
+          }, 100);
+        } else {
+          refresh(false, ratio);
+        }
+      }
+      isFirstUpdate = false;
+    }
+    try {
+      io = new IntersectionObserver(handleObserve, {
+        ...options,
+        // Handle <iframe>s
+        root: root2.ownerDocument
+      });
+    } catch (e) {
+      io = new IntersectionObserver(handleObserve, options);
+    }
+    io.observe(element);
+  }
+  refresh(true);
+  return cleanup;
+}
+function autoUpdate(reference2, floating, update, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    ancestorScroll = true,
+    ancestorResize = true,
+    elementResize = typeof ResizeObserver === "function",
+    layoutShift = typeof IntersectionObserver === "function",
+    animationFrame = false
+  } = options;
+  const referenceEl = unwrapElement$1(reference2);
+  const ancestors = ancestorScroll || ancestorResize ? [...referenceEl ? getOverflowAncestors(referenceEl) : [], ...getOverflowAncestors(floating)] : [];
+  ancestors.forEach((ancestor) => {
+    ancestorScroll && ancestor.addEventListener("scroll", update, {
+      passive: true
+    });
+    ancestorResize && ancestor.addEventListener("resize", update);
+  });
+  const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
+  let reobserveFrame = -1;
+  let resizeObserver = null;
+  if (elementResize) {
+    resizeObserver = new ResizeObserver((_ref) => {
+      let [firstEntry] = _ref;
+      if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
+        resizeObserver.unobserve(floating);
+        cancelAnimationFrame(reobserveFrame);
+        reobserveFrame = requestAnimationFrame(() => {
+          resizeObserver && resizeObserver.observe(floating);
+        });
+      }
+      update();
+    });
+    if (referenceEl && !animationFrame) {
+      resizeObserver.observe(referenceEl);
+    }
+    resizeObserver.observe(floating);
+  }
+  let frameId;
+  let prevRefRect = animationFrame ? getBoundingClientRect(reference2) : null;
+  if (animationFrame) {
+    frameLoop();
+  }
+  function frameLoop() {
+    const nextRefRect = getBoundingClientRect(reference2);
+    if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
+      update();
+    }
+    prevRefRect = nextRefRect;
+    frameId = requestAnimationFrame(frameLoop);
+  }
+  update();
+  return () => {
+    ancestors.forEach((ancestor) => {
+      ancestorScroll && ancestor.removeEventListener("scroll", update);
+      ancestorResize && ancestor.removeEventListener("resize", update);
+    });
+    cleanupIo && cleanupIo();
+    resizeObserver && resizeObserver.disconnect();
+    resizeObserver = null;
+    if (animationFrame) {
+      cancelAnimationFrame(frameId);
+    }
+  };
+}
 const computePosition = (reference2, floating, options) => {
   const cache = /* @__PURE__ */ new Map();
   const mergedOptions = {
@@ -26495,19 +26787,34 @@ const _sfc_main$B = {
     referenceRef: {
       type: Object,
       required: true
+    },
+    placement: {
+      type: String,
+      required: true
+    },
+    placementStrategy: {
+      type: String,
+      required: true
+    },
+    offsets: {
+      type: Array,
+      required: true
     }
   },
   setup(__props) {
     const props = __props;
     const floatingRef = ref(null);
     const referenceRef = toRef(props, "referenceRef");
+    const middlewares = computed(() => [
+      offset({ crossAxis: props.offsets[0], mainAxis: props.offsets[1] }),
+      flip(),
+      shift({ padding: 16, crossAxis: true, limiter: limitShift() })
+    ]);
     const { floatingStyles } = useFloating(referenceRef, floatingRef, {
       placement: "bottom",
       strategy: "fixed",
-      middleware: [
-        shift({ padding: 16, crossAxis: true, limiter: limitShift() }),
-        offset({ mainAxis: 4 })
-      ]
+      middleware: middlewares,
+      whileElementsMounted: autoUpdate
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
@@ -26547,12 +26854,27 @@ const _sfc_main$A = {
       type: Boolean,
       required: false,
       default: false
+    },
+    placement: {
+      type: String,
+      required: false,
+      default: "bottom"
+    },
+    placementStrategy: {
+      type: String,
+      required: false,
+      default: "fixed"
+    },
+    offsets: {
+      type: Array,
+      required: false,
+      default: () => [0, 4]
     }
   },
   setup(__props) {
     useCssVars((_ctx) => ({
-      "3cdf9de8": __props.maxHeight + "px",
-      "8ae6b87e": __props.maxWidth + "px"
+      "63a50094": __props.maxHeight + "px",
+      "325bc339": __props.maxWidth + "px"
     }));
     const props = __props;
     const transitionDuration = {
@@ -26588,13 +26910,16 @@ const _sfc_main$A = {
             ref: hostRef,
             tabindex: "-1",
             "reference-ref": __props.referenceRef,
+            placement: __props.placement,
+            "placement-strategy": __props.placementStrategy,
+            offsets: __props.offsets,
             "data-test-selector": "modal"
           }, {
             default: withCtx(() => [
               renderSlot(_ctx.$slots, "default", {}, void 0, true)
             ], void 0, true),
             _: 3
-          }, 8, ["reference-ref"])), [
+          }, 8, ["reference-ref", "placement", "placement-strategy", "offsets"])), [
             [unref(outClick), unref(toggler).close]
           ]) : createCommentVNode("", true)
         ], void 0, true),
@@ -26603,7 +26928,7 @@ const _sfc_main$A = {
     };
   }
 };
-const Modal = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-078bbe11"]]);
+const Modal = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-27bd5280"]]);
 const _hoisted_1$h = { class: "zw-field" };
 const _hoisted_2$6 = ["for"];
 const _hoisted_3$2 = ["value", "id", "placeholder"];
@@ -28610,7 +28935,8 @@ const _sfc_main$2 = {
     const { floatingStyles } = useFloating(referenceRef, floatingRef, {
       placement: toRef(props, "placement"),
       strategy: "fixed",
-      middleware: middlewares
+      middleware: middlewares,
+      whileElementsMounted: autoUpdate
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {

package/lib/components/base/Modal.vue

@@ -5,6 +5,9 @@
             ref="hostRef"
             tabindex="-1"
             :reference-ref="referenceRef"
+            :placement="placement"
+            :placement-strategy="placementStrategy"
+            :offsets="offsets"
             v-out-click="toggler.close"
             v-if="toggler.isOpened && referenceRef"
             data-test-selector="modal"
@@ -49,6 +52,24 @@ const props = defineProps({
         type: Boolean,
         required: false,
         default: false
+    },
+
+    placement: {
+        type: String,
+        required: false,
+        default: 'bottom'
+    },
+
+    placementStrategy: {
+        type: String,
+        required: false,
+        default: 'fixed'
+    },
+
+    offsets: {
+        type: Array,
+        required: false,
+        default: () => [0, 4]
     }
 });
 

package/lib/components/base/ModalFloating.vue

@@ -5,26 +5,44 @@
 </template>
 
 <script setup>
-import { ref, toRef } from 'vue';
-import { useFloating, limitShift, offset, shift } from '@floating-ui/vue';
+import { computed, ref, toRef } from 'vue';
+import { useFloating, limitShift, offset, shift, autoUpdate, flip } from '@floating-ui/vue';
 
 const props = defineProps({
     referenceRef: {
         type: Object,
         required: true
+    },
+
+    placement: {
+        type: String,
+        required: true
+    },
+
+    placementStrategy: {
+        type: String,
+        required: true
+    },
+
+    offsets: {
+        type: Array,
+        required: true
     }
 });
 
 const floatingRef = ref(null);
 const referenceRef = toRef(props, 'referenceRef');
 
+const middlewares = computed(() => [
+    offset({ crossAxis: props.offsets[0], mainAxis: props.offsets[1] }),
+    flip(),
+    shift({ padding: 16, crossAxis: true, limiter: limitShift() })
+]);
+
 const { floatingStyles } = useFloating(referenceRef, floatingRef, {
     placement: 'bottom',
     strategy: 'fixed',
-
-    middleware: [
-        shift({ padding: 16, crossAxis: true, limiter: limitShift() }),
-        offset({ mainAxis: 4 })
-    ]
+    middleware: middlewares,
+    whileElementsMounted: autoUpdate
 });
 </script>

package/lib/components/toolbar/ToolbarFloating.vue

@@ -6,7 +6,7 @@
 
 <script setup>
 import { computed, ref, toRef } from 'vue';
-import { useFloating, limitShift, offset, shift } from '@floating-ui/vue';
+import { useFloating, limitShift, offset, shift, autoUpdate } from '@floating-ui/vue';
 
 const props = defineProps({
     referenceRef: {
@@ -36,6 +36,7 @@ const middlewares = computed(() => [
 const { floatingStyles } = useFloating(referenceRef, floatingRef, {
     placement: toRef(props, 'placement'),
     strategy: 'fixed',
-    middleware: middlewares
+    middleware: middlewares,
+    whileElementsMounted: autoUpdate
 });
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "4.1.0-1",
+  "version": "4.1.0-3",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "bin": {