@window-splitter/vue 1.0.2 → 1.1.0

package/dist/index.mjs

@@ -339,7 +339,7 @@ const fe = {
     return +t;
   }
 };
-function xe(e) {
+function Ae(e) {
   return e.orientation === "horizontal" ? e.dragOvershoot.gt(0) ? "w-resize" : e.dragOvershoot.lt(0) ? "e-resize" : "ew-resize" : e.dragOvershoot.gt(0) ? "n-resize" : e.dragOvershoot.lt(0) ? "s-resize" : "ns-resize";
 }
 function ut(e) {
@@ -513,7 +513,7 @@ function bt(e, t) {
   const a = O(e), r = k({ ...e, items: a }, t);
   return X(V(e), r.currentValue);
 }
-function Ae(e) {
+function xe(e) {
   const t = ce(e);
   let a = !1;
   return e.items.map((r) => {
@@ -584,10 +584,10 @@ function O(e) {
   return a;
 }
 function ie(e, t) {
-  var A, E, L, M;
+  var x, E, L, M;
   const a = He(e, t.handleId), r = e.items[a], l = [...e.items];
   let n = e.orientation === "horizontal" ? t.value.deltaX : t.value.deltaY;
-  if (t.value.shiftKey && (n *= 15), n === 0)
+  if (t.value.shiftKey && (n *= e.shiftAmount ?? 15), n === 0)
     return {};
   const o = n / Math.abs(n), i = Le(e, l, a + o, o, "subtract", t.disregardCollapseBuffer);
   if (!i)
@@ -602,9 +602,9 @@ function ie(e, t) {
     };
   const d = e.dragOvershoot.add(n);
   if (!t.disregardCollapseBuffer) {
-    const R = d.lt(0) && o > 0, w = d.gt(0) && o > 0, x = d.gt(0) && o < 0, U = d.lt(0) && o < 0, re = u.currentValue.value.add(new y(d).mul(x ? o : 1)), le = S(e, u.min), qe = d.abs().lt(Ce) && // Let the panel expand at it's min size
+    const R = d.lt(0) && o > 0, w = d.gt(0) && o > 0, A = d.gt(0) && o < 0, U = d.lt(0) && o < 0, re = u.currentValue.value.add(new y(d).mul(A ? o : 1)), le = S(e, u.min), qe = d.abs().lt(Ce) && // Let the panel expand at it's min size
     !u.currentValue.value.add(d.abs()).gte(u.min.value) && u.collapsible && u.collapsed && (w || U);
-    if (re.lte(le) && (d.eq(0) || x || R || qe))
+    if (re.lte(le) && (d.eq(0) || A || R || qe))
       return { dragOvershoot: d };
   }
   if (!t.disregardCollapseBuffer && i.collapsible && i.currentValue.value.eq(S(e, i.min))) {
@@ -619,7 +619,7 @@ function ie(e, t) {
   if (t.disregardCollapseBuffer)
     u.collapsible && u.collapsed && (u.collapsed = !1);
   else if (u.collapsible && u.collapsed) {
-    if ((A = u.onCollapseChange) != null && A.current && u.collapseIsControlled && !t.controlled && !t.isVirtual)
+    if ((x = u.onCollapseChange) != null && x.current && u.collapseIsControlled && !t.controlled && !t.isVirtual)
       return u.onCollapseChange.current(!1), { dragOvershoot: d };
     const R = (
       // Take the size it was at
@@ -789,7 +789,8 @@ function St(e, t) {
     orientation: e.orientation || "horizontal",
     dragOvershoot: new y(0),
     groupId: e.groupId || `group-${Pt++}`,
-    autosaveStrategy: e.autosaveStrategy
+    autosaveStrategy: e.autosaveStrategy,
+    shiftAmount: e.shiftAmount ?? 15
   }, o = {
     prepare: () => {
       n.items = O(n);
@@ -1055,7 +1056,7 @@ function Ct({ groupId: e, id: t, collapsible: a, collapsed: r }) {
   };
   return a && (l["data-collapsed"] = r), l;
 }
-function xt({ groupId: e, id: t, orientation: a, isDragging: r, activeDragHandleId: l, disabled: n, controlsId: o, min: i, max: u, currentValue: d, groupSize: c }) {
+function At({ groupId: e, id: t, orientation: a, isDragging: r, activeDragHandleId: l, disabled: n, controlsId: o, min: i, max: u, currentValue: d, groupSize: c }) {
   return {
     id: t,
     role: "separator",
@@ -1072,7 +1073,7 @@ function xt({ groupId: e, id: t, orientation: a, isDragging: r, activeDragHandle
     "aria-valuenow": d ? X(c, d) : void 0
   };
 }
-function At(e, t) {
+function xt(e, t) {
   const a = new ResizeObserver((l) => {
     const n = {};
     for (const o of l) {
@@ -1203,14 +1204,14 @@ const Et = /* @__PURE__ */ ze({
       defaultCollapsed: m,
       default: s,
       isStaticAtRest: f
-    }), A = N(() => {
-      var x;
-      const w = (x = z == null ? void 0 : z.value) == null ? void 0 : x.items.find((U) => U.id === v);
+    }), x = N(() => {
+      var A;
+      const w = (A = z == null ? void 0 : z.value) == null ? void 0 : A.items.find((U) => U.id === v);
       if (!(!w || !P(w)))
         return w;
     });
     let E = !1;
-    A.value ? h == null || h({
+    x.value ? h == null || h({
       type: "rebindPanelCallbacks",
       data: {
         id: v,
@@ -1221,18 +1222,18 @@ const Et = /* @__PURE__ */ ze({
       var le;
       const w = (le = z == null ? void 0 : z.value) == null ? void 0 : le.groupId;
       if (!w || !E) return;
-      const x = document.getElementById(w);
-      if (!x) return;
+      const A = document.getElementById(w);
+      if (!A) return;
       const U = document.getElementById(v);
       if (!U) return;
-      const re = Array.from(x.children).indexOf(U);
+      const re = Array.from(A.children).indexOf(U);
       typeof re == "number" && (h == null || h({
         type: "registerDynamicPanel",
         data: { ...C(), order: re }
       }), E = !1);
     });
     const L = N(
-      () => !E && dt(C(), A.value)
+      () => !E && dt(C(), x.value)
     );
     se(() => {
       L.value && (h == null || h({ type: "updateConstraints", data: C() }));
@@ -1242,19 +1243,19 @@ const Et = /* @__PURE__ */ ze({
       getId: () => v,
       collapse: () => {
         var w;
-        (w = A.value) != null && w.collapsible && (h == null || h({ type: "collapsePanel", panelId: v, controlled: !0 }));
+        (w = x.value) != null && w.collapsible && (h == null || h({ type: "collapsePanel", panelId: v, controlled: !0 }));
       },
       isCollapsed: () => {
-        var w, x;
-        return !!((w = A.value) != null && w.collapsible && ((x = A.value) != null && x.collapsed));
+        var w, A;
+        return !!((w = x.value) != null && w.collapsible && ((A = x.value) != null && A.collapsed));
       },
       expand: () => {
         var w;
-        (w = A.value) != null && w.collapsible && (h == null || h({ type: "expandPanel", panelId: v, controlled: !0 }));
+        (w = x.value) != null && w.collapsible && (h == null || h({ type: "expandPanel", panelId: v, controlled: !0 }));
       },
       isExpanded: () => {
-        var w, x;
-        return !!((w = A.value) != null && w.collapsible && !((x = A.value) != null && x.collapsed));
+        var w, A;
+        return !!((w = x.value) != null && w.collapsible && !((A = x.value) != null && A.collapsed));
       },
       getPixelSize: () => wt(z.value, v),
       getPercentageSize: () => bt(z.value, v),
@@ -1263,7 +1264,7 @@ const Et = /* @__PURE__ */ ze({
     const M = N(
       () => {
         var w;
-        return (w = A.value) == null ? void 0 : w.collapseIsControlled;
+        return (w = x.value) == null ? void 0 : w.collapseIsControlled;
       }
     );
     se(() => {
@@ -1272,12 +1273,12 @@ const Et = /* @__PURE__ */ ze({
       });
     });
     const R = N(() => {
-      var x;
-      const w = A.value;
+      var A;
+      const w = x.value;
       return {
         ...p,
         ...Ct({
-          groupId: (x = z == null ? void 0 : z.value) == null ? void 0 : x.groupId,
+          groupId: (A = z == null ? void 0 : z.value) == null ? void 0 : A.groupId,
           id: v,
           collapsible: w == null ? void 0 : w.collapsible,
           collapsed: w == null ? void 0 : w.collapsed
@@ -1289,7 +1290,7 @@ const Et = /* @__PURE__ */ ze({
         }
       };
     });
-    return (w, x) => (Ie(), ye("div", Te(Fe(R.value)), [
+    return (w, A) => (Ie(), ye("div", Te(Fe(R.value)), [
       Pe(w.$slots, "default")
     ], 16));
   }
@@ -1300,10 +1301,11 @@ const Et = /* @__PURE__ */ ze({
     autosaveId: {},
     orientation: { default: "horizontal" },
     autosaveStrategy: { default: "localStorage" },
+    shiftAmount: {},
     id: {}
   },
   setup(e, { expose: t }) {
-    const a = ke(e, ["orientation", "autosaveStrategy", "snapshot", "autosaveId", "id"]);
+    const a = ke(e, ["orientation", "autosaveStrategy", "snapshot", "autosaveId", "id", "shiftAmount"]);
     let r = e.snapshot;
     if (!r && typeof window < "u" && e.autosaveId && e.autosaveStrategy === "localStorage") {
       const f = localStorage.getItem(e.autosaveId);
@@ -1316,6 +1318,7 @@ const Et = /* @__PURE__ */ ze({
         orientation: e.orientation,
         groupId: n,
         autosaveStrategy: e.autosaveStrategy,
+        shiftAmount: e.shiftAmount,
         ...r ? ut(r) : void 0
       },
       (f) => {
@@ -1326,7 +1329,7 @@ const Et = /* @__PURE__ */ ze({
       l.value = !1;
     });
     const d = de(o), c = N(() => {
-      const f = Ae(d.value);
+      const f = xe(d.value);
       return {
         height: "100%",
         display: "grid",
@@ -1351,7 +1354,7 @@ const Et = /* @__PURE__ */ ze({
     return W(() => {
       se(() => {
         s.value;
-        const f = At(n, (g) => {
+        const f = xt(n, (g) => {
           i({ type: "setActualItemsSize", childrenSizes: g });
         });
         je(f);
@@ -1360,7 +1363,7 @@ const Et = /* @__PURE__ */ ze({
       getId: () => n,
       getPixelSizes: () => vt(d.value),
       getPercentageSizes: () => zt(d.value),
-      getTemplate: () => Ae({
+      getTemplate: () => xe({
         ...d.value,
         items: O(d.value)
       }),
@@ -1429,7 +1432,7 @@ const Et = /* @__PURE__ */ ze({
     const { moveProps: m } = Vt({
       onMoveStart: () => {
         var g;
-        l == null || l({ type: "dragHandleStart", handleId: r }), (g = e.onDragStart) == null || g.call(e), n != null && n.value && (document.body.style.cursor = xe(n == null ? void 0 : n.value) || "auto");
+        l == null || l({ type: "dragHandleStart", handleId: r }), (g = e.onDragStart) == null || g.call(e), n != null && n.value && (document.body.style.cursor = Ae(n == null ? void 0 : n.value) || "auto");
       },
       onMove: (g) => {
         var p;
@@ -1447,16 +1450,16 @@ const Et = /* @__PURE__ */ ze({
         } catch {
         }
     }, f = N(() => {
-      var h, z, I, C, A, E, L, M, R;
+      var h, z, I, C, x, E, L, M, R;
       const g = (h = n == null ? void 0 : n.value) == null ? void 0 : h.items.findIndex((w) => w.id === r);
       if (!g) return { id: r };
       const p = (z = n == null ? void 0 : n.value) == null ? void 0 : z.items[g], v = (I = n == null ? void 0 : n.value) == null ? void 0 : I.items[g - 1];
       return !v || !P(v) ? { id: r } : {
         ...t,
-        ...xt({
+        ...At({
           groupId: (C = n == null ? void 0 : n.value) == null ? void 0 : C.groupId,
           id: r,
-          orientation: ((A = n == null ? void 0 : n.value) == null ? void 0 : A.orientation) || "horizontal",
+          orientation: ((x = n == null ? void 0 : n.value) == null ? void 0 : x.orientation) || "horizontal",
           isDragging: ((E = n == null ? void 0 : n.value) == null ? void 0 : E.activeDragHandleId) === r,
           activeDragHandleId: (L = n == null ? void 0 : n.value) == null ? void 0 : L.activeDragHandleId,
           disabled: e.disabled,
@@ -1471,7 +1474,7 @@ const Et = /* @__PURE__ */ ze({
           m.onKeyDown(w), s(w);
         },
         style: {
-          cursor: n != null && n.value ? xe(n.value) : void 0,
+          cursor: n != null && n.value ? Ae(n.value) : void 0,
           width: ((M = n == null ? void 0 : n.value) == null ? void 0 : M.orientation) === "horizontal" ? `${p == null ? void 0 : p.size.value.toNumber()}px` : "100%",
           height: ((R = n == null ? void 0 : n.value) == null ? void 0 : R.orientation) === "vertical" ? `${p == null ? void 0 : p.size.value.toNumber()}px` : "100%"
         }