hys-ui 0.3.0 → 0.5.0

package/dist/internal/MultiSplitPane.vue.js

@@ -0,0 +1,305 @@
+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 = {
+  class: "hys-ui-splitter-grip",
+  "aria-hidden": "true"
+}, xe = ["aria-label", "aria-controls", "aria-expanded", "data-collapsed", "disabled", "onClick"], et = {
+  key: 0,
+  class: "hys-ui-splitter-preview",
+  "aria-hidden": "true"
+}, nt = /* @__PURE__ */ $e({
+  __name: "MultiSplitPane",
+  props: {
+    panels: {},
+    sizes: {},
+    vertical: { type: Boolean },
+    disabled: { type: Boolean },
+    lazy: { type: Boolean },
+    step: {},
+    ariaLabel: {},
+    storageKey: {},
+    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
+    );
+    const B = D(), u = p(() => {
+      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] })),
+      (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);
+      },
+      { 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);
+    });
+    function Q(e, t) {
+      return e.length === t.length && e.every((a, i) => Math.abs(a - t[i]) <= d);
+    }
+    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 X(e, t, a, i = r.value) {
+      return { separator: e, before: t, after: a, sizes: le(i) };
+    }
+    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 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 };
+    }
+    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 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;
+      return Math.min(o, Math.max(l, c));
+    }
+    async function E(e, 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;
+      }
+      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]));
+    }
+    async function ge(e, t, a) {
+      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 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];
+      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 });
+      }
+      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;
+    }
+    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 oe(e) {
+      const t = Z(e);
+      if (t !== void 0) return E(f.value[t], e);
+    }
+    function ze(e) {
+      n.doubleClickAction === "reset" ? ie() : n.doubleClickAction === "collapse" && oe(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;
+    }
+    const $ = p(() => u.value.map((e, t) => ({
+      panel: e,
+      index: t,
+      size: _(r.value[t]),
+      collapsed: r.value[t] <= d,
+      toggle: () => E(e.id)
+    })));
+    let M;
+    function U() {
+      const e = O.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";
+    }
+    function se() {
+      M || !O.value || (U(), typeof ResizeObserver == "function" && (M = new ResizeObserver(U), M.observe(O.value)));
+    }
+    function ne() {
+      m.finish(!0, !1), M == null || M.disconnect(), M = void 0;
+    }
+    const ke = p(() => n.vertical ? _e : C.value ? fe : de), Me = p(() => n.vertical ? qe : C.value ? de : fe);
+    let h;
+    const m = Te(
+      (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));
+      },
+      (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 }));
+      }
+    );
+    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,
+        available: v.value,
+        direction: !n.vertical && C.value ? -1 : 1,
+        initial: a[t],
+        constrain: (c) => Math.min(s, Math.max(i, c))
+      })) 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));
+    }
+    function Ce(e, t) {
+      if (e.key === "Enter" && !m.active() && Z(t) !== void 0) {
+        e.preventDefault(), oe(t);
+        return;
+      }
+      if (m.active() || !A(t) || 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 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({
+        ref_key: "host",
+        ref: O
+      }, ee(he), {
+        class: ["hys-ui-ent-split hys-ui-multi-split", { "hys-ui-vertical": S.vertical }],
+        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
+        }
+      }), [
+        (b(!0), w(F, null, ve($.value, (s, l) => (b(), w(F, {
+          key: s.panel.id
+        }, [
+          T("div", {
+            id: I(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 })
+          }, [
+            te(e.$slots, "panel", x({ ref_for: !0 }, s), () => [
+              He(Ne(s.panel.label), 1)
+            ])
+          ], 12, Qe),
+          l < P.value ? (b(), w("div", {
+            key: 0,
+            class: "hys-ui-splitter-bar",
+            "data-hys-separator": l
+          }, [
+            T("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)
+            }, [
+              T("span", Ze, [
+                te(e.$slots, "handle", {
+                  separator: l,
+                  before: s.panel.id,
+                  after: u.value[l + 1].id,
+                  vertical: S.vertical,
+                  disabled: !A(l),
+                  resizing: V.value === l
+                }, () => [
+                  t[1] || (t[1] = T("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", {
+                key: 0,
+                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-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)
+              }, [
+                te(e.$slots, "panel-collapse", x({ ref_for: !0 }, $.value[o], {
+                  side: o === l ? "start" : "end",
+                  toggle: () => E(u.value[o].id, l)
+                }), () => [
+                  (b(), Ve(We(o === l !== $.value[o].collapsed ? ke.value : Me.value), { size: 13 }))
+                ])
+              ], 10, xe)) : ae("", !0)
+            ], 64))), 128))
+          ], 8, Xe)) : ae("", !0)
+        ], 64))), 128)),
+        B.value ? (b(), w("div", et)) : ae("", !0)
+      ], 16);
+    };
+  }
+});
+export {
+  nt as default
+};

package/dist/internal/MultiSplitPane2.vue.js

@@ -0,0 +1,4 @@
+import f from "./MultiSplitPane.vue.js";
+export {
+  f as default
+};