hys-ui 0.6.0 → 0.8.0

package/dist/components/HysSplitPane/HysSplitPane.vue.js

@@ -1,17 +1,19 @@
-import { defineComponent as ze, useId as he, ref as b, computed as d, watch as B, onMounted as Pe, onActivated as ke, onDeactivated as we, onBeforeUnmount as Se, openBlock as h, createBlock as J, mergeProps as oe, createSlots as Ce, withCtx as Q, renderSlot as y, normalizeProps as g, guardReactiveProps as z, createElementBlock as j, unref as X, createElementVNode as A, resolveDynamicComponent as re, createCommentVNode as Y, nextTick as Z } from "vue";
-import { ChevronUp as Re, ChevronRight as ue, ChevronLeft as de, ChevronDown as xe } from "lucide-vue-next";
-import { useHysRootAttrs as Ve } from "../../config.js";
-import { useSplitPaneDrag as Ae } from "../../composables/useSplitPaneDrag.js";
-import { useSplitPaneStorage as $e } from "../../composables/useSplitPaneStorage.js";
-import Ee from "../../internal/MultiSplitPane.vue.js";
-const Le = ["inert"], Me = ["tabindex", "aria-label", "aria-controls", "aria-disabled", "aria-orientation", "aria-valuenow", "aria-valuemin", "aria-valuemax", "data-resizing", "aria-keyshortcuts"], Be = {
+import { defineComponent as Ve, useId as Ee, ref as f, computed as d, watch as V, onMounted as Be, onActivated as Me, onDeactivated as Ae, onBeforeUnmount as $e, openBlock as E, createBlock as le, mergeProps as be, createSlots as De, withCtx as ie, renderSlot as z, normalizeProps as k, guardReactiveProps as w, createElementBlock as O, unref as te, createElementVNode as N, resolveDynamicComponent as he, createCommentVNode as se, nextTick as G } from "vue";
+import { ChevronUp as Ne, ChevronRight as ye, ChevronLeft as Pe, ChevronDown as Fe } from "lucide-vue-next";
+import { useHysRootAttrs as He } from "../../config.js";
+import { paneRatio as Ie, paneEpsilon as Ke } from "../../composables/splitPaneSizes.js";
+import { useSplitPaneDrag as Te } from "../../composables/useSplitPaneDrag.js";
+import { useSplitPaneStorage as qe } from "../../composables/useSplitPaneStorage.js";
+import Ue from "../../internal/MultiSplitPane.vue.js";
+import { splitIsVertical as We, splitSnapThreshold as je, splitSnapCandidates as Oe, constrainSplitSize as Ge } from "./splitPaneResize.js";
+const Je = ["data-layout"], Qe = ["inert"], Xe = ["tabindex", "aria-label", "aria-controls", "aria-disabled", "aria-orientation", "aria-valuenow", "aria-valuemin", "aria-valuemax", "data-resizing", "aria-keyshortcuts"], Ye = {
   class: "hys-ui-splitter-grip",
   "aria-hidden": "true"
-}, De = ["aria-label", "aria-expanded", "data-collapsed", "disabled"], Ne = ["aria-label", "aria-expanded", "data-collapsed", "disabled"], Fe = ["inert"], He = {
+}, Ze = ["aria-label", "aria-expanded", "data-collapsed", "disabled"], _e = ["aria-label", "aria-expanded", "data-collapsed", "disabled"], ea = ["inert"], aa = {
   key: 0,
   class: "hys-ui-splitter-preview",
   "aria-hidden": "true"
-}, Te = /* @__PURE__ */ ze({
+}, da = /* @__PURE__ */ Ve({
   __name: "HysSplitPane",
   props: {
     modelValue: {},
@@ -20,6 +22,10 @@ const Le = ["inert"], Me = ["tabindex", "aria-label", "aria-controls", "aria-dis
     max: { default: 85 },
     vertical: { type: Boolean },
     layout: {},
+    responsiveBreakpoint: {},
+    resizeMode: { default: "adjacent" },
+    snapThreshold: { default: 12 },
+    cancelBehavior: { default: "keep" },
     disabled: { type: Boolean },
     step: { default: 2 },
     lazy: { type: Boolean },
@@ -34,295 +40,370 @@ const Le = ["inert"], Me = ["tabindex", "aria-label", "aria-controls", "aria-dis
     firstLabel: { default: "前面板" },
     secondLabel: { default: "后面板" }
   },
-  emits: ["update:modelValue", "resizeStart", "resize", "resizeEnd", "collapse", "update:sizes", "panelResizeStart", "panelResize", "panelResizeEnd", "panelCollapse"],
-  setup(t, { expose: ce, emit: ve }) {
-    const a = t, u = ve, fe = Ve(), _ = he(), O = _ + "-first", T = _ + "-second", $ = b(), P = b(), k = b(), E = b(0), w = b(!1), L = b(), D = b(), N = b(!1), F = d(() => Number.isFinite(a.dividerSize) ? Math.max(1, Math.min(48, a.dividerSize)) : 6);
-    $e(
-      () => a.panels === void 0 && a.modelValue === void 0 && a.storageKey ? a.storageKey + ":ratio" : void 0,
-      D,
+  emits: ["update:modelValue", "resizeStart", "resize", "resizeEnd", "collapse", "update:sizes", "panelResizeStart", "panelResize", "panelResizeEnd", "panelCollapse", "layoutChange"],
+  setup(s, { expose: ge, emit: ze }) {
+    const l = s, u = ze, ke = He(), ne = Ee(), J = ne + "-first", Q = ne + "-second", F = f(), B = f(), oe = f(), re = f(), y = f(), p = f(0), X = f(0), M = f(!1), H = f(), T = f(), q = f(!1), U = d(() => Number.isFinite(l.dividerSize) ? Math.max(1, Math.min(48, l.dividerSize)) : 6);
+    qe(
+      () => l.panels === void 0 && l.modelValue === void 0 && l.storageKey ? l.storageKey + ":ratio" : void 0,
+      T,
       (e) => typeof e == "number" && Number.isFinite(e) ? e : void 0
     );
-    const r = d(() => a.layout ? a.layout === "vertical" : a.vertical), S = d(() => {
-      var e, l;
-      return !a.disabled && ((e = a.firstPanel) == null ? void 0 : e.resizable) !== !1 && ((l = a.secondPanel) == null ? void 0 : l.resizable) !== !1;
-    }), H = (e, l) => Number.isFinite(e) ? Math.min(100, Math.max(0, e)) : l;
-    function K(e, l) {
-      if (e === void 0) return l;
+    const ue = d(() => l.layout ? l.layout === "vertical" : !!l.vertical), v = d(() => We(ue.value, X.value, l.responsiveBreakpoint)), Y = d(() => v.value ? "vertical" : "horizontal");
+    V(Y, (e) => {
+      l.panels === void 0 && u("layoutChange", e);
+    });
+    const C = d(() => {
+      var e, a;
+      return !l.disabled && ((e = l.firstPanel) == null ? void 0 : e.resizable) !== !1 && ((a = l.secondPanel) == null ? void 0 : a.resizable) !== !1;
+    }), W = (e, a) => Number.isFinite(e) ? Math.min(100, Math.max(0, e)) : a;
+    function j(e, a) {
+      if (e === void 0) return a;
       const i = typeof e == "number" ? e : Number.parseFloat(e);
-      return typeof e == "string" && e.endsWith("%") ? H(i, l) : E.value > 0 ? H(i / E.value * 100, l) : l;
+      return typeof e == "string" && e.endsWith("%") ? W(i, a) : p.value > 0 ? W(i / p.value * 100, a) : a;
     }
-    const C = d(() => {
-      var e, l;
+    const S = d(() => {
+      var e, a;
       return Math.max(
-        K((e = a.firstPanel) == null ? void 0 : e.min, H(a.min, 0)),
-        100 - K((l = a.secondPanel) == null ? void 0 : l.max, 100)
+        j((e = l.firstPanel) == null ? void 0 : e.min, W(l.min, 0)),
+        100 - j((a = l.secondPanel) == null ? void 0 : a.max, 100)
       );
     }), I = d(() => {
-      var e, l;
-      return Math.max(C.value, Math.min(
-        K((e = a.firstPanel) == null ? void 0 : e.max, H(a.max, 100)),
-        100 - K((l = a.secondPanel) == null ? void 0 : l.min, 0)
+      var e, a;
+      return Math.max(S.value, Math.min(
+        j((e = l.firstPanel) == null ? void 0 : e.max, W(l.max, 100)),
+        100 - j((a = l.secondPanel) == null ? void 0 : a.min, 0)
       ));
     });
-    function R(e) {
-      return Math.min(I.value, Math.max(C.value, Number.isFinite(e) ? e : C.value));
+    function A(e) {
+      return Math.min(I.value, Math.max(S.value, Number.isFinite(e) ? e : S.value));
     }
     const o = d(() => {
-      var l, i;
-      const e = a.modelValue ?? D.value ?? a.defaultValue;
-      return e === 0 && ((l = a.firstPanel) != null && l.collapsible) || e === 100 && ((i = a.secondPanel) != null && i.collapsible) ? e : R(e);
-    }), x = d(
+      var a, i;
+      const e = l.modelValue ?? T.value ?? l.defaultValue;
+      return e === 0 && ((a = l.firstPanel) != null && a.collapsible) || e === 100 && ((i = l.secondPanel) != null && i.collapsible) ? e : A(e);
+    }), R = d(
       () => o.value === 0 ? "first" : o.value === 100 ? "second" : void 0
     );
-    let ee = o.value > 0 && o.value < 100 ? o.value : R(a.defaultValue);
-    B(o, (e) => {
-      e > 0 && e < 100 && (ee = e);
-    }, { flush: "sync" }), B(x, (e, l) => {
-      a.panels === void 0 && (l && u("collapse", l, !1), e && u("collapse", e, !0));
+    let de = o.value > 0 && o.value < 100 ? o.value : A(l.defaultValue);
+    V(o, (e) => {
+      e > 0 && e < 100 && (de = e);
+    }, { flush: "sync" }), V(R, (e, a) => {
+      l.panels === void 0 && (a && u("collapse", a, !1), e && u("collapse", e, !0));
     });
-    function U(e) {
-      e !== o.value && (a.modelValue === void 0 && (D.value = e), u("update:modelValue", e));
+    function $(e) {
+      e !== o.value && (l.modelValue === void 0 && (T.value = e), u("update:modelValue", e));
+    }
+    async function Z(e, a) {
+      if (l.panels !== void 0) return !1;
+      const i = e === "first" ? l.firstPanel : l.secondPanel;
+      if (l.disabled || !(i != null && i.collapsible) || R.value === e === a) return !1;
+      const t = a ? e === "first" ? 0 : 100 : A(de);
+      return c.finish(!0), $(t), await G(), R.value === e === a;
+    }
+    function x(e) {
+      return Z(e, R.value !== e);
+    }
+    function _(e) {
+      return e === "first" || e === "second";
+    }
+    async function we(e, a, i) {
+      var g;
+      if (l.panels !== void 0) return ((g = y.value) == null ? void 0 : g.resizePane(e, a, i)) ?? !1;
+      if (!_(e) || i !== void 0 && i !== 0) return !1;
+      const t = Ie(a, p.value);
+      if (t === void 0 || l.disabled) return !1;
+      const r = e === "first" ? l.firstPanel : l.secondPanel;
+      if (t === 0 && (r != null && r.collapsible)) return Z(e, !0);
+      if (!C.value) return !1;
+      const m = o.value;
+      return c.finish(!0), $(A(e === "first" ? t : 100 - t)), await G(), Math.abs(m - o.value) > Ke;
     }
-    async function V(e) {
-      if (a.panels !== void 0) return !1;
-      const l = e === "first" ? a.firstPanel : a.secondPanel;
-      if (a.disabled || !(l != null && l.collapsible)) return !1;
-      const i = x.value, n = i === e ? R(ee) : e === "first" ? 0 : 100;
-      return c.finish(!0), U(n), await Z(), i !== x.value;
+    function ve(e, a, i) {
+      var t;
+      return l.panels !== void 0 ? ((t = y.value) == null ? void 0 : t.setPaneCollapsed(e, a, i)) ?? Promise.resolve(!1) : _(e) && (i === void 0 || i === 0) ? Z(e, a) : Promise.resolve(!1);
     }
-    const v = d(() => ({
-      collapsed: x.value === "first",
-      toggle: () => V("first")
-    })), f = d(() => ({
-      collapsed: x.value === "second",
-      toggle: () => V("second")
-    })), le = d(() => r.value ? Re : w.value ? ue : de), ae = d(() => r.value ? xe : w.value ? de : ue), pe = d(() => ({
+    const b = d(() => ({
+      collapsed: R.value === "first",
+      toggle: () => x("first")
+    })), h = d(() => ({
+      collapsed: R.value === "second",
+      toggle: () => x("second")
+    })), ce = d(() => v.value ? Ne : M.value ? ye : Pe), fe = d(() => v.value ? Fe : M.value ? Pe : ye), Ce = d(() => ({
       separator: 0,
       before: "first",
       after: "second",
-      vertical: r.value,
-      disabled: !S.value,
-      resizing: N.value
+      vertical: v.value,
+      disabled: !C.value,
+      resizing: q.value
     }));
-    async function ie() {
-      var i, n, m;
-      if (a.disabled) return !1;
-      if (a.panels !== void 0) return ((i = k.value) == null ? void 0 : i.resetSizes()) ?? !1;
+    async function pe() {
+      var i, t, r;
+      if (l.disabled) return !1;
+      if (l.panels !== void 0) return ((i = y.value) == null ? void 0 : i.resetSizes()) ?? !1;
       c.finish(!0);
-      const e = a.defaultValue, l = e === 0 && ((n = a.firstPanel) != null && n.collapsible) || e === 100 && ((m = a.secondPanel) != null && m.collapsible) ? e : R(e);
-      return a.modelValue === void 0 && (D.value = void 0), a.modelValue !== l && u("update:modelValue", l), await Z(), o.value === l;
-    }
-    function te() {
-      var l, i, n;
-      const e = x.value;
-      if (e && ((l = e === "first" ? a.firstPanel : a.secondPanel) != null && l.collapsible))
-        return V(e);
-      if ((i = a.firstPanel) != null && i.collapsible) return V("first");
-      if ((n = a.secondPanel) != null && n.collapsible) return V("second");
+      const e = l.defaultValue, a = e === 0 && ((t = l.firstPanel) != null && t.collapsible) || e === 100 && ((r = l.secondPanel) != null && r.collapsible) ? e : A(e);
+      return l.modelValue === void 0 && (T.value = void 0), l.modelValue !== a && u("update:modelValue", a), await G(), o.value === a;
     }
     function me() {
-      a.doubleClickAction === "reset" ? ie() : a.doubleClickAction === "collapse" && te();
+      var a, i, t;
+      const e = R.value;
+      if (e && ((a = e === "first" ? l.firstPanel : l.secondPanel) != null && a.collapsible))
+        return x(e);
+      if ((i = l.firstPanel) != null && i.collapsible) return x("first");
+      if ((t = l.secondPanel) != null && t.collapsible) return x("second");
+    }
+    function Se() {
+      l.doubleClickAction === "reset" ? pe() : l.doubleClickAction === "collapse" && me();
     }
-    let p;
-    function W() {
-      if (!$.value || !P.value) return;
-      const e = $.value, l = e.getBoundingClientRect(), i = r.value ? e.clientHeight || l.height : e.clientWidth || l.width, n = r.value ? P.value.offsetHeight : P.value.offsetWidth;
-      E.value = Math.max(0, i - (n || F.value)), w.value = getComputedStyle(e).direction === "rtl";
+    let P;
+    function D() {
+      if (!F.value || !B.value) return;
+      const e = F.value, a = e.getBoundingClientRect();
+      X.value = e.clientWidth || a.width;
+      const i = v.value ? e.clientHeight || a.height : X.value, t = v.value ? B.value.offsetHeight : B.value.offsetWidth;
+      p.value = Math.max(0, i - (t || U.value)), M.value = getComputedStyle(e).direction === "rtl";
     }
-    function q() {
-      p || !$.value || !P.value || (W(), typeof ResizeObserver == "function" && (p = new ResizeObserver(W), p.observe($.value), p.observe(P.value)));
+    function ee() {
+      if (!(P || !F.value || !B.value)) {
+        if (D(), typeof ResizeObserver != "function") {
+          window.addEventListener("resize", D);
+          return;
+        }
+        P = new ResizeObserver(D), P.observe(F.value), P.observe(B.value);
+      }
     }
-    const c = Ae(
+    let L;
+    const c = Te(
       (e) => {
-        a.lazy ? L.value = e : U(e), u("resize", e);
+        l.lazy ? H.value = e : (L && (L.requested = e), $(e)), u("resize", e);
       },
-      (e, l, i) => {
-        N.value = !1, !l && a.lazy && U(e), L.value = void 0, i && Z(() => u("resizeEnd", o.value, { cancelled: l }));
+      (e, a, i, t) => {
+        const r = L;
+        L = void 0, q.value = !1, !a && l.lazy && $(e), a && t && !l.lazy && l.cancelBehavior === "restore" && r && o.value === r.requested && $(r.initial), H.value = void 0, i && G(() => u("resizeEnd", o.value, { cancelled: a }));
       }
     );
-    function be(e) {
-      !S.value || c.active() || e.button !== 0 || (W(), c.start(e, {
-        vertical: r.value,
-        direction: !r.value && w.value ? -1 : 1,
-        available: E.value,
-        initial: o.value,
-        constrain: (l) => R(Math.round(l))
-      }) && (N.value = !0, a.lazy && (L.value = o.value), u("resizeStart")));
+    function Re(e) {
+      var m, g;
+      if (!C.value || c.active() || e.button !== 0) return;
+      D();
+      const a = o.value, i = { min: S.value, max: I.value }, t = je(l.snapThreshold, p.value), r = t > 0 ? Oe(a, a, 100 - a, p.value, (m = l.firstPanel) == null ? void 0 : m.snapPoints, (g = l.secondPanel) == null ? void 0 : g.snapPoints) : [];
+      c.start(e, {
+        vertical: v.value,
+        direction: !v.value && M.value ? -1 : 1,
+        available: p.value,
+        initial: a,
+        constrain: (K) => Ge(r.length ? K : Math.round(K), i, r, t)
+      }) && (L = { initial: a, requested: a }, q.value = !0, l.lazy && (H.value = o.value), u("resizeStart"));
     }
-    function ye(e) {
-      var m, M;
-      if (e.key === "Enter" && !a.disabled && !c.active() && ((m = a.firstPanel) != null && m.collapsible || (M = a.secondPanel) != null && M.collapsible)) {
-        e.preventDefault(), te();
+    function xe(e) {
+      var r, m;
+      if (e.key === "Enter" && !l.disabled && !c.active() && ((r = l.firstPanel) != null && r.collapsible || (m = l.secondPanel) != null && m.collapsible)) {
+        e.preventDefault(), me();
         return;
       }
-      if (!S.value || c.active() || !["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", "Home", "End"].includes(e.key)) return;
+      if (!C.value || c.active() || !["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", "Home", "End"].includes(e.key)) return;
       e.preventDefault();
-      const l = (Number.isFinite(a.step) && a.step > 0 ? a.step : 2) * (e.shiftKey ? 5 : 1), i = e.key === "ArrowDown" || e.key === (w.value && !r.value ? "ArrowLeft" : "ArrowRight"), n = e.key === "Home" ? C.value : e.key === "End" ? I.value : R(o.value + (i ? l : -l));
-      U(n);
+      const a = (Number.isFinite(l.step) && l.step > 0 ? l.step : 2) * (e.shiftKey ? 5 : 1), i = e.key === "ArrowDown" || e.key === (M.value && !v.value ? "ArrowLeft" : "ArrowRight"), t = e.key === "Home" ? S.value : e.key === "End" ? I.value : A(o.value + (i ? a : -a));
+      $(t);
     }
-    function G() {
-      c.finish(!0, !1), p == null || p.disconnect(), p = void 0;
+    function ae() {
+      c.finish(!0, !1), P == null || P.disconnect(), P = void 0, typeof window < "u" && window.removeEventListener("resize", D);
     }
-    return B(
-      [S, r, C, I, E, w, () => a.lazy],
+    return V(
+      [
+        C,
+        v,
+        S,
+        I,
+        p,
+        M,
+        () => l.lazy,
+        () => l.snapThreshold,
+        () => {
+          var e;
+          return (e = l.firstPanel) == null ? void 0 : e.snapPoints;
+        },
+        () => {
+          var e;
+          return (e = l.secondPanel) == null ? void 0 : e.snapPoints;
+        }
+      ],
       () => c.finish(!0),
       { flush: "sync" }
-    ), B([r, F], W, { flush: "post" }), B(() => a.panels !== void 0, (e) => {
-      e ? G() : q();
-    }, { flush: "post" }), Pe(q), ke(q), we(G), Se(G), ce({
-      togglePanel: V,
-      togglePane: (e, l) => {
+    ), V(o, (e) => {
+      L && e !== L.requested && c.finish(!0);
+    }, { flush: "sync" }), V([v, U], D, { flush: "post" }), V(() => l.panels !== void 0, (e) => {
+      e ? ae() : ee();
+    }, { flush: "post" }), Be(ee), Me(ee), Ae(ae), $e(ae), ge({
+      togglePanel: x,
+      togglePane: (e, a) => {
         var i;
-        return ((i = k.value) == null ? void 0 : i.togglePane(e, l)) ?? Promise.resolve(!1);
+        return l.panels !== void 0 ? ((i = y.value) == null ? void 0 : i.togglePane(e, a)) ?? Promise.resolve(!1) : _(e) && (a === void 0 || a === 0) ? x(e) : Promise.resolve(!1);
       },
+      collapsePane: (e, a) => ve(e, !0, a),
+      expandPane: (e, a) => ve(e, !1, a),
       getPanelSizes: () => {
         var e;
-        return ((e = k.value) == null ? void 0 : e.getPanelSizes()) ?? {};
+        return l.panels !== void 0 ? ((e = y.value) == null ? void 0 : e.getPanelSizes()) ?? {} : {
+          first: p.value * o.value / 100,
+          second: p.value * (100 - o.value) / 100
+        };
       },
       getPaneElement: (e) => {
-        var l;
-        return (l = k.value) == null ? void 0 : l.getPaneElement(e);
+        var a;
+        return l.panels !== void 0 ? (a = y.value) == null ? void 0 : a.getPaneElement(e) : e === "first" ? oe.value : e === "second" ? re.value : void 0;
       },
-      resizePane: (e, l, i) => {
-        var n;
-        return ((n = k.value) == null ? void 0 : n.resizePane(e, l, i)) ?? Promise.resolve(!1);
+      getLayout: () => {
+        var e;
+        return ((e = y.value) == null ? void 0 : e.getLayout()) ?? Y.value;
       },
-      resetSizes: ie
-    }), (e, l) => {
-      var i, n, m, M, se, ne;
-      return t.panels !== void 0 ? (h(), J(Ee, oe({
+      resizePane: we,
+      resetSizes: pe
+    }), (e, a) => {
+      var i, t, r, m, g, K;
+      return s.panels !== void 0 ? (E(), le(Ue, be({
         key: 0,
         ref_key: "multi",
-        ref: k,
-        panels: t.panels,
-        sizes: t.sizes,
-        vertical: r.value,
-        disabled: t.disabled,
-        lazy: t.lazy,
-        step: t.step,
-        "storage-key": t.storageKey,
-        "divider-size": F.value,
-        "double-click-action": t.doubleClickAction
-      }, { ariaLabel: t.ariaLabel }, {
-        "onUpdate:sizes": l[0] || (l[0] = (s) => u("update:sizes", s)),
-        onPanelResizeStart: l[1] || (l[1] = (s) => u("panelResizeStart", s)),
-        onPanelResize: l[2] || (l[2] = (s) => u("panelResize", s)),
-        onPanelResizeEnd: l[3] || (l[3] = (s) => u("panelResizeEnd", s)),
-        onPanelCollapse: l[4] || (l[4] = (s, ge) => u("panelCollapse", s, ge))
-      }), Ce({ _: 2 }, [
+        ref: y,
+        panels: s.panels,
+        sizes: s.sizes,
+        vertical: ue.value,
+        "responsive-breakpoint": s.responsiveBreakpoint,
+        "resize-mode": s.resizeMode,
+        "snap-threshold": s.snapThreshold,
+        "cancel-behavior": s.cancelBehavior,
+        disabled: s.disabled,
+        lazy: s.lazy,
+        step: s.step,
+        "storage-key": s.storageKey,
+        "divider-size": U.value,
+        "double-click-action": s.doubleClickAction
+      }, { ariaLabel: s.ariaLabel }, {
+        "onUpdate:sizes": a[0] || (a[0] = (n) => u("update:sizes", n)),
+        onPanelResizeStart: a[1] || (a[1] = (n) => u("panelResizeStart", n)),
+        onPanelResize: a[2] || (a[2] = (n) => u("panelResize", n)),
+        onPanelResizeEnd: a[3] || (a[3] = (n) => u("panelResizeEnd", n)),
+        onPanelCollapse: a[4] || (a[4] = (n, Le) => u("panelCollapse", n, Le)),
+        onLayoutChange: a[5] || (a[5] = (n) => u("layoutChange", n))
+      }), De({ _: 2 }, [
         e.$slots.panel ? {
           name: "panel",
-          fn: Q((s) => [
-            y(e.$slots, "panel", g(z(s)))
+          fn: ie((n) => [
+            z(e.$slots, "panel", k(w(n)))
           ]),
           key: "0"
         } : void 0,
         e.$slots["panel-collapse"] ? {
           name: "panel-collapse",
-          fn: Q((s) => [
-            y(e.$slots, "panel-collapse", g(z(s)))
+          fn: ie((n) => [
+            z(e.$slots, "panel-collapse", k(w(n)))
           ]),
           key: "1"
         } : void 0,
         e.$slots.handle ? {
           name: "handle",
-          fn: Q((s) => [
-            y(e.$slots, "handle", g(z(s)))
+          fn: ie((n) => [
+            z(e.$slots, "handle", k(w(n)))
           ]),
           key: "2"
         } : void 0
-      ]), 1040, ["panels", "sizes", "vertical", "disabled", "lazy", "step", "storage-key", "divider-size", "double-click-action"])) : (h(), j("div", oe({ key: 1 }, X(fe), {
+      ]), 1040, ["panels", "sizes", "vertical", "responsive-breakpoint", "resize-mode", "snap-threshold", "cancel-behavior", "disabled", "lazy", "step", "storage-key", "divider-size", "double-click-action"])) : (E(), O("div", be({ key: 1 }, te(ke), {
         ref_key: "host",
-        ref: $,
-        class: ["hys-ui-ent-split", { "hys-ui-vertical": r.value }],
+        ref: F,
+        class: ["hys-ui-ent-split", { "hys-ui-vertical": v.value }],
+        "data-layout": Y.value,
         style: {
-          "--hys-ui-splitter-size": F.value + "px",
+          "--hys-ui-splitter-size": U.value + "px",
           "--hys-ui-split-ratio": o.value / 100,
-          "--hys-ui-split-preview": (L.value ?? 0) / 100
+          "--hys-ui-split-preview": (H.value ?? 0) / 100
         }
       }), [
-        A("div", {
-          id: O,
+        N("div", {
+          id: J,
+          ref_key: "firstPane",
+          ref: oe,
           class: "hys-ui-ent-split-first",
-          inert: v.value.collapsed
+          inert: b.value.collapsed
         }, [
-          y(e.$slots, "first", g(z(v.value)))
-        ], 8, Le),
-        A("div", {
+          z(e.$slots, "first", k(w(b.value)))
+        ], 8, Qe),
+        N("div", {
           ref_key: "bar",
-          ref: P,
+          ref: B,
           class: "hys-ui-splitter-bar"
         }, [
-          A("div", {
+          N("div", {
             class: "hys-ui-ent-split-handle",
             role: "separator",
-            tabindex: S.value ? 0 : -1,
-            "aria-label": t.ariaLabel,
-            "aria-controls": `${O} ${T}`,
-            "aria-disabled": !S.value || void 0,
-            "aria-orientation": r.value ? "horizontal" : "vertical",
+            tabindex: C.value ? 0 : -1,
+            "aria-label": s.ariaLabel,
+            "aria-controls": `${J} ${Q}`,
+            "aria-disabled": !C.value || void 0,
+            "aria-orientation": v.value ? "horizontal" : "vertical",
             "aria-valuenow": o.value,
-            "aria-valuemin": (i = t.firstPanel) != null && i.collapsible ? 0 : C.value,
-            "aria-valuemax": (n = t.secondPanel) != null && n.collapsible ? 100 : I.value,
-            "data-resizing": N.value || void 0,
-            "aria-keyshortcuts": (m = t.firstPanel) != null && m.collapsible || (M = t.secondPanel) != null && M.collapsible ? "Enter" : void 0,
-            onPointerdown: be,
-            onLostpointercapture: l[5] || (l[5] = //@ts-ignore
-            (...s) => X(c).cancel && X(c).cancel(...s)),
-            onKeydown: ye,
-            onDblclick: me
+            "aria-valuemin": (i = s.firstPanel) != null && i.collapsible ? 0 : S.value,
+            "aria-valuemax": (t = s.secondPanel) != null && t.collapsible ? 100 : I.value,
+            "data-resizing": q.value || void 0,
+            "aria-keyshortcuts": (r = s.firstPanel) != null && r.collapsible || (m = s.secondPanel) != null && m.collapsible ? "Enter" : void 0,
+            onPointerdown: Re,
+            onLostpointercapture: a[6] || (a[6] = //@ts-ignore
+            (...n) => te(c).cancel && te(c).cancel(...n)),
+            onKeydown: xe,
+            onDblclick: Se
           }, [
-            A("span", Be, [
-              y(e.$slots, "handle", g(z(pe.value)), () => [
-                l[8] || (l[8] = A("span", { class: "hys-ui-splitter-dots" }, null, -1))
+            N("span", Ye, [
+              z(e.$slots, "handle", k(w(Ce.value)), () => [
+                a[9] || (a[9] = N("span", { class: "hys-ui-splitter-dots" }, null, -1))
               ])
             ])
-          ], 40, Me),
-          (se = t.firstPanel) != null && se.collapsible ? (h(), j("button", {
+          ], 40, Xe),
+          (g = s.firstPanel) != null && g.collapsible ? (E(), O("button", {
             key: 0,
             class: "hys-ui-splitter-toggle hys-ui-splitter-toggle-first",
             type: "button",
-            "aria-label": (v.value.collapsed ? "展开" : "折叠") + t.firstLabel,
-            "aria-controls": O,
-            "aria-expanded": !v.value.collapsed,
-            "data-collapsed": v.value.collapsed || void 0,
-            disabled: t.disabled,
-            onClick: l[6] || (l[6] = //@ts-ignore
-            (...s) => v.value.toggle && v.value.toggle(...s))
+            "aria-label": (b.value.collapsed ? "展开" : "折叠") + s.firstLabel,
+            "aria-controls": J,
+            "aria-expanded": !b.value.collapsed,
+            "data-collapsed": b.value.collapsed || void 0,
+            disabled: s.disabled,
+            onClick: a[7] || (a[7] = //@ts-ignore
+            (...n) => b.value.toggle && b.value.toggle(...n))
           }, [
-            y(e.$slots, "first-collapse", g(z(v.value)), () => [
-              (h(), J(re(v.value.collapsed ? ae.value : le.value), { size: 13 }))
+            z(e.$slots, "first-collapse", k(w(b.value)), () => [
+              (E(), le(he(b.value.collapsed ? fe.value : ce.value), { size: 13 }))
             ])
-          ], 8, De)) : Y("", !0),
-          (ne = t.secondPanel) != null && ne.collapsible ? (h(), j("button", {
+          ], 8, Ze)) : se("", !0),
+          (K = s.secondPanel) != null && K.collapsible ? (E(), O("button", {
             key: 1,
             class: "hys-ui-splitter-toggle hys-ui-splitter-toggle-second",
             type: "button",
-            "aria-label": (f.value.collapsed ? "展开" : "折叠") + t.secondLabel,
-            "aria-controls": T,
-            "aria-expanded": !f.value.collapsed,
-            "data-collapsed": f.value.collapsed || void 0,
-            disabled: t.disabled,
-            onClick: l[7] || (l[7] = //@ts-ignore
-            (...s) => f.value.toggle && f.value.toggle(...s))
+            "aria-label": (h.value.collapsed ? "展开" : "折叠") + s.secondLabel,
+            "aria-controls": Q,
+            "aria-expanded": !h.value.collapsed,
+            "data-collapsed": h.value.collapsed || void 0,
+            disabled: s.disabled,
+            onClick: a[8] || (a[8] = //@ts-ignore
+            (...n) => h.value.toggle && h.value.toggle(...n))
           }, [
-            y(e.$slots, "second-collapse", g(z(f.value)), () => [
-              (h(), J(re(f.value.collapsed ? le.value : ae.value), { size: 13 }))
+            z(e.$slots, "second-collapse", k(w(h.value)), () => [
+              (E(), le(he(h.value.collapsed ? ce.value : fe.value), { size: 13 }))
             ])
-          ], 8, Ne)) : Y("", !0)
+          ], 8, _e)) : se("", !0)
         ], 512),
-        A("div", {
-          id: T,
+        N("div", {
+          id: Q,
+          ref_key: "secondPane",
+          ref: re,
           class: "hys-ui-ent-split-second",
-          inert: f.value.collapsed
+          inert: h.value.collapsed
         }, [
-          y(e.$slots, "second", g(z(f.value)))
-        ], 8, Fe),
-        L.value !== void 0 ? (h(), j("div", He)) : Y("", !0)
-      ], 16));
+          z(e.$slots, "second", k(w(h.value)))
+        ], 8, ea),
+        H.value !== void 0 ? (E(), O("div", aa)) : se("", !0)
+      ], 16, Je));
     };
   }
 });
 export {
-  Te as default
+  da as default
 };