@opentiny/tiny-robot 0.4.2-alpha.7 → 0.4.2-alpha.9

package/dist/layout/index.js

@@ -0,0 +1,1243 @@
+import { toValue as q, shallowRef as C, computed as f, provide as Ne, inject as $e, defineComponent as k, openBlock as E, createElementBlock as I, normalizeClass as K, createElementVNode as B, ref as ee, createBlock as X, createCommentVNode as N, renderSlot as $, Fragment as Le, renderList as Be, useAttrs as Ye, watch as ze, Teleport as Ve, mergeProps as Xe, unref as Z, createVNode as Ge, isVNode as Ue, Comment as qe, Text as Ze, useSlots as je, isRef as Ke, normalizeStyle as He, withCtx as pe, normalizeProps as Je, guardReactiveProps as Qe, createTextVNode as et, toDisplayString as tt, onBeforeUnmount as nt } from "vue";
+import { g as V, t as at, m as it, b as lt, a as rt, j as De, n as ot } from "../index4.js";
+import { _ as Y } from "../_plugin-vue_export-helper.js";
+function We(e) {
+  const t = q(e.value) !== void 0, n = C(q(e.defaultValue));
+  return f({
+    get() {
+      return t ? q(e.value) : n.value;
+    },
+    set(a) {
+      var l;
+      t || (n.value = a), (l = e.onChange) == null || l.call(e, a);
+    }
+  });
+}
+const st = [0];
+function Re(e, t) {
+  const n = C(null), a = C(null), l = C(null), c = C(null);
+  function x(d) {
+    const h = q(t.buttons) ?? st, s = d.currentTarget instanceof HTMLElement ? d.currentTarget : null;
+    if (!s || n.value || q(t.disabled) || !d.isPrimary || !h.includes(d.button))
+      return;
+    const v = t.onStart(d);
+    if (v) {
+      n.value = v, a.value = d.pointerId, l.value = s, c.value = s.ownerDocument.defaultView;
+      try {
+        s.setPointerCapture(d.pointerId);
+      } catch {
+        u("manual");
+      }
+    }
+  }
+  function g(d) {
+    var s;
+    const h = n.value;
+    !h || d.pointerId !== a.value || (s = t.onMove) == null || s.call(t, h, d);
+  }
+  function u(d, h) {
+    var o;
+    const s = n.value;
+    if (!s || h && h.pointerId !== a.value)
+      return;
+    const v = a.value, i = l.value;
+    n.value = null, a.value = null, l.value = null, c.value = null, i && v !== null && i.hasPointerCapture(v) && i.releasePointerCapture(v), (o = t.onEnd) == null || o.call(t, s, { reason: d, event: h });
+  }
+  return V(e, "pointerdown", x), V(c, "pointermove", g), V(c, "pointerup", (d) => {
+    u("pointerup", d);
+  }), V(c, "pointercancel", (d) => {
+    u("pointercancel", d);
+  }), at(() => {
+    u("scope-dispose");
+  }), {
+    isDragging: f(() => n.value !== null),
+    cancel: () => u("manual")
+  };
+}
+function ne(e) {
+  return e === void 0 ? void 0 : `${e}px`;
+}
+const ut = /^(-?(?:\d+|\d*\.\d+))px$/i, dt = /^0(?:\.0+)?$/i;
+function ct(e, t) {
+  if (typeof e == "number" && Number.isFinite(e))
+    return e;
+  if (typeof e != "string" || !e.trim())
+    return t;
+  const n = e.trim().toLowerCase();
+  if (dt.test(n))
+    return 0;
+  const a = n.match(ut);
+  if (a) {
+    const l = Number.parseFloat(a[1]);
+    return Number.isFinite(l) ? l : t;
+  }
+  return t;
+}
+function Te(e, t) {
+  return {
+    value: e.getPropertyValue(t),
+    priority: e.getPropertyPriority(t)
+  };
+}
+function Fe(e, t, n) {
+  if (!n.value) {
+    e.removeProperty(t);
+    return;
+  }
+  e.setProperty(t, n.value, n.priority);
+}
+function we(e, t) {
+  const n = e.style, a = Te(n, "cursor"), l = Te(n, "user-select");
+  n.setProperty("cursor", t, "important"), n.setProperty("user-select", "none", "important");
+  let c = !1;
+  return () => {
+    c || (c = !0, Fe(n, "cursor", a), Fe(n, "user-select", l));
+  };
+}
+function S(e, t, n) {
+  return Math.min(Math.max(e, t), n);
+}
+const Oe = Symbol("LayoutContext");
+function gt(e) {
+  Ne(Oe, e);
+}
+function Ee() {
+  const e = $e(Oe, null);
+  if (!e)
+    throw new Error("[Layout] useLayoutContext must be used within Layout.");
+  return e;
+}
+function ft(e) {
+  return Ee()[e];
+}
+const ht = /* @__PURE__ */ k({
+  name: "LayoutAsideResizeTrigger",
+  __name: "AsideResizeTrigger",
+  props: {
+    side: {},
+    asideEl: {},
+    minWidth: {},
+    maxWidth: {},
+    oppositeDockWidth: {}
+  },
+  emits: ["width-change", "aside-resize-start", "aside-resize-end"],
+  setup(e, { emit: t }) {
+    const n = e, a = t, l = C(null), { rootEl: c } = Ee(), { isDragging: x } = Re(l, {
+      onStart: (i) => {
+        const o = n.asideEl, R = c.value;
+        if (!o || !R)
+          return null;
+        const D = u(R, o), T = R.ownerDocument.body, F = R.ownerDocument.defaultView;
+        i.preventDefault();
+        const A = d(i, D, F, we(T, "col-resize"));
+        return a("aside-resize-start", {
+          side: n.side,
+          expandedWidth: A.startWidth
+        }), A;
+      },
+      onMove: (i, o) => {
+        const R = h(i, o.clientX);
+        s(i, R);
+      },
+      onEnd: (i) => {
+        i.frameId !== null && i.view && (i.view.cancelAnimationFrame(i.frameId), i.frameId = null), v(i), i.releaseBodyInteraction(), a("aside-resize-end", {
+          side: n.side,
+          expandedWidth: i.currentWidth
+        });
+      }
+    }), g = f(() => [
+      `tr-layout__resize-trigger--${n.side}`,
+      {
+        "is-dragging": x.value
+      }
+    ]);
+    function u(i, o) {
+      const R = i.getBoundingClientRect(), D = getComputedStyle(i).getPropertyValue("--tr-layout-main-min-width").trim(), T = ct(D, 320), F = o.getBoundingClientRect().width, A = R.width - T - n.oppositeDockWidth;
+      return {
+        startWidth: F,
+        minWidth: n.minWidth,
+        effectiveMax: Math.max(n.minWidth, Math.min(n.maxWidth, A))
+      };
+    }
+    function d(i, o, R, D) {
+      return {
+        side: n.side,
+        startX: i.clientX,
+        startWidth: o.startWidth,
+        currentWidth: o.startWidth,
+        minWidth: o.minWidth,
+        effectiveMax: o.effectiveMax,
+        pendingWidth: null,
+        frameId: null,
+        view: R,
+        releaseBodyInteraction: D
+      };
+    }
+    function h(i, o) {
+      const R = o - i.startX, D = i.side === "left" ? i.startWidth + R : i.startWidth - R;
+      return S(D, i.minWidth, i.effectiveMax);
+    }
+    function s(i, o) {
+      if (o !== i.currentWidth) {
+        if (i.pendingWidth = o, i.currentWidth = o, !i.view) {
+          v(i);
+          return;
+        }
+        i.frameId === null && (i.frameId = i.view.requestAnimationFrame(() => {
+          i.frameId = null, v(i);
+        }));
+      }
+    }
+    function v(i) {
+      if (i.pendingWidth === null)
+        return;
+      const o = i.pendingWidth;
+      a("width-change", o), i.pendingWidth = null;
+    }
+    return (i, o) => (E(), I("div", {
+      ref_key: "triggerRef",
+      ref: l,
+      class: K(["tr-layout__resize-trigger", g.value]),
+      "aria-hidden": "true"
+    }, [...o[0] || (o[0] = [
+      B("span", {
+        class: "tr-layout__resize-trigger-indicator",
+        "aria-hidden": "true"
+      }, null, -1)
+    ])], 2));
+  }
+}), mt = /* @__PURE__ */ Y(ht, [["__scopeId", "data-v-f60b35e1"]]), vt = ["inert"], pt = { class: "tr-layout__aside-mask" }, yt = { class: "tr-layout__aside-body" }, xt = /* @__PURE__ */ k({
+  name: "LayoutAsideContent",
+  __name: "AsideContent",
+  props: {
+    panel: {},
+    oppositeDockWidth: {}
+  },
+  emits: ["width-change", "aside-resize-start", "aside-resize-end"],
+  setup(e, { emit: t }) {
+    const n = ee(null), a = e, l = t, c = f(() => [
+      `tr-layout__aside--${a.panel.side}`,
+      `tr-layout__aside--effect-${a.panel.collapseEffect.value}`,
+      {
+        "tr-layout__aside--dock": a.panel.isDock.value,
+        "tr-layout__aside--drawer": a.panel.isDrawer.value,
+        "tr-layout__aside--expanded": a.panel.isOpen.value,
+        "tr-layout__aside--rail": a.panel.isRail.value,
+        "tr-layout__aside--hidden": a.panel.isHidden.value
+      }
+    ]);
+    return (x, g) => (E(), I("aside", {
+      ref_key: "asideRef",
+      ref: n,
+      class: K(["tr-layout__aside", c.value]),
+      inert: a.panel.isHidden.value || void 0
+    }, [
+      e.panel.canResize.value ? (E(), X(mt, {
+        key: 0,
+        side: e.panel.side,
+        "aside-el": n.value,
+        "min-width": e.panel.minExpandedWidth.value,
+        "max-width": e.panel.maxExpandedWidth.value,
+        "opposite-dock-width": e.oppositeDockWidth,
+        onWidthChange: g[0] || (g[0] = (u) => l("width-change", u)),
+        onAsideResizeStart: g[1] || (g[1] = (u) => l("aside-resize-start", u)),
+        onAsideResizeEnd: g[2] || (g[2] = (u) => l("aside-resize-end", u))
+      }, null, 8, ["side", "aside-el", "min-width", "max-width", "opposite-dock-width"])) : N("", !0),
+      B("div", pt, [
+        B("div", yt, [
+          $(x.$slots, "default", {}, void 0, !0)
+        ])
+      ])
+    ], 10, vt));
+  }
+}), Ce = /* @__PURE__ */ Y(xt, [["__scopeId", "data-v-76a70135"]]), ce = 420, ge = 560, j = 0, _t = j, le = 24, zt = 320, Wt = 240;
+function Rt(e) {
+  return (e == null ? void 0 : e.placement) ?? "center";
+}
+function wt(e) {
+  return e !== void 0 && "x" in e && "y" in e;
+}
+function Et(e, t, n, a, l) {
+  switch (e) {
+    case "top-left":
+      return {
+        x: t.left + l.x,
+        y: t.top + l.y
+      };
+    case "top-right":
+      return {
+        x: t.right - n - l.x,
+        y: t.top + l.y
+      };
+    case "bottom-left":
+      return {
+        x: t.left + l.x,
+        y: t.bottom - a - l.y
+      };
+    case "bottom-right":
+      return {
+        x: t.right - n - l.x,
+        y: t.bottom - a - l.y
+      };
+    case "center":
+    default:
+      return {
+        x: (t.left + t.right - n) / 2,
+        y: (t.top + t.bottom - a) / 2
+      };
+  }
+}
+function Ie(e) {
+  return {
+    x: (e == null ? void 0 : e.offsetX) ?? le,
+    y: (e == null ? void 0 : e.offsetY) ?? le
+  };
+}
+function St(e, t, n) {
+  switch (n) {
+    case "top-left":
+      return {
+        x: e.x - t.left,
+        y: e.y - t.top
+      };
+    case "top-right":
+      return {
+        x: t.right - e.width - e.x,
+        y: e.y - t.top
+      };
+    case "bottom-left":
+      return {
+        x: e.x - t.left,
+        y: t.bottom - e.height - e.y
+      };
+    case "bottom-right":
+      return {
+        x: t.right - e.width - e.x,
+        y: t.bottom - e.height - e.y
+      };
+    case "center":
+    default:
+      return null;
+  }
+}
+function Dt(e, t) {
+  const n = e.x + e.width / 2, a = e.y + e.height / 2, l = (t.left + t.right) / 2, c = (t.top + t.bottom) / 2, x = n <= l ? "left" : "right";
+  return `${a <= c ? "top" : "bottom"}-${x}`;
+}
+function ke(e, t, n, a) {
+  return {
+    x: e,
+    y: t,
+    width: n,
+    height: a
+  };
+}
+function Tt(e = ce + j * 2, t = ge + j * 2, n = j, a = _t) {
+  return {
+    left: n,
+    top: a,
+    right: Math.max(n, e - n),
+    bottom: Math.max(a, t - n)
+  };
+}
+function te(e, t) {
+  const n = Math.max(1, e.right - e.left), a = Math.max(1, e.bottom - e.top), l = S((t == null ? void 0 : t.minWidth) ?? zt, 1, n), c = S((t == null ? void 0 : t.minHeight) ?? Wt, 1, a);
+  return {
+    minWidth: l,
+    maxWidth: S((t == null ? void 0 : t.maxWidth) ?? n, l, n),
+    minHeight: c,
+    maxHeight: S((t == null ? void 0 : t.maxHeight) ?? a, c, a)
+  };
+}
+function fe(e, t, n = te(t)) {
+  const a = S(e.width, n.minWidth, n.maxWidth), l = S(e.height, n.minHeight, n.maxHeight), c = Math.max(t.left, t.right - a), x = Math.max(t.top, t.bottom - l), g = S(e.x, t.left, c), u = S(e.y, t.top, x);
+  return ke(g, u, a, l);
+}
+function Ft(e, t, n, a = te(n)) {
+  const l = e.x + e.width, c = e.y + e.height, x = l - n.left, g = c - n.top;
+  let u = e.width, d = e.height, h = e.x, s = e.y;
+  if (t.includes("w"))
+    if (x >= a.minWidth) {
+      const i = Math.min(a.maxWidth, x);
+      u = S(e.width, a.minWidth, i), h = l - u;
+    } else
+      u = a.minWidth, h = n.left;
+  else if (t.includes("e")) {
+    const i = Math.min(a.maxWidth, Math.max(a.minWidth, n.right - e.x));
+    u = S(e.width, a.minWidth, i), h = e.x;
+  }
+  if (t.includes("n"))
+    if (g >= a.minHeight) {
+      const i = Math.min(a.maxHeight, g);
+      d = S(e.height, a.minHeight, i), s = c - d;
+    } else
+      d = a.minHeight, s = n.top;
+  else if (t.includes("s")) {
+    const i = Math.min(a.maxHeight, Math.max(a.minHeight, n.bottom - e.y));
+    d = S(e.height, a.minHeight, i), s = e.y;
+  }
+  const v = {
+    ...e,
+    x: h,
+    y: s,
+    width: u,
+    height: d
+  };
+  return fe(v, n, a);
+}
+function Ae(e, t) {
+  const n = te(e, t), a = S((t == null ? void 0 : t.width) ?? ce, n.minWidth, n.maxWidth), l = S((t == null ? void 0 : t.height) ?? ge, n.minHeight, n.maxHeight), c = Rt(t), x = Ie(t), g = Et(c, e, a, l, x);
+  return ke(g.x, g.y, a, l);
+}
+function Ct(e, t) {
+  return e ? wt(e) ? fe(e, t) : Ae(t, e) : Ae(t);
+}
+function At(e, t, n, a = !0) {
+  const l = te(t, n), c = fe(e, t, l), x = (n == null ? void 0 : n.placement) ?? "center", u = a && x === "center" ? Dt(c, t) : x, d = St(c, t, u), h = Ie(n);
+  return {
+    placement: u,
+    offsetX: (d == null ? void 0 : d.x) ?? h.x,
+    offsetY: (d == null ? void 0 : d.y) ?? h.y,
+    width: c.width,
+    height: c.height
+  };
+}
+function bt(e, t) {
+  return (e == null ? void 0 : e.x) === (t == null ? void 0 : t.x) && (e == null ? void 0 : e.y) === (t == null ? void 0 : t.y) && (e == null ? void 0 : e.width) === (t == null ? void 0 : t.width) && (e == null ? void 0 : e.height) === (t == null ? void 0 : t.height);
+}
+function Lt(e, t) {
+  return {
+    ...e,
+    y: e.y + t,
+    height: e.height - t
+  };
+}
+function Ht(e, t) {
+  return {
+    ...e,
+    height: e.height + t
+  };
+}
+function Ot(e, t) {
+  return {
+    ...e,
+    width: e.width + t
+  };
+}
+function It(e, t) {
+  return {
+    ...e,
+    x: e.x + t,
+    width: e.width - t
+  };
+}
+function kt(e) {
+  let t = { ...e.startRect };
+  return e.handle.includes("n") && (t = Lt(t, e.deltaY)), e.handle.includes("s") && (t = Ht(t, e.deltaY)), e.handle.includes("e") && (t = Ot(t, e.deltaX)), e.handle.includes("w") && (t = It(t, e.deltaX)), t;
+}
+const Pt = /* @__PURE__ */ k({
+  name: "FloatingDragBar",
+  __name: "FloatingDragBar",
+  props: {
+    x: {},
+    y: {},
+    canDrag: { type: Boolean }
+  },
+  emits: ["drag-start", "drag", "drag-end"],
+  setup(e, { emit: t }) {
+    const n = e, a = t, l = C(null), { rootEl: c } = Ee(), x = f(() => n.canDrag), { isDragging: g } = it(c, {
+      handle: l,
+      initialValue: { x: n.x, y: n.y },
+      preventDefault: !0,
+      buttons: [0],
+      disabled: f(() => !x.value),
+      onStart: (d) => {
+        a("drag-start", d);
+      },
+      onMove: (d) => {
+        a("drag", d);
+      },
+      onEnd: (d) => {
+        a("drag-end", d);
+      }
+    }), u = f(() => ({
+      "tr-layout__drag-bar--draggable": x.value,
+      "tr-layout__drag-bar--dragging": g.value
+    }));
+    return (d, h) => (E(), I("div", {
+      ref_key: "dragBarEl",
+      ref: l,
+      class: K(["tr-layout__drag-bar", u.value])
+    }, null, 2));
+  }
+}), Mt = /* @__PURE__ */ Y(Pt, [["__scopeId", "data-v-8be201e5"]]), Nt = /* @__PURE__ */ k({
+  name: "FloatingResizeTrigger",
+  __name: "FloatingResizeTrigger",
+  props: {
+    handle: {},
+    active: { type: Boolean }
+  },
+  emits: ["resize-start", "resize", "resize-end"],
+  setup(e, { emit: t }) {
+    const n = {
+      s: "ns",
+      e: "ew",
+      w: "ew",
+      ne: "nesw",
+      sw: "nesw",
+      nw: "nwse",
+      se: "nwse"
+    }, a = e, l = t, c = C(null), x = f(() => [
+      `tr-layout__floating-resize-trigger--${a.handle}`,
+      `tr-layout__floating-resize-trigger--${g(a.handle)}`,
+      {
+        "is-active": a.active
+      }
+    ]);
+    Re(c, {
+      onStart: (s) => {
+        const v = s.currentTarget instanceof HTMLElement ? s.currentTarget : null;
+        if (!v)
+          return null;
+        s.preventDefault();
+        const i = v.ownerDocument.body, o = {
+          startX: s.clientX,
+          startY: s.clientY,
+          lastPointerX: s.clientX,
+          lastPointerY: s.clientY,
+          releaseBodyInteraction: we(i, `${g(a.handle)}-resize`)
+        };
+        return l("resize-start", a.handle), o;
+      },
+      onMove: (s, v) => {
+        v.clientX === s.lastPointerX && v.clientY === s.lastPointerY || d(s, v.clientX, v.clientY);
+      },
+      onEnd: (s) => {
+        s.releaseBodyInteraction(), h(s);
+      }
+    });
+    function g(s) {
+      return n[s];
+    }
+    function u(s, v, i) {
+      const o = v - s.startX, R = i - s.startY;
+      return [o, R];
+    }
+    function d(s, v, i) {
+      const [o, R] = u(s, v, i);
+      s.lastPointerX = v, s.lastPointerY = i, l("resize", a.handle, o, R);
+    }
+    function h(s) {
+      const [v, i] = u(s, s.lastPointerX, s.lastPointerY);
+      l("resize-end", a.handle, v, i);
+    }
+    return (s, v) => (E(), I("div", {
+      ref_key: "triggerRef",
+      ref: c,
+      class: K(["tr-layout__floating-resize-trigger", x.value]),
+      "aria-hidden": "true"
+    }, [...v[0] || (v[0] = [
+      B("span", {
+        class: "tr-layout__floating-resize-trigger-indicator",
+        "aria-hidden": "true"
+      }, null, -1)
+    ])], 2));
+  }
+}), $t = /* @__PURE__ */ Y(Nt, [["__scopeId", "data-v-c9536bd0"]]), Bt = /* @__PURE__ */ k({
+  name: "FloatingResizeTriggers",
+  __name: "FloatingResizeTriggers",
+  props: {
+    handles: {}
+  },
+  emits: ["resize-start", "resize", "resize-end"],
+  setup(e, { emit: t }) {
+    const n = e, a = t, l = C(null);
+    function c(u) {
+      l.value = u, a("resize-start", u);
+    }
+    function x(u, d, h) {
+      a("resize", u, d, h);
+    }
+    function g(u, d, h) {
+      a("resize-end", u, d, h), l.value = null;
+    }
+    return (u, d) => (E(!0), I(Le, null, Be(n.handles, (h) => (E(), X($t, {
+      key: h,
+      handle: h,
+      active: l.value === h,
+      onResizeStart: c,
+      onResize: x,
+      onResizeEnd: g
+    }, null, 8, ["handle", "active"]))), 128));
+  }
+}), Yt = /* @__PURE__ */ k({
+  name: "LayoutSurface",
+  inheritAttrs: !1,
+  __name: "LayoutSurface",
+  props: {
+    mode: {},
+    floatingState: {},
+    floatingOptions: {}
+  },
+  emits: ["update:floatingState", "floating-drag-start", "floating-drag", "floating-drag-end", "floating-resize-start", "floating-resize", "floating-resize-end"],
+  setup(e, { expose: t, emit: n }) {
+    const a = ["s", "e", "w", "ne", "nw", "se", "sw"], l = e, c = n, x = Ye(), g = ee(null), { width: u, height: d } = lt({
+      type: "visual",
+      initialWidth: ce + j * 2,
+      initialHeight: ge + j * 2
+    }), h = f(() => Tt(u.value, d.value)), s = f(() => l.mode === "floating"), v = f(() => {
+      if (!(!s.value || !l.floatingState))
+        return {
+          ...l.floatingOptions,
+          ...l.floatingState
+        };
+    }), i = f(() => te(h.value, v.value)), o = f(() => Ct(v.value, h.value)), R = f(() => {
+      var r;
+      return ((r = v.value) == null ? void 0 : r.draggable) ?? !0;
+    }), D = f(() => {
+      var r;
+      return ((r = v.value) == null ? void 0 : r.resizable) === !0;
+    }), T = C(null), F = C(null), A = f(() => T.value !== null), m = f(() => F.value !== null), w = f(() => A.value || m.value), G = f(() => s.value && R.value && !m.value), y = f(() => !s.value || !D.value ? [] : a), _ = f(() => s.value ? {
+      left: `${o.value.x}px`,
+      top: `${o.value.y}px`,
+      width: `${o.value.width}px`,
+      height: `${o.value.height}px`
+    } : {});
+    function W(r) {
+      return At(r, h.value, v.value);
+    }
+    function b(r) {
+      const p = fe(r, h.value, i.value);
+      return bt(o.value, p) || c("update:floatingState", W(p)), p;
+    }
+    function H(r, p) {
+      return b({
+        ...p,
+        x: r.x,
+        y: r.y
+      });
+    }
+    function L(r, p, z, O) {
+      const M = kt({
+        handle: r,
+        deltaX: p,
+        deltaY: z,
+        startRect: O
+      }), Me = Ft(M, r, h.value, i.value);
+      return b(Me);
+    }
+    function U() {
+      T.value = o.value, c("floating-drag-start", W(T.value));
+    }
+    function P(r) {
+      const p = T.value ?? o.value, z = H(r, p);
+      c("floating-drag", W(z));
+    }
+    function J(r) {
+      const p = T.value ?? o.value, z = H(r, p);
+      c("floating-drag-end", W(z)), T.value = null;
+    }
+    function Q(r) {
+      F.value = o.value, c("floating-resize-start", {
+        ...W(o.value),
+        handle: r
+      });
+    }
+    function me(r, p, z) {
+      const O = F.value ?? o.value, M = L(r, p, z, O);
+      c("floating-resize", {
+        ...W(M),
+        handle: r
+      });
+    }
+    function ve(r, p, z) {
+      const O = F.value ?? o.value, M = L(r, p, z, O);
+      c("floating-resize-end", {
+        ...W(M),
+        handle: r
+      }), F.value = null;
+    }
+    return ze(
+      [v, u, d],
+      () => {
+        !s.value || w.value || b(o.value);
+      },
+      { immediate: !0 }
+    ), t({
+      rootEl: g
+    }), (r, p) => (E(), X(Ve, {
+      to: "body",
+      disabled: !s.value
+    }, [
+      B("div", Xe({
+        ref_key: "rootEl",
+        ref: g
+      }, Z(x), {
+        class: ["tr-layout", {
+          "tr-layout--floating": s.value,
+          "tr-layout--no-select": w.value
+        }],
+        style: _.value
+      }), [
+        s.value ? (E(), X(Mt, {
+          key: 0,
+          x: o.value.x,
+          y: o.value.y,
+          "can-drag": G.value,
+          onDragStart: U,
+          onDrag: P,
+          onDragEnd: J
+        }, null, 8, ["x", "y", "can-drag"])) : N("", !0),
+        $(r.$slots, "default", {}, void 0, !0),
+        Ge(Bt, {
+          handles: y.value,
+          onResizeStart: Q,
+          onResize: me,
+          onResizeEnd: ve
+        }, null, 8, ["handles"])
+      ], 16)
+    ], 8, ["disabled"]));
+  }
+}), Vt = /* @__PURE__ */ Y(Yt, [["__scopeId", "data-v-9e8f161f"]]), he = {
+  left: {
+    open: !0,
+    minWidth: 200,
+    expandedWidth: 300,
+    maxWidth: 560
+  },
+  right: {
+    open: !1,
+    minWidth: 240,
+    expandedWidth: 320,
+    maxWidth: 640
+  }
+};
+function Xt(e) {
+  return he[e].open;
+}
+function Gt(e) {
+  return he[e].minWidth;
+}
+function Ut(e) {
+  return he[e].expandedWidth;
+}
+function qt(e) {
+  return he[e].maxWidth;
+}
+function ae(e, t) {
+  return typeof e != "number" || !Number.isFinite(e) ? t : Math.max(0, e);
+}
+function be(e) {
+  const { side: t } = e, n = f(() => q(e.config)), a = f(() => {
+    var m;
+    return ((m = n.value) == null ? void 0 : m.mode) ?? "dock";
+  }), l = f(() => {
+    var m;
+    return ae((m = n.value) == null ? void 0 : m.collapsedWidth, 0);
+  }), c = f(() => {
+    var m;
+    return ((m = n.value) == null ? void 0 : m.collapseEffect) ?? "overlay";
+  }), x = f(() => {
+    var m;
+    return ((m = n.value) == null ? void 0 : m.resizable) ?? !1;
+  }), g = f(
+    () => {
+      var m;
+      return ae((m = n.value) == null ? void 0 : m.minExpandedWidth, Gt(t));
+    }
+  ), u = f(() => {
+    var w;
+    const m = ae(
+      (w = n.value) == null ? void 0 : w.maxExpandedWidth,
+      qt(t)
+    );
+    return Math.max(g.value, m);
+  });
+  function d(m) {
+    return S(
+      ae(m, Ut(t)),
+      g.value,
+      u.value
+    );
+  }
+  const h = We({
+    value: () => {
+      var m;
+      return (m = n.value) == null ? void 0 : m.open;
+    },
+    defaultValue: () => {
+      var m;
+      return ((m = n.value) == null ? void 0 : m.defaultOpen) ?? Xt(t);
+    },
+    onChange: (m) => {
+      var w;
+      return (w = e.onOpenChange) == null ? void 0 : w.call(e, { side: t, open: m });
+    }
+  }), s = We({
+    value: () => {
+      var m;
+      return (m = n.value) == null ? void 0 : m.expandedWidth;
+    },
+    defaultValue: () => {
+      var m;
+      return d((m = n.value) == null ? void 0 : m.defaultExpandedWidth);
+    },
+    onChange: (m) => {
+      var w;
+      return (w = e.onExpandedWidthChange) == null ? void 0 : w.call(e, { side: t, expandedWidth: m });
+    }
+  }), v = f(() => d(s.value)), i = f(() => a.value === "dock"), o = f(() => a.value === "drawer"), R = f(() => i.value && !h.value && l.value > 0), D = f(() => !h.value && !R.value), T = f(
+    () => i.value && h.value && x.value && u.value > g.value
+  );
+  function F(m) {
+    h.value !== m && (h.value = m);
+  }
+  function A(m) {
+    const w = d(m);
+    v.value !== w && (s.value = w);
+  }
+  return {
+    side: t,
+    isOpen: f(() => h.value),
+    expandedWidth: v,
+    collapsedWidth: l,
+    collapseEffect: c,
+    minExpandedWidth: g,
+    maxExpandedWidth: u,
+    isDock: i,
+    isDrawer: o,
+    isRail: R,
+    isHidden: D,
+    canResize: T,
+    setOpen: F,
+    setExpandedWidth: A
+  };
+}
+function Zt(e) {
+  const t = be({
+    side: "left",
+    config: e.leftConfig,
+    onOpenChange: e.onOpenChange,
+    onExpandedWidthChange: e.onExpandedWidthChange
+  }), n = be({
+    side: "right",
+    config: e.rightConfig,
+    onOpenChange: e.onOpenChange,
+    onExpandedWidthChange: e.onExpandedWidthChange
+  });
+  return {
+    leftAsideState: t,
+    rightAsideState: n
+  };
+}
+const jt = {
+  left: "left-aside-open-change",
+  right: "right-aside-open-change"
+}, Kt = {
+  start: {
+    generic: "aside-resize-start",
+    left: "left-aside-resize-start",
+    right: "right-aside-resize-start"
+  },
+  resize: {
+    generic: "aside-resize",
+    left: "left-aside-resize",
+    right: "right-aside-resize"
+  },
+  end: {
+    generic: "aside-resize-end",
+    left: "left-aside-resize-end",
+    right: "right-aside-resize-end"
+  }
+};
+function Jt(e, t) {
+  e("aside-open-change", t), e(jt[t.side], {
+    open: t.open
+  });
+}
+function ye(e, t, n) {
+  const a = Kt[t];
+  e(a.generic, n), e(a[n.side], {
+    expandedWidth: n.expandedWidth
+  });
+}
+function xe(e) {
+  return e == null ? !1 : typeof e == "string" ? e.trim().length > 0 : !0;
+}
+function Pe(e) {
+  return Array.isArray(e) ? e.some((t) => Ue(t) ? t.type === qe ? !1 : t.type === Ze ? xe(t.children) : t.type === Le ? Pe(t.children) : !0 : xe(t)) : xe(e);
+}
+function ie(e) {
+  return Pe(e == null ? void 0 : e());
+}
+const Qt = { class: "tr-layout__body" }, en = {
+  key: 1,
+  class: "tr-layout__header"
+}, tn = { class: "tr-layout__main" }, nn = {
+  key: 2,
+  class: "tr-layout__footer"
+}, an = /* @__PURE__ */ k({
+  name: "Layout",
+  __name: "Layout",
+  props: {
+    mode: {},
+    floatingState: {},
+    defaultFloatingState: {},
+    floatingOptions: {},
+    leftAside: {},
+    rightAside: {}
+  },
+  emits: ["update:floatingState", "floating-drag-start", "floating-drag", "floating-drag-end", "floating-resize-start", "floating-resize", "floating-resize-end", "aside-open-change", "aside-resize-start", "aside-resize", "aside-resize-end", "left-aside-open-change", "left-aside-resize-start", "left-aside-resize", "left-aside-resize-end", "right-aside-open-change", "right-aside-resize-start", "right-aside-resize", "right-aside-resize-end"],
+  setup(e, { emit: t }) {
+    const n = e, a = t, l = je(), c = ee(null), x = f(() => {
+      var r;
+      return ((r = c.value) == null ? void 0 : r.rootEl) ?? null;
+    }), g = f(() => ie(l["left-aside"])), u = f(() => ie(l.header)), d = f(() => ie(l.footer)), h = f(() => ie(l["right-aside"]));
+    function s(r) {
+      Jt(a, r);
+    }
+    function v(r) {
+      ye(a, "resize", r);
+    }
+    const { leftAsideState: i, rightAsideState: o } = Zt({
+      leftConfig: () => n.leftAside,
+      rightConfig: () => n.rightAside,
+      onOpenChange: s,
+      onExpandedWidthChange: v
+    });
+    function R(r, p, z, O) {
+      z && r.isDrawer.value && p.isDrawer.value && p.isOpen.value && O && p.setOpen(!1), r.setOpen(z);
+    }
+    function D(r, p, z) {
+      R(r, p, !r.isOpen.value, z);
+    }
+    function T() {
+      D(i, o, h.value);
+    }
+    function F() {
+      D(o, i, g.value);
+    }
+    const A = f(() => g.value && i.isDrawer.value && i.isOpen.value), m = f(() => h.value && o.isDrawer.value && o.isOpen.value), w = f(() => A.value || m.value);
+    function G() {
+      A.value && i.setOpen(!1), m.value && o.setOpen(!1);
+    }
+    gt({
+      rootEl: x,
+      left: {
+        isOpen: i.isOpen,
+        toggle: T
+      },
+      right: {
+        isOpen: o.isOpen,
+        toggle: F
+      }
+    });
+    const y = ee(!1);
+    function _(r) {
+      y.value = !0, ye(a, "start", r);
+    }
+    function W(r) {
+      y.value = !1, ye(a, "end", r);
+    }
+    function b(r) {
+      i.setExpandedWidth(r);
+    }
+    function H(r) {
+      o.setExpandedWidth(r);
+    }
+    function L(r, p) {
+      return !p || !r.isDock.value || r.isHidden.value ? 0 : r.isRail.value ? r.collapsedWidth.value : r.expandedWidth.value;
+    }
+    const U = {
+      placement: "center",
+      offsetX: le,
+      offsetY: le,
+      width: ce,
+      height: ge
+    }, P = We({
+      value: () => n.floatingState,
+      defaultValue: () => n.defaultFloatingState ?? U,
+      onChange: (r) => a("update:floatingState", r)
+    }), J = f(() => L(i, g.value)), Q = f(() => L(o, h.value)), me = f(() => ({
+      "tr-layout--left-dock": g.value && i.isDock.value,
+      "tr-layout--left-drawer": g.value && i.isDrawer.value,
+      "tr-layout--left-expanded": g.value && i.isOpen.value,
+      "tr-layout--left-rail": g.value && i.isRail.value,
+      "tr-layout--right-dock": h.value && o.isDock.value,
+      "tr-layout--right-drawer": h.value && o.isDrawer.value,
+      "tr-layout--right-expanded": h.value && o.isOpen.value,
+      "tr-layout--right-rail": h.value && o.isRail.value,
+      "tr-layout--resizing": y.value
+    })), ve = f(() => {
+      const r = {}, p = ne(i.expandedWidth.value), z = ne(i.collapsedWidth.value), O = ne(o.expandedWidth.value), M = ne(o.collapsedWidth.value);
+      return p && (r["--left-dock-width"] = p), z && (r["--left-collapsed-width"] = z), O && (r["--right-dock-width"] = O), M && (r["--right-collapsed-width"] = M), r;
+    });
+    return (r, p) => (E(), X(Vt, {
+      ref_key: "surfaceRef",
+      ref: c,
+      mode: e.mode,
+      class: K(me.value),
+      style: He(ve.value),
+      "floating-options": e.floatingOptions,
+      "floating-state": Z(P),
+      "onUpdate:floatingState": p[0] || (p[0] = (z) => Ke(P) ? P.value = z : null),
+      onFloatingDragStart: p[1] || (p[1] = (z) => a("floating-drag-start", z)),
+      onFloatingDrag: p[2] || (p[2] = (z) => a("floating-drag", z)),
+      onFloatingDragEnd: p[3] || (p[3] = (z) => a("floating-drag-end", z)),
+      onFloatingResizeStart: p[4] || (p[4] = (z) => a("floating-resize-start", z)),
+      onFloatingResize: p[5] || (p[5] = (z) => a("floating-resize", z)),
+      onFloatingResizeEnd: p[6] || (p[6] = (z) => a("floating-resize-end", z))
+    }, {
+      default: pe(() => [
+        B("div", Qt, [
+          g.value ? (E(), X(Ce, {
+            key: 0,
+            panel: Z(i),
+            "opposite-dock-width": Q.value,
+            onWidthChange: b,
+            onAsideResizeStart: _,
+            onAsideResizeEnd: W
+          }, {
+            default: pe(() => [
+              $(r.$slots, "left-aside", {}, void 0, !0)
+            ]),
+            _: 3
+          }, 8, ["panel", "opposite-dock-width"])) : N("", !0),
+          u.value ? (E(), I("header", en, [
+            $(r.$slots, "header", {}, void 0, !0)
+          ])) : N("", !0),
+          B("main", tn, [
+            $(r.$slots, "main", {}, void 0, !0)
+          ]),
+          d.value ? (E(), I("footer", nn, [
+            $(r.$slots, "footer", {}, void 0, !0)
+          ])) : N("", !0),
+          h.value ? (E(), X(Ce, {
+            key: 3,
+            panel: Z(o),
+            "opposite-dock-width": J.value,
+            onWidthChange: H,
+            onAsideResizeStart: _,
+            onAsideResizeEnd: W
+          }, {
+            default: pe(() => [
+              $(r.$slots, "right-aside", {}, void 0, !0)
+            ]),
+            _: 3
+          }, 8, ["panel", "opposite-dock-width"])) : N("", !0),
+          w.value ? (E(), I("div", {
+            key: 4,
+            class: "tr-layout__backdrop",
+            "aria-hidden": "true",
+            onPointerdown: G
+          }, null, 32)) : N("", !0)
+        ])
+      ]),
+      _: 3
+    }, 8, ["mode", "class", "style", "floating-options", "floating-state"]));
+  }
+}), re = /* @__PURE__ */ Y(an, [["__scopeId", "data-v-47262b9e"]]), ln = /* @__PURE__ */ k({
+  name: "LayoutAsideToggle",
+  __name: "LayoutAsideToggle",
+  props: {
+    side: {}
+  },
+  setup(e) {
+    const t = e, { isOpen: n, toggle: a } = ft(t.side), l = f(() => ({
+      isOpen: n.value
+    })), c = {
+      left: {
+        expanded: "Collapse navigation",
+        collapsed: "Expand navigation"
+      },
+      right: {
+        expanded: "Hide side panel",
+        collapsed: "Show side panel"
+      }
+    }, x = f(() => {
+      const g = c[t.side];
+      return n.value ? g.expanded : g.collapsed;
+    });
+    return (g, u) => (E(), I("button", {
+      class: "tr-layout-aside-toggle",
+      type: "button",
+      onClick: u[0] || (u[0] = //@ts-ignore
+      (...d) => Z(a) && Z(a)(...d))
+    }, [
+      $(g.$slots, "default", Je(Qe(l.value)), () => [
+        et(tt(x.value), 1)
+      ], !0)
+    ]));
+  }
+}), oe = /* @__PURE__ */ Y(ln, [["__scopeId", "data-v-f173f270"]]), rn = 36, _e = "tr-layout-proxy-scrollbar-target", on = /* @__PURE__ */ k({
+  name: "LayoutProxyScrollbar",
+  __name: "LayoutProxyScrollbar",
+  props: {
+    scrollTarget: {}
+  },
+  setup(e) {
+    const t = e, n = ee(null), a = C(null), l = C(R()), c = C(!1), x = C(!1);
+    let g = null;
+    const u = f(() => D(t.scrollTarget)), d = f(() => l.value.isScrollable), { isDragging: h, cancel: s } = Re(a, {
+      disabled: f(() => !l.value.isScrollable),
+      onStart: (y) => {
+        const _ = u.value;
+        if (!_ || !l.value.isScrollable)
+          return null;
+        const W = _.ownerDocument.body;
+        return W ? (y.preventDefault(), {
+          scrollTarget: _,
+          startY: y.clientY,
+          startScrollTop: _.scrollTop,
+          releaseBodyInteraction: we(W, "grabbing")
+        }) : null;
+      },
+      onMove: (y, _) => {
+        const W = l.value;
+        W.isScrollable && (y.scrollTarget.scrollTop = A(y, _.clientY, W), w());
+      },
+      onEnd: (y) => {
+        y.releaseBodyInteraction();
+      }
+    }), v = f(
+      () => d.value && (c.value || x.value || h.value)
+    ), i = f(() => ({
+      height: `${l.value.thumbHeight}px`,
+      transform: `translateY(${l.value.thumbOffset}px)`
+    })), o = f(() => ({
+      "tr-layout-proxy-scrollbar--visible": v.value,
+      "tr-layout-proxy-scrollbar--dragging-thumb": h.value
+    }));
+    function R() {
+      return {
+        clientHeight: 0,
+        scrollHeight: 0,
+        scrollTop: 0,
+        trackHeight: 0,
+        thumbHeight: 0,
+        thumbOffset: 0,
+        isScrollable: !1
+      };
+    }
+    function D(y) {
+      const _ = rt(y);
+      return _ instanceof HTMLElement ? _ : null;
+    }
+    function T(y, _) {
+      return y instanceof HTMLElement ? Math.max(y.clientHeight, 0) : _;
+    }
+    function F(y, _) {
+      const W = y.clientHeight, b = y.scrollHeight, H = y.scrollTop, L = b - W;
+      if (!(L > 1))
+        return {
+          clientHeight: W,
+          scrollHeight: b,
+          scrollTop: H,
+          trackHeight: _,
+          thumbHeight: _,
+          thumbOffset: 0,
+          isScrollable: !1
+        };
+      const P = S(W / b * _, rn, _), J = _ - P, Q = H / L * J;
+      return {
+        clientHeight: W,
+        scrollHeight: b,
+        scrollTop: H,
+        trackHeight: _,
+        thumbHeight: P,
+        thumbOffset: Q,
+        isScrollable: !0
+      };
+    }
+    function A(y, _, W) {
+      const b = _ - y.startY, H = W.scrollHeight - W.clientHeight, L = W.trackHeight - W.thumbHeight, U = L > 0 ? H / L : 0;
+      return y.startScrollTop + b * U;
+    }
+    function m() {
+      g = null;
+      const y = u.value;
+      if (!y) {
+        l.value = R();
+        return;
+      }
+      const _ = T(n.value, y.clientHeight);
+      l.value = F(y, _);
+    }
+    function w() {
+      if (typeof window > "u") {
+        m();
+        return;
+      }
+      g === null && (g = window.requestAnimationFrame(m));
+    }
+    function G(y) {
+      x.value = y;
+    }
+    return V(u, "mouseenter", () => {
+      c.value = !0;
+    }), V(u, "mouseleave", () => {
+      c.value = !1;
+    }), V(u, "scroll", () => {
+      w();
+    }), De(u, () => {
+      w();
+    }), De(n, () => {
+      w();
+    }), ot(
+      u,
+      () => {
+        w();
+      },
+      { childList: !0, subtree: !0 }
+    ), ze(
+      u,
+      (y, _) => {
+        s(), c.value = !1, x.value = !1, _ == null || _.classList.remove(_e), y == null || y.classList.add(_e), w();
+      },
+      { immediate: !0 }
+    ), ze(n, () => {
+      w();
+    }), nt(() => {
+      var y;
+      g !== null && typeof window < "u" && window.cancelAnimationFrame(g), s(), (y = u.value) == null || y.classList.remove(_e);
+    }), (y, _) => d.value ? (E(), I("div", {
+      key: 0,
+      ref_key: "scrollbarRef",
+      ref: n,
+      class: K(["tr-layout-proxy-scrollbar", o.value]),
+      "aria-hidden": "true",
+      onMouseenter: _[0] || (_[0] = (W) => G(!0)),
+      onMouseleave: _[1] || (_[1] = (W) => G(!1))
+    }, [
+      B("div", {
+        ref_key: "thumbRef",
+        ref: a,
+        class: "tr-layout-proxy-scrollbar__thumb",
+        style: He(i.value)
+      }, null, 4)
+    ], 34)) : N("", !0);
+  }
+}), se = /* @__PURE__ */ Y(on, [["__scopeId", "data-v-d7c40335"]]);
+se.name = "TrLayoutProxyScrollbar";
+const sn = function(e) {
+  e.component(se.name, se);
+}, ue = se;
+ue.install = sn;
+oe.name = "TrLayoutAsideToggle";
+const un = function(e) {
+  e.component(oe.name, oe);
+}, de = oe;
+de.install = un;
+re.name = "TrLayout";
+const dn = function(e) {
+  e.component(re.name, re), e.component(ue.name, ue), e.component(de.name, de);
+}, Se = re;
+Se.install = dn;
+Se.ProxyScrollbar = ue;
+Se.AsideToggle = de;
+export {
+  Se as Layout,
+  de as LayoutAsideToggle,
+  ue as LayoutProxyScrollbar,
+  Se as default
+};