hys-ui 0.5.0 → 0.7.0

package/dist/internal/MultiSplitPane.vue.js

@@ -1,22 +1,27 @@
-import { defineComponent as $e, useId as De, ref as D, computed as p, watch as H, onMounted as Oe, onActivated as Be, onDeactivated as Ie, onBeforeUnmount as Le, openBlock as b, createElementBlock as w, mergeProps as x, unref as ee, Fragment as F, renderList as ve, createElementVNode as T, normalizeStyle as Ke, renderSlot as te, createTextVNode as He, toDisplayString as Ne, normalizeClass as je, createBlock as Ve, resolveDynamicComponent as We, createCommentVNode as ae, nextTick as J } from "vue";
-import { ChevronUp as _e, ChevronRight as fe, ChevronLeft as de, ChevronDown as qe } from "lucide-vue-next";
-import { useHysRootAttrs as Ue } from "../config.js";
-import { paneRatio as N, fitPaneSizes as Fe, paneEpsilon as d } from "../composables/splitPaneSizes.js";
-import { useSplitPaneDrag as Te } from "../composables/useSplitPaneDrag.js";
-import { useSplitPaneStorage as Je, readStoredPaneSizes as Ge } from "../composables/useSplitPaneStorage.js";
-const Qe = ["id", "data-hys-pane", "inert"], Xe = ["data-hys-separator"], Ye = ["tabindex", "aria-label", "aria-controls", "aria-disabled", "aria-orientation", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-keyshortcuts", "data-resizing", "onPointerdown", "onKeydown", "onDblclick"], Ze = {
+import { defineComponent as Te, useId as je, ref as B, computed as h, watch as O, onMounted as He, onActivated as Ne, onDeactivated as Ve, onBeforeUnmount as qe, openBlock as w, createElementBlock as C, mergeProps as te, unref as le, Fragment as F, renderList as ge, createElementVNode as J, normalizeStyle as We, renderSlot as ie, createTextVNode as Ue, toDisplayString as Fe, normalizeClass as Je, createBlock as Ge, resolveDynamicComponent as Qe, createCommentVNode as oe, nextTick as G } from "vue";
+import { ChevronUp as Xe, ChevronRight as ze, ChevronLeft as we, ChevronDown as Ye } from "lucide-vue-next";
+import { useHysRootAttrs as Ze } from "../config.js";
+import { splitIsVertical as xe, cascadeSplitResize as ea, adjacentSplitResize as ke, splitPair as Se, splitSnapThreshold as aa, splitSnapCandidates as Ce, constrainSplitSize as Me } from "../components/HysSplitPane/splitPaneResize.js";
+import { paneRatio as j, fitPaneSizes as ta, paneEpsilon as f } from "../composables/splitPaneSizes.js";
+import { useSplitPaneDrag as la } from "../composables/useSplitPaneDrag.js";
+import { useSplitPaneStorage as ia, readStoredPaneSizes as oa } from "../composables/useSplitPaneStorage.js";
+const sa = ["data-layout"], na = ["id", "data-hys-pane", "inert"], ra = ["data-hys-separator"], ua = ["tabindex", "aria-label", "aria-controls", "aria-disabled", "aria-orientation", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-keyshortcuts", "data-resizing", "onPointerdown", "onKeydown", "onDblclick"], ca = {
   class: "hys-ui-splitter-grip",
   "aria-hidden": "true"
-}, xe = ["aria-label", "aria-controls", "aria-expanded", "data-collapsed", "disabled", "onClick"], et = {
+}, va = ["aria-label", "aria-controls", "aria-expanded", "data-collapsed", "disabled", "onClick"], fa = {
   key: 0,
   class: "hys-ui-splitter-preview",
   "aria-hidden": "true"
-}, nt = /* @__PURE__ */ $e({
+}, za = /* @__PURE__ */ Te({
   __name: "MultiSplitPane",
   props: {
     panels: {},
     sizes: {},
     vertical: { type: Boolean },
+    responsiveBreakpoint: {},
+    resizeMode: {},
+    snapThreshold: {},
+    cancelBehavior: {},
     disabled: { type: Boolean },
     lazy: { type: Boolean },
     step: {},
@@ -25,281 +30,317 @@ const Qe = ["id", "data-hys-pane", "inert"], Xe = ["data-hys-separator"], Ye = [
     dividerSize: {},
     doubleClickAction: {}
   },
-  emits: ["update:sizes", "panelResizeStart", "panelResize", "panelResizeEnd", "panelCollapse"],
-  setup(S, { expose: me, emit: pe }) {
-    const n = S, k = pe, he = Ue(), ye = De(), O = D(), v = D(0), C = D(!1), j = D(), V = D();
-    Je(
-      () => n.sizes === void 0 && n.storageKey ? n.storageKey + ":panels" : void 0,
-      j,
-      Ge
+  emits: ["update:sizes", "panelResizeStart", "panelResize", "panelResizeEnd", "panelCollapse", "layoutChange"],
+  setup(Q, { expose: Pe, emit: Re }) {
+    const s = Q, k = Re, Be = Ze(), Ee = je(), L = B(), v = B(0), X = B(0), m = h(() => xe(s.vertical, X.value, s.responsiveBreakpoint)), Y = h(() => m.value ? "vertical" : "horizontal");
+    O(Y, (e) => k("layoutChange", e));
+    const E = B(!1), H = B(), N = B();
+    ia(
+      () => s.sizes === void 0 && s.storageKey ? s.storageKey + ":panels" : void 0,
+      H,
+      oa
     );
-    const B = D(), u = p(() => {
+    const I = B(), u = h(() => {
       const e = /* @__PURE__ */ new Set();
-      return n.panels.filter((t) => e.has(t.id) ? !1 : (e.add(t.id), !0));
-    }), f = p(() => u.value.map((e) => e.id)), I = (e) => `${ye}-${e}`, P = p(() => Math.max(0, u.value.length - 1)), W = p(() => {
-      const e = n.sizes ?? j.value;
-      return u.value.map((t) => e && Object.hasOwn(e, t.id) ? e[t.id] : t.size);
-    }), g = p(() => u.value.map((e) => {
-      const t = Math.min(100, N(e.min, v.value) ?? 0);
-      return { min: t, max: Math.max(t, Math.min(100, N(e.max, v.value) ?? 100)) };
-    })), r = p(() => Fe(u.value.map((e, t) => {
-      const a = W.value[t], i = N(a, v.value);
-      return i === 0 && e.collapsible ? { preferred: i, min: 0, max: 0 } : { ...g.value[t], preferred: i, relative: typeof a == "string" && a.endsWith("%") };
-    }))), be = p(() => u.value.filter((e, t) => e.collapsible && r.value[t] <= d).map((e) => e.id)), _ = (e) => e * v.value / 100, G = (e, t) => typeof t == "number" ? _(e) : t != null && t.endsWith("px") ? `${_(e)}px` : `${e}%`, q = /* @__PURE__ */ new Map();
-    H(
-      () => f.value.map((e, t) => ({ key: e, ratio: r.value[t], length: W.value[t] })),
+      return s.panels.filter((a) => e.has(a.id) ? !1 : (e.add(a.id), !0));
+    }), y = h(() => u.value.map((e) => e.id)), K = (e) => `${Ee}-${e}`, M = h(() => Math.max(0, u.value.length - 1)), V = h(() => {
+      const e = s.sizes ?? H.value;
+      return u.value.map((a) => e && Object.hasOwn(e, a.id) ? e[a.id] : a.size);
+    }), z = h(() => u.value.map((e) => {
+      const a = Math.min(100, j(e.min, v.value) ?? 0);
+      return { min: a, max: Math.max(a, Math.min(100, j(e.max, v.value) ?? 100)) };
+    })), r = h(() => ta(u.value.map((e, a) => {
+      const t = V.value[a], i = j(t, v.value);
+      return i === 0 && e.collapsible ? { preferred: i, min: 0, max: 0 } : { ...z.value[a], preferred: i, relative: typeof t == "string" && t.endsWith("%") };
+    }))), se = h(() => u.value.filter((e, a) => e.collapsible && r.value[a] <= f).map((e) => e.id)), q = (e) => e * v.value / 100, Z = (e, a) => typeof a == "number" ? q(e) : a != null && a.endsWith("px") ? `${q(e)}px` : `${e}%`, W = /* @__PURE__ */ new Map();
+    O(
+      () => y.value.map((e, a) => ({ key: e, ratio: r.value[a], length: V.value[a] })),
       (e) => {
-        for (const t of e)
-          t.ratio > d && q.set(t.key, v.value > 0 ? G(t.ratio, t.length) : t.length ?? G(t.ratio, void 0));
-        for (const t of q.keys())
-          f.value.includes(t) || q.delete(t);
+        for (const a of e)
+          a.ratio > f && W.set(a.key, v.value > 0 ? Z(a.ratio, a.length) : a.length ?? Z(a.ratio, void 0));
+        for (const a of W.keys())
+          y.value.includes(a) || W.delete(a);
       },
       { immediate: !0 }
-    ), H(be, (e, t) => {
-      for (const a of t) !e.includes(a) && f.value.includes(a) && k("panelCollapse", a, !1);
-      for (const a of e) t.includes(a) || k("panelCollapse", a, !0);
+    ), O(se, (e, a) => {
+      for (const t of a) !e.includes(t) && y.value.includes(t) && k("panelCollapse", t, !1);
+      for (const t of e) a.includes(t) || k("panelCollapse", t, !0);
     });
-    function Q(e, t) {
-      return e.length === t.length && e.every((a, i) => Math.abs(a - t[i]) <= d);
+    function U(e, a) {
+      return e.length === a.length && e.every((t, i) => Math.abs(t - a[i]) <= f);
     }
-    function L(e) {
-      if (Q(e, r.value)) return;
-      const t = Object.fromEntries(f.value.map((a, i) => [a, G(e[i], W.value[i])]));
-      n.sizes === void 0 && (j.value = t), k("update:sizes", t);
-    }
-    function le(e = r.value) {
-      return Object.fromEntries(f.value.map((t, a) => [t, _(e[a])]));
+    function A(e) {
+      if (U(e, r.value)) return;
+      const a = Object.fromEntries(y.value.map((t, i) => [t, Z(e[i], V.value[i])]));
+      s.sizes === void 0 && (H.value = a), k("update:sizes", a);
     }
-    function X(e, t, a, i = r.value) {
-      return { separator: e, before: t, after: a, sizes: le(i) };
+    function ne(e = r.value) {
+      return Object.fromEntries(y.value.map((a, t) => [a, q(e[t])]));
     }
-    function K(e, t, a) {
-      const i = [...e];
-      return i[t + 1] = Math.max(0, e[t] + e[t + 1] - a), i[t] = a, i;
+    function x(e, a, t, i = r.value) {
+      return { separator: e, before: a, after: t, sizes: ne(i) };
     }
-    function R(e) {
-      const t = r.value[e], a = t + r.value[e + 1], i = g.value[e], s = g.value[e + 1], l = Math.max(i.min, a - s.max), o = Math.min(i.max, a - s.min);
-      return l > o ? { min: t, max: t } : { min: l, max: o };
+    const S = h(() => Array.from(
+      { length: M.value },
+      (e, a) => s.resizeMode === "cascade" ? ea(r.value, z.value, u.value, a) : ke(r.value, z.value, a)
+    ));
+    function re(e) {
+      var a, t;
+      return !s.disabled && ((a = u.value[e]) == null ? void 0 : a.resizable) !== !1 && ((t = u.value[e + 1]) == null ? void 0 : t.resizable) !== !1;
     }
-    function A(e) {
-      var i, s;
-      if (n.disabled || ((i = u.value[e]) == null ? void 0 : i.resizable) === !1 || ((s = u.value[e + 1]) == null ? void 0 : s.resizable) === !1) return !1;
-      const { min: t, max: a } = R(e);
-      return a - t > d;
+    function T(e) {
+      const { min: a, max: t } = S.value[e];
+      return re(e) && t - a > f;
     }
-    function Y(e, t) {
-      var z;
-      if (n.disabled || !((z = u.value[e]) != null && z.collapsible) || t < 0 || t >= P.value || t !== e && t !== e - 1) return;
-      const a = t === e ? e + 1 : e - 1, i = r.value[e], s = i + r.value[a];
-      if (i > d) return s <= g.value[a].max + d ? 0 : void 0;
-      const l = Math.max(g.value[e].min, s - g.value[a].max), o = Math.min(g.value[e].max, s - g.value[a].min);
-      if (o < l || o <= d) return;
-      const c = N(q.get(f.value[e]) ?? u.value[e].size, v.value) || s / 2;
+    function ee(e, a) {
+      var d;
+      if (s.disabled || !((d = u.value[e]) != null && d.collapsible) || a < 0 || a >= M.value || a !== e && a !== e - 1) return;
+      const t = a === e ? e + 1 : e - 1, i = r.value[e], n = i + r.value[t];
+      if (i > f) return n <= z.value[t].max + f ? 0 : void 0;
+      const l = Math.max(z.value[e].min, n - z.value[t].max), o = Math.min(z.value[e].max, n - z.value[t].min);
+      if (o < l || o <= f) return;
+      const c = j(W.get(y.value[e]) ?? u.value[e].size, v.value) || n / 2;
       return Math.min(o, Math.max(l, c));
     }
-    async function E(e, t) {
+    async function ue(e, a, t) {
       if (v.value <= 0) return !1;
-      const a = f.value.indexOf(e), i = t === void 0 ? [a, a - 1] : [t];
-      for (const s of i) {
-        const l = Y(a, s);
-        if (l === void 0) continue;
-        const o = r.value[a] <= d, c = r.value[s] + r.value[s + 1];
-        m.finish(!0), L(K(r.value, s, a === s ? l : c - l)), await J();
-        const z = f.value.indexOf(e);
-        return z >= 0 && o !== r.value[z] <= d;
+      const i = y.value.indexOf(e);
+      if (i < 0 || r.value[i] <= f === a) return !1;
+      const n = t === void 0 ? [i, i - 1] : [t];
+      for (const l of n) {
+        const o = ee(i, l);
+        if (o === void 0) continue;
+        const c = r.value[l] + r.value[l + 1];
+        b.finish(!0), A(Se(r.value, l, i === l ? o : c - o)), await G();
+        const d = y.value.indexOf(e);
+        return d >= 0 && r.value[d] <= f === a;
       }
       return !1;
     }
-    async function ie() {
-      return n.disabled ? !1 : (m.finish(!0), n.sizes === void 0 && (j.value = void 0), k("update:sizes", {}), await J(), u.value.every((e, t) => e.size === W.value[t]));
+    function _(e, a) {
+      return ue(e, !se.value.includes(e), a);
+    }
+    async function ce() {
+      return s.disabled ? !1 : (b.finish(!0), s.sizes === void 0 && (H.value = void 0), k("update:sizes", {}), await G(), u.value.every((e, a) => e.size === V.value[a]));
     }
-    async function ge(e, t, a) {
+    async function Ae(e, a, t) {
       if (v.value <= 0) return !1;
-      const i = f.value.indexOf(e), s = N(t, v.value);
-      if (i < 0 || s === void 0) return !1;
+      const i = y.value.indexOf(e), n = j(a, v.value);
+      if (i < 0 || n === void 0) return !1;
       const l = r.value[i];
-      if (s === 0 && u.value[i].collapsible)
-        return l > d ? E(e, a) : !1;
-      const o = a === void 0 ? [i, i - 1] : [a];
+      if (n === 0 && u.value[i].collapsible)
+        return l > f ? _(e, t) : !1;
+      const o = t === void 0 ? [i, i - 1] : [t];
       let c;
-      for (const y of o) {
-        if (y < 0 || y >= P.value || y !== i && y !== i - 1 || !A(y)) continue;
-        const Re = r.value[y] + r.value[y + 1], re = y === i ? s : Re - s, { min: Ae, max: Ee } = R(y), ue = Math.min(Ee, Math.max(Ae, re)), ce = Math.abs(ue - re);
-        (!c || ce < c.distance) && (c = { bar: y, first: ue, distance: ce });
+      for (const p of o) {
+        if (p < 0 || p >= M.value || p !== i && p !== i - 1 || !re(p)) continue;
+        const R = r.value[p] + r.value[p + 1], de = p === i ? n : R - n, { min: he, max: me } = ke(r.value, z.value, p);
+        if (me - he <= f) continue;
+        const ye = Math.min(me, Math.max(he, de)), be = Math.abs(ye - de);
+        (!c || be < c.distance) && (c = { bar: p, first: ye, distance: be });
       }
       if (!c) return !1;
-      m.finish(!0), L(K(r.value, c.bar, c.first)), await J();
-      const z = f.value.indexOf(e);
-      return z >= 0 && Math.abs(r.value[z] - l) > d;
+      b.finish(!0), A(Se(r.value, c.bar, c.first)), await G();
+      const d = y.value.indexOf(e);
+      return d >= 0 && Math.abs(r.value[d] - l) > f;
     }
-    function Z(e) {
-      const t = [e, e + 1].filter((a) => Y(a, e) !== void 0);
-      return t.find((a) => r.value[a] <= d) ?? t[0];
+    function ae(e) {
+      const a = [e, e + 1].filter((t) => ee(t, e) !== void 0);
+      return a.find((t) => r.value[t] <= f) ?? a[0];
     }
-    function oe(e) {
-      const t = Z(e);
-      if (t !== void 0) return E(f.value[t], e);
+    function ve(e) {
+      const a = ae(e);
+      if (a !== void 0) return _(y.value[a], e);
     }
-    function ze(e) {
-      n.doubleClickAction === "reset" ? ie() : n.doubleClickAction === "collapse" && oe(e);
+    function _e(e) {
+      s.doubleClickAction === "reset" ? ce() : s.doubleClickAction === "collapse" && ve(e);
     }
-    function we(e) {
-      var a;
-      const t = f.value.indexOf(e);
-      return t >= 0 ? ((a = O.value) == null ? void 0 : a.ownerDocument.getElementById(I(t))) ?? void 0 : void 0;
+    function $e(e) {
+      var t;
+      const a = y.value.indexOf(e);
+      return a >= 0 ? ((t = L.value) == null ? void 0 : t.ownerDocument.getElementById(K(a))) ?? void 0 : void 0;
     }
-    const $ = p(() => u.value.map((e, t) => ({
+    const $ = h(() => u.value.map((e, a) => ({
       panel: e,
-      index: t,
-      size: _(r.value[t]),
-      collapsed: r.value[t] <= d,
-      toggle: () => E(e.id)
+      index: a,
+      size: q(r.value[a]),
+      collapsed: r.value[a] <= f,
+      toggle: () => _(e.id)
     })));
-    let M;
-    function U() {
-      const e = O.value;
+    let P;
+    function D() {
+      const e = L.value;
       if (!e) return;
-      const t = e.getBoundingClientRect(), a = e.querySelector(":scope > .hys-ui-splitter-bar"), i = n.vertical ? e.clientHeight || t.height : e.clientWidth || t.width, s = (n.vertical ? a == null ? void 0 : a.offsetHeight : a == null ? void 0 : a.offsetWidth) || n.dividerSize;
-      v.value = Math.max(0, i - s * P.value), C.value = getComputedStyle(e).direction === "rtl";
+      const a = e.getBoundingClientRect(), t = e.querySelector(":scope > .hys-ui-splitter-bar");
+      X.value = e.clientWidth || a.width;
+      const i = m.value ? e.clientHeight || a.height : X.value, n = (m.value ? t == null ? void 0 : t.offsetHeight : t == null ? void 0 : t.offsetWidth) || s.dividerSize;
+      v.value = Math.max(0, i - n * M.value), E.value = getComputedStyle(e).direction === "rtl";
     }
-    function se() {
-      M || !O.value || (U(), typeof ResizeObserver == "function" && (M = new ResizeObserver(U), M.observe(O.value)));
+    function fe() {
+      if (!(P || !L.value)) {
+        if (D(), typeof ResizeObserver != "function") {
+          window.addEventListener("resize", D);
+          return;
+        }
+        P = new ResizeObserver(D), P.observe(L.value);
+      }
     }
-    function ne() {
-      m.finish(!0, !1), M == null || M.disconnect(), M = void 0;
+    function pe() {
+      b.finish(!0, !1), P == null || P.disconnect(), P = void 0, typeof window < "u" && window.removeEventListener("resize", D);
     }
-    const ke = p(() => n.vertical ? _e : C.value ? fe : de), Me = p(() => n.vertical ? qe : C.value ? de : fe);
-    let h;
-    const m = Te(
+    const De = h(() => m.value ? Xe : E.value ? ze : we), Oe = h(() => m.value ? Ye : E.value ? we : ze);
+    let g;
+    const b = la(
       (e) => {
-        if (!h) return;
-        const { separator: t, before: a, after: i, initial: s } = h, l = K(s, t, e);
-        n.lazy ? B.value = { separator: t, ratio: l.slice(0, t + 1).reduce((o, c) => o + c, 0) } : (h.requested = l, L(l)), k("panelResize", X(t, a, i, l));
+        if (!g) return;
+        const { separator: a, before: t, after: i, apply: n } = g, l = n(e);
+        s.lazy ? I.value = { separator: a, ratio: l.slice(0, a + 1).reduce((o, c) => o + c, 0) } : (g.requested = l, A(l)), k("panelResize", x(a, t, i, l));
       },
-      (e, t, a) => {
-        if (!h) return;
-        const { separator: i, before: s, after: l, initial: o } = h;
-        h = void 0, V.value = void 0, B.value = void 0, !t && n.lazy && L(K(o, i, e)), a && J(() => k("panelResizeEnd", { ...X(i, s, l), cancelled: t }));
+      (e, a, t, i) => {
+        if (!g) return;
+        const { separator: n, before: l, after: o, initial: c, apply: d, requested: p } = g;
+        g = void 0, N.value = void 0, I.value = void 0, !a && s.lazy && A(d(e)), a && i && !s.lazy && s.cancelBehavior === "restore" && p && U(r.value, p) && A(c), t && G(() => k("panelResizeEnd", { ...x(n, l, o), cancelled: a }));
       }
     );
-    function Se(e, t) {
-      if (m.active() || e.button !== 0 || (U(), !A(t))) return;
-      const a = r.value, { min: i, max: s } = R(t);
-      if (!m.start(e, {
-        vertical: n.vertical,
+    function Le(e, a) {
+      if (b.active() || e.button !== 0 || (D(), !T(a))) return;
+      const t = r.value, i = S.value[a], n = aa(s.snapThreshold, v.value), l = [];
+      if (n > 0) {
+        const d = Ce(
+          i.initial,
+          t[a],
+          t[a + 1],
+          v.value,
+          u.value[a].snapPoints
+        ), p = Ce(
+          i.initial,
+          t[a],
+          t[a + 1],
+          v.value,
+          void 0,
+          u.value[a + 1].snapPoints
+        );
+        l.push(
+          ...d.filter((R) => Math.abs(i.apply(R)[a] - t[a] - (R - i.initial)) <= f),
+          ...p.filter((R) => Math.abs(t[a + 1] - i.apply(R)[a + 1] - (R - i.initial)) <= f)
+        );
+      }
+      if (!b.start(e, {
+        vertical: m.value,
         available: v.value,
-        direction: !n.vertical && C.value ? -1 : 1,
-        initial: a[t],
-        constrain: (c) => Math.min(s, Math.max(i, c))
+        direction: !m.value && E.value ? -1 : 1,
+        initial: i.initial,
+        constrain: (d) => Me(d, i, l, n)
       })) return;
-      const [l, o] = f.value.slice(t, t + 2);
-      h = { separator: t, before: l, after: o, initial: a }, V.value = t, k("panelResizeStart", X(t, l, o));
+      const [o, c] = y.value.slice(a, a + 2);
+      g = { separator: a, before: o, after: c, initial: t, apply: i.apply }, N.value = a, k("panelResizeStart", x(a, o, c));
     }
-    function Ce(e, t) {
-      if (e.key === "Enter" && !m.active() && Z(t) !== void 0) {
-        e.preventDefault(), oe(t);
+    function Ie(e, a) {
+      if (e.key === "Enter" && !b.active() && ae(a) !== void 0) {
+        e.preventDefault(), ve(a);
         return;
       }
-      if (m.active() || !A(t) || v.value <= 0 || !["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", "Home", "End"].includes(e.key)) return;
+      if (b.active() || !T(a) || v.value <= 0 || !["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", "Home", "End"].includes(e.key)) return;
       e.preventDefault();
-      const { min: a, max: i } = R(t), s = (Number.isFinite(n.step) && n.step > 0 ? n.step : 2) * (e.shiftKey ? 5 : 1), l = e.key === "ArrowDown" || e.key === (C.value && !n.vertical ? "ArrowLeft" : "ArrowRight"), o = e.key === "Home" ? a : e.key === "End" ? i : Math.min(i, Math.max(a, r.value[t] + (l ? s : -s)));
-      L(K(r.value, t, o));
+      const t = S.value[a], i = (Number.isFinite(s.step) && s.step > 0 ? s.step : 2) * (e.shiftKey ? 5 : 1), n = e.key === "ArrowDown" || e.key === (E.value && !m.value ? "ArrowLeft" : "ArrowRight"), l = e.key === "Home" ? t.min : e.key === "End" ? t.max : Me(t.initial + (n ? i : -i), t);
+      A(t.apply(l));
     }
-    const Pe = p(() => JSON.stringify(u.value.map((e) => [e.id, e.min, e.max, e.resizable, e.collapsible])));
-    return H([Pe, v, C, () => n.disabled, () => n.lazy, () => n.vertical], () => m.finish(!0), { flush: "sync" }), H(r, (e, t) => {
-      h && !Q(e, t) && !Q(e, h.requested ?? h.initial) && m.finish(!0);
-    }, { flush: "post" }), H([P, () => n.vertical, () => n.dividerSize], U, { flush: "post" }), Oe(se), Be(se), Ie(ne), Le(ne), me({ togglePane: E, getPanelSizes: le, getPaneElement: we, resizePane: ge, resetSizes: ie }), (e, t) => {
-      var a, i;
-      return b(), w("div", x({
+    const Ke = h(() => JSON.stringify(u.value.map((e) => [e.id, e.min, e.max, e.resizable, e.collapsible, e.snapPoints])));
+    return O([Ke, v, E, m, () => s.disabled, () => s.lazy, () => s.resizeMode, () => s.snapThreshold], () => b.finish(!0), { flush: "sync" }), O(r, (e, a) => {
+      g && !U(e, a) && !U(e, g.requested ?? g.initial) && b.finish(!0);
+    }, { flush: "post" }), O([M, m, () => s.dividerSize], D, { flush: "post" }), He(fe), Ne(fe), Ve(pe), qe(pe), Pe({ togglePane: _, setPaneCollapsed: ue, getPanelSizes: ne, getPaneElement: $e, getLayout: () => Y.value, resizePane: Ae, resetSizes: ce }), (e, a) => {
+      var t, i;
+      return w(), C("div", te({
         ref_key: "host",
-        ref: O
-      }, ee(he), {
-        class: ["hys-ui-ent-split hys-ui-multi-split", { "hys-ui-vertical": S.vertical }],
+        ref: L
+      }, le(Be), {
+        class: ["hys-ui-ent-split hys-ui-multi-split", { "hys-ui-vertical": m.value }],
+        "data-layout": Y.value,
         style: {
-          "--hys-ui-splitter-size": S.dividerSize + "px",
-          "--hys-ui-divider-count": P.value,
-          "--hys-ui-split-preview": (((a = B.value) == null ? void 0 : a.ratio) ?? 0) / 100,
-          "--hys-ui-preview-bar": (((i = B.value) == null ? void 0 : i.separator) ?? 0) + 0.5
+          "--hys-ui-splitter-size": Q.dividerSize + "px",
+          "--hys-ui-divider-count": M.value,
+          "--hys-ui-split-preview": (((t = I.value) == null ? void 0 : t.ratio) ?? 0) / 100,
+          "--hys-ui-preview-bar": (((i = I.value) == null ? void 0 : i.separator) ?? 0) + 0.5
         }
       }), [
-        (b(!0), w(F, null, ve($.value, (s, l) => (b(), w(F, {
-          key: s.panel.id
+        (w(!0), C(F, null, ge($.value, (n, l) => (w(), C(F, {
+          key: n.panel.id
         }, [
-          T("div", {
-            id: I(l),
+          J("div", {
+            id: K(l),
             class: "hys-ui-splitter-pane",
-            "data-hys-pane": s.panel.id,
-            inert: s.collapsed,
-            style: Ke({ "--hys-ui-split-ratio": r.value[l] / 100 })
+            "data-hys-pane": n.panel.id,
+            inert: n.collapsed,
+            style: We({ "--hys-ui-split-ratio": r.value[l] / 100 })
           }, [
-            te(e.$slots, "panel", x({ ref_for: !0 }, s), () => [
-              He(Ne(s.panel.label), 1)
+            ie(e.$slots, "panel", te({ ref_for: !0 }, n), () => [
+              Ue(Fe(n.panel.label), 1)
             ])
-          ], 12, Qe),
-          l < P.value ? (b(), w("div", {
+          ], 12, na),
+          l < M.value ? (w(), C("div", {
             key: 0,
             class: "hys-ui-splitter-bar",
             "data-hys-separator": l
           }, [
-            T("div", {
+            J("div", {
               class: "hys-ui-ent-split-handle",
               role: "separator",
-              tabindex: A(l) ? 0 : -1,
-              "aria-label": `${S.ariaLabel} ${l + 1}`,
-              "aria-controls": `${I(l)} ${I(l + 1)}`,
-              "aria-disabled": !A(l) || void 0,
-              "aria-orientation": S.vertical ? "horizontal" : "vertical",
-              "aria-valuenow": r.value[l],
-              "aria-valuemin": Math.min(r.value[l], R(l).min),
-              "aria-valuemax": Math.max(r.value[l], R(l).max),
-              "aria-keyshortcuts": Z(l) === void 0 ? void 0 : "Enter",
-              "data-resizing": V.value === l || void 0,
-              onPointerdown: (o) => Se(o, l),
-              onLostpointercapture: t[0] || (t[0] = //@ts-ignore
-              (...o) => ee(m).cancel && ee(m).cancel(...o)),
-              onKeydown: (o) => Ce(o, l),
-              onDblclick: (o) => ze(l)
+              tabindex: T(l) ? 0 : -1,
+              "aria-label": `${Q.ariaLabel} ${l + 1}`,
+              "aria-controls": `${K(l)} ${K(l + 1)}`,
+              "aria-disabled": !T(l) || void 0,
+              "aria-orientation": m.value ? "horizontal" : "vertical",
+              "aria-valuenow": S.value[l].initial,
+              "aria-valuemin": Math.min(S.value[l].initial, S.value[l].min),
+              "aria-valuemax": Math.max(S.value[l].initial, S.value[l].max),
+              "aria-keyshortcuts": ae(l) === void 0 ? void 0 : "Enter",
+              "data-resizing": N.value === l || void 0,
+              onPointerdown: (o) => Le(o, l),
+              onLostpointercapture: a[0] || (a[0] = //@ts-ignore
+              (...o) => le(b).cancel && le(b).cancel(...o)),
+              onKeydown: (o) => Ie(o, l),
+              onDblclick: (o) => _e(l)
             }, [
-              T("span", Ze, [
-                te(e.$slots, "handle", {
+              J("span", ca, [
+                ie(e.$slots, "handle", {
                   separator: l,
-                  before: s.panel.id,
+                  before: n.panel.id,
                   after: u.value[l + 1].id,
-                  vertical: S.vertical,
-                  disabled: !A(l),
-                  resizing: V.value === l
+                  vertical: m.value,
+                  disabled: !T(l),
+                  resizing: N.value === l
                 }, () => [
-                  t[1] || (t[1] = T("span", { class: "hys-ui-splitter-dots" }, null, -1))
+                  a[1] || (a[1] = J("span", { class: "hys-ui-splitter-dots" }, null, -1))
                 ])
               ])
-            ], 40, Ye),
-            (b(!0), w(F, null, ve([l, l + 1], (o) => (b(), w(F, { key: o }, [
-              u.value[o].collapsible ? (b(), w("button", {
+            ], 40, ua),
+            (w(!0), C(F, null, ge([l, l + 1], (o) => (w(), C(F, { key: o }, [
+              u.value[o].collapsible ? (w(), C("button", {
                 key: 0,
-                class: je(["hys-ui-splitter-toggle", o === l ? "hys-ui-splitter-toggle-first" : "hys-ui-splitter-toggle-second"]),
+                class: Je(["hys-ui-splitter-toggle", o === l ? "hys-ui-splitter-toggle-first" : "hys-ui-splitter-toggle-second"]),
                 type: "button",
                 "aria-label": ($.value[o].collapsed ? "展开" : "折叠") + (u.value[o].label ?? u.value[o].id),
-                "aria-controls": I(o),
+                "aria-controls": K(o),
                 "aria-expanded": !$.value[o].collapsed,
                 "data-collapsed": $.value[o].collapsed || void 0,
-                disabled: Y(o, l) === void 0,
-                onClick: (c) => E(u.value[o].id, l)
+                disabled: ee(o, l) === void 0,
+                onClick: (c) => _(u.value[o].id, l)
               }, [
-                te(e.$slots, "panel-collapse", x({ ref_for: !0 }, $.value[o], {
+                ie(e.$slots, "panel-collapse", te({ ref_for: !0 }, $.value[o], {
                   side: o === l ? "start" : "end",
-                  toggle: () => E(u.value[o].id, l)
+                  toggle: () => _(u.value[o].id, l)
                 }), () => [
-                  (b(), Ve(We(o === l !== $.value[o].collapsed ? ke.value : Me.value), { size: 13 }))
+                  (w(), Ge(Qe(o === l !== $.value[o].collapsed ? De.value : Oe.value), { size: 13 }))
                 ])
-              ], 10, xe)) : ae("", !0)
+              ], 10, va)) : oe("", !0)
             ], 64))), 128))
-          ], 8, Xe)) : ae("", !0)
+          ], 8, ra)) : oe("", !0)
         ], 64))), 128)),
-        B.value ? (b(), w("div", et)) : ae("", !0)
-      ], 16);
+        I.value ? (w(), C("div", fa)) : oe("", !0)
+      ], 16, sa);
     };
   }
 });
 export {
-  nt as default
+  za as default
 };

package/dist/internal/PopupSurfacePanel.vue.js

@@ -1,7 +1,7 @@
 import o from "./PopupSurfacePanel2.vue.js";
 /* empty css                       */
-import p from "../_virtual/_plugin-vue_export-helper.js";
-const f = /* @__PURE__ */ p(o, [["__scopeId", "data-v-1bdc76f1"]]);
+import a from "../_virtual/_plugin-vue_export-helper.js";
+const f = /* @__PURE__ */ a(o, [["__scopeId", "data-v-0f25a470"]]);
 export {
   f as default
 };