hys-ui 0.2.0 → 0.4.0

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

@@ -1,71 +1,328 @@
-import { defineComponent as g, ref as M, computed as v, watch as z, onDeactivated as B, onBeforeUnmount as P, openBlock as V, createElementBlock as C, mergeProps as D, unref as I, createElementVNode as h, renderSlot as w } from "vue";
-import { useHysRootAttrs as N } from "../../config.js";
-const R = { class: "hys-ui-ent-split-first" }, F = ["tabindex", "aria-disabled", "aria-orientation", "aria-valuenow", "aria-valuemin", "aria-valuemax"], H = { class: "hys-ui-ent-split-second" }, K = /* @__PURE__ */ g({
+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 = {
+  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 = {
+  key: 0,
+  class: "hys-ui-splitter-preview",
+  "aria-hidden": "true"
+}, Te = /* @__PURE__ */ ze({
   __name: "HysSplitPane",
   props: {
-    modelValue: { default: 40 },
+    modelValue: {},
+    defaultValue: { default: 40 },
     min: { default: 15 },
     max: { default: 85 },
-    vertical: { type: Boolean, default: !1 },
+    vertical: { type: Boolean },
+    layout: {},
     disabled: { type: Boolean },
-    step: { default: 2 }
+    step: { default: 2 },
+    lazy: { type: Boolean },
+    firstPanel: {},
+    secondPanel: {},
+    panels: {},
+    sizes: {},
+    storageKey: {},
+    dividerSize: {},
+    doubleClickAction: {},
+    ariaLabel: { default: "调整面板比例" },
+    firstLabel: { default: "前面板" },
+    secondLabel: { default: "后面板" }
   },
-  emits: ["update:modelValue", "resizeStart", "resizeEnd"],
-  setup(l, { emit: E }) {
-    const a = l, d = E, x = N(), c = M(), s = v(() => Math.max(0, Math.min(100, Number.isFinite(a.min) ? a.min : 0))), m = v(() => Math.max(s.value, Math.min(100, Number.isFinite(a.max) ? a.max : 100))), p = (e) => Math.max(s.value, Math.min(m.value, Number.isFinite(e) ? e : s.value)), u = v(() => p(a.modelValue));
-    let r = () => {
-    };
-    z(() => [a.disabled, a.vertical, a.min, a.max], () => r()), B(() => r()), P(() => r());
-    function L(e) {
-      if (r(), !c.value || a.disabled || e.button !== 0) return;
-      const t = e.currentTarget, n = c.value.getBoundingClientRect(), f = a.vertical, y = f ? n.height : n.width;
-      if (!y) return;
-      e.preventDefault(), t.setPointerCapture(e.pointerId), d("resizeStart");
-      const b = (o) => {
-        if (a.disabled || o.pointerId !== e.pointerId) return;
-        const A = (f ? o.clientY - n.top : o.clientX - n.left) / y * 100;
-        d("update:modelValue", Math.round(p(A)));
-      }, i = () => {
-        var o;
-        r = () => {
-        }, t.removeEventListener("pointermove", b), t.removeEventListener("pointerup", i), t.removeEventListener("pointercancel", i), t.removeEventListener("lostpointercapture", i), (o = t.hasPointerCapture) != null && o.call(t, e.pointerId) && t.releasePointerCapture(e.pointerId), d("resizeEnd", u.value);
-      };
-      r = i, t.addEventListener("pointermove", b), t.addEventListener("pointerup", i), t.addEventListener("pointercancel", i), t.addEventListener("lostpointercapture", i);
+  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,
+      (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 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;
+    }
+    const C = d(() => {
+      var e, l;
+      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)
+      );
+    }), 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)
+      ));
+    });
+    function R(e) {
+      return Math.min(I.value, Math.max(C.value, Number.isFinite(e) ? e : C.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(
+      () => 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));
+    });
+    function U(e) {
+      e !== o.value && (a.modelValue === void 0 && (D.value = e), u("update:modelValue", e));
+    }
+    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;
+    }
+    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(() => ({
+      separator: 0,
+      before: "first",
+      after: "second",
+      vertical: r.value,
+      disabled: !S.value,
+      resizing: N.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;
+      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");
     }
-    function k(e) {
-      if (a.disabled || !["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", "Home", "End"].includes(e.key)) return;
+    function me() {
+      a.doubleClickAction === "reset" ? ie() : a.doubleClickAction === "collapse" && te();
+    }
+    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";
+    }
+    function q() {
+      p || !$.value || !P.value || (W(), typeof ResizeObserver == "function" && (p = new ResizeObserver(W), p.observe($.value), p.observe(P.value)));
+    }
+    const c = Ae(
+      (e) => {
+        a.lazy ? L.value = e : U(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 }));
+      }
+    );
+    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 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();
+        return;
+      }
+      if (!S.value || c.active() || !["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", "Home", "End"].includes(e.key)) return;
       e.preventDefault();
-      const t = (Number.isFinite(a.step) && a.step > 0 ? a.step : 2) * (e.shiftKey ? 5 : 1), n = e.key === "Home" ? s.value : e.key === "End" ? m.value : u.value + (["ArrowRight", "ArrowDown"].includes(e.key) ? t : -t);
-      d("update:modelValue", p(n));
+      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);
+    }
+    function G() {
+      c.finish(!0, !1), p == null || p.disconnect(), p = void 0;
     }
-    return (e, t) => (V(), C("div", D(I(x), {
-      ref_key: "host",
-      ref: c,
-      class: ["hys-ui-ent-split", { "hys-ui-vertical": l.vertical }],
-      style: { "--hys-ui-split": u.value + "%" }
-    }), [
-      h("div", R, [
-        w(e.$slots, "first")
-      ]),
-      h("div", {
-        class: "hys-ui-ent-split-handle",
-        role: "separator",
-        tabindex: l.disabled ? -1 : 0,
-        "aria-label": "调整面板比例",
-        "aria-disabled": l.disabled || void 0,
-        "aria-orientation": l.vertical ? "horizontal" : "vertical",
-        "aria-valuenow": u.value,
-        "aria-valuemin": s.value,
-        "aria-valuemax": m.value,
-        onPointerdown: L,
-        onKeydown: k
-      }, null, 40, F),
-      h("div", H, [
-        w(e.$slots, "second")
-      ])
-    ], 16));
+    return B(
+      [S, r, C, I, E, w, () => a.lazy],
+      () => 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) => {
+        var i;
+        return ((i = k.value) == null ? void 0 : i.togglePane(e, l)) ?? Promise.resolve(!1);
+      },
+      getPanelSizes: () => {
+        var e;
+        return ((e = k.value) == null ? void 0 : e.getPanelSizes()) ?? {};
+      },
+      getPaneElement: (e) => {
+        var l;
+        return (l = k.value) == null ? void 0 : l.getPaneElement(e);
+      },
+      resizePane: (e, l, i) => {
+        var n;
+        return ((n = k.value) == null ? void 0 : n.resizePane(e, l, i)) ?? Promise.resolve(!1);
+      },
+      resetSizes: ie
+    }), (e, l) => {
+      var i, n, m, M, se, ne;
+      return t.panels !== void 0 ? (h(), J(Ee, oe({
+        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 }, [
+        e.$slots.panel ? {
+          name: "panel",
+          fn: Q((s) => [
+            y(e.$slots, "panel", g(z(s)))
+          ]),
+          key: "0"
+        } : void 0,
+        e.$slots["panel-collapse"] ? {
+          name: "panel-collapse",
+          fn: Q((s) => [
+            y(e.$slots, "panel-collapse", g(z(s)))
+          ]),
+          key: "1"
+        } : void 0,
+        e.$slots.handle ? {
+          name: "handle",
+          fn: Q((s) => [
+            y(e.$slots, "handle", g(z(s)))
+          ]),
+          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), {
+        ref_key: "host",
+        ref: $,
+        class: ["hys-ui-ent-split", { "hys-ui-vertical": r.value }],
+        style: {
+          "--hys-ui-splitter-size": F.value + "px",
+          "--hys-ui-split-ratio": o.value / 100,
+          "--hys-ui-split-preview": (L.value ?? 0) / 100
+        }
+      }), [
+        A("div", {
+          id: O,
+          class: "hys-ui-ent-split-first",
+          inert: v.value.collapsed
+        }, [
+          y(e.$slots, "first", g(z(v.value)))
+        ], 8, Le),
+        A("div", {
+          ref_key: "bar",
+          ref: P,
+          class: "hys-ui-splitter-bar"
+        }, [
+          A("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",
+            "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
+          }, [
+            A("span", Be, [
+              y(e.$slots, "handle", g(z(pe.value)), () => [
+                l[8] || (l[8] = A("span", { class: "hys-ui-splitter-dots" }, null, -1))
+              ])
+            ])
+          ], 40, Me),
+          (se = t.firstPanel) != null && se.collapsible ? (h(), j("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))
+          }, [
+            y(e.$slots, "first-collapse", g(z(v.value)), () => [
+              (h(), J(re(v.value.collapsed ? ae.value : le.value), { size: 13 }))
+            ])
+          ], 8, De)) : Y("", !0),
+          (ne = t.secondPanel) != null && ne.collapsible ? (h(), j("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))
+          }, [
+            y(e.$slots, "second-collapse", g(z(f.value)), () => [
+              (h(), J(re(f.value.collapsed ? le.value : ae.value), { size: 13 }))
+            ])
+          ], 8, Ne)) : Y("", !0)
+        ], 512),
+        A("div", {
+          id: T,
+          class: "hys-ui-ent-split-second",
+          inert: f.value.collapsed
+        }, [
+          y(e.$slots, "second", g(z(f.value)))
+        ], 8, Fe),
+        L.value !== void 0 ? (h(), j("div", He)) : Y("", !0)
+      ], 16));
+    };
   }
 });
 export {
-  K as default
+  Te as default
 };

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

@@ -0,0 +1,5 @@
+import o from "./HysSplitPane.vue.js";
+/* empty css                  */
+export {
+  o as default
+};

package/dist/components/HysTable/HysTable.vue.js

@@ -1,7 +1,7 @@
 import o from "./HysTable2.vue.js";
 /* empty css              */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-68f5fb01"]]);
+const e = /* @__PURE__ */ t(o, [["__scopeId", "data-v-0fbf300e"]]);
 export {
-  m as default
+  e as default
 };