@bigplay/tree-view 0.5.0 → 0.6.0

package/dist/index.js

@@ -1,7 +1,7 @@
-import { defineComponent as D, openBlock as s, createElementBlock as d, createElementVNode as C, toDisplayString as _, withModifiers as Q, createCommentVNode as z, ref as g, watch as O, onBeforeUnmount as P, computed as f, onMounted as V, nextTick as U, normalizeStyle as S, normalizeClass as E, unref as j, Fragment as I, renderList as M, renderSlot as R, createVNode as K, createTextVNode as q } from "vue";
-import { IDENTITY_TRANSFORM as J, PanZoomController as X, toTree as ee, applyCollapsed as te, layoutTree as oe, toggleCollapsed as ne, estimateVisibleRect as ae, measureVisibleRect as re, DEFAULT_OVERSCAN as ie, visibleLayout as le, toCssTransform as se, DEFAULT_SCALE_LIMITS as de, buildBracketCard as ce, MOBILE_MEDIA_QUERY as ve, resolveOptions as ue, DEFAULT_OPTIONS as pe, levelGapForWidth as fe, buildBracketRounds as he, SWIPE_ELBOW_OFFSET as be, roundSiblingGap as we, watchMedia as me, watchWidth as ge, watchChildren as ke, hideRoundsBefore as xe, roundOfDepth as _e, roundAtScroll as ye, findScrollParent as Ce, nodesInColumn as Te, horizontalBox as ze, offsetWithin as Se, smoothScrollLeft as Ee, roundScrollLeft as $e, injectStyles as Be } from "@bigplay/tree-view-core";
-import { DEFAULT_OPTIONS as at, MOBILE_MEDIA_QUERY as rt, bracketCardHeight as it, buildBracketCard as lt, buildBracketRounds as st } from "@bigplay/tree-view-core";
-const Le = { class: "tree-view-card" }, Ie = { class: "tree-view-card__label" }, Oe = ["aria-label"], Y = /* @__PURE__ */ D({
+import { defineComponent as P, openBlock as d, createElementBlock as c, createElementVNode as y, toDisplayString as E, withModifiers as ee, createCommentVNode as L, ref as g, watch as F, onBeforeUnmount as Y, computed as p, onMounted as Z, inject as re, nextTick as q, normalizeStyle as S, normalizeClass as M, unref as J, Fragment as R, renderList as N, renderSlot as V, createVNode as le, provide as ie, createTextVNode as se } from "vue";
+import { IDENTITY_TRANSFORM as de, PanZoomController as ce, toTree as ue, applyCollapsed as ve, layoutTree as pe, toggleCollapsed as fe, estimateVisibleRect as he, measureVisibleRect as be, DEFAULT_OVERSCAN as me, visibleLayout as ge, resolveOptions as te, roundContentHeight as we, toCssTransform as ke, DEFAULT_SCALE_LIMITS as _e, buildBracketCard as xe, MOBILE_MEDIA_QUERY as ye, DEFAULT_OPTIONS as Ce, levelGapForWidth as Te, buildBracketRounds as Ee, SWIPE_ELBOW_OFFSET as Se, roundSiblingGap as ze, watchMedia as $e, watchWidth as Be, watchChildren as Le, hideRoundsBefore as Ie, roundOfDepth as Oe, roundAtScroll as Me, findScrollParent as Re, nodesInColumn as De, horizontalBox as Ne, offsetWithin as He, smoothScrollLeft as Ae, roundScrollLeft as We, afterScrollEnd as X, injectStyles as Fe } from "@bigplay/tree-view-core";
+import { DEFAULT_OPTIONS as ht, MOBILE_MEDIA_QUERY as bt, bracketCardHeight as mt, buildBracketCard as gt, buildBracketRounds as wt } from "@bigplay/tree-view-core";
+const oe = /* @__PURE__ */ Symbol("tv-active-round"), Ve = { class: "tree-view-card" }, Pe = { class: "tree-view-card__label" }, Ge = ["aria-label"], ne = /* @__PURE__ */ P({
   __name: "TreeNodeCard",
   props: {
     label: {},
@@ -9,70 +9,70 @@ const Le = { class: "tree-view-card" }, Ie = { class: "tree-view-card__label" },
     collapsed: { type: Boolean }
   },
   emits: ["toggle"],
-  setup(o, { emit: c }) {
-    const i = c;
-    return (e, a) => (s(), d("div", Le, [
-      C("span", Ie, _(o.label), 1),
-      o.hasChildren ? (s(), d("button", {
+  setup(t, { emit: f }) {
+    const s = f;
+    return (e, r) => (d(), c("div", Ve, [
+      y("span", Pe, E(t.label), 1),
+      t.hasChildren ? (d(), c("button", {
         key: 0,
         type: "button",
         class: "tree-view-card__toggle",
         "data-tv-no-pan": "",
-        "aria-label": o.collapsed ? "Развернуть" : "Свернуть",
-        onClick: a[0] || (a[0] = Q((u) => i("toggle"), ["stop"]))
-      }, _(o.collapsed ? "+" : "−"), 9, Oe)) : z("", !0)
+        "aria-label": t.collapsed ? "Развернуть" : "Свернуть",
+        onClick: r[0] || (r[0] = ee((h) => s("toggle"), ["stop"]))
+      }, E(t.collapsed ? "+" : "−"), 9, Ge)) : L("", !0)
     ]));
   }
 });
-function Me(o) {
-  const c = g({ ...J }), i = new X({
-    pannable: o.pannable,
-    zoomable: o.zoomable,
-    limits: o.limits,
+function Ue(t) {
+  const f = g({ ...de }), s = new ce({
+    pannable: t.pannable,
+    zoomable: t.zoomable,
+    limits: t.limits,
     onChange: (e) => {
-      c.value = e;
+      f.value = e;
     }
   });
-  return O(
-    o.element,
-    (e, a, u) => {
-      e && (i.attach(e), u(() => i.detach()));
+  return F(
+    t.element,
+    (e, r, h) => {
+      e && (s.attach(e), h(() => s.detach()));
     },
     { immediate: !0 }
-  ), P(() => i.detach()), {
-    transform: c,
-    fit: (e, a) => i.fit(e, a),
-    zoomIn: () => i.zoomIn(),
-    zoomOut: () => i.zoomOut(),
-    reset: () => i.reset(),
-    setTransform: (e) => i.set(e)
+  ), Y(() => s.detach()), {
+    transform: f,
+    fit: (e, r) => s.fit(e, r),
+    zoomIn: () => s.zoomIn(),
+    zoomOut: () => s.zoomOut(),
+    reset: () => s.reset(),
+    setTransform: (e) => s.set(e)
   };
 }
-function Re(o) {
-  const c = g(/* @__PURE__ */ new Set()), i = f(() => ee(o.data(), o.accessors())), e = f(() => te(i.value, c.value)), a = f(() => oe(e.value, o.options()));
-  function u(b) {
-    return c.value.has(b);
+function je(t) {
+  const f = g(/* @__PURE__ */ new Set()), s = p(() => ue(t.data(), t.accessors())), e = p(() => ve(s.value, f.value)), r = p(() => pe(e.value, t.options()));
+  function h(b) {
+    return f.value.has(b);
   }
-  function m(b) {
-    c.value = ne(c.value, b);
+  function _(b) {
+    f.value = fe(f.value, b);
   }
   function l() {
-    c.value = /* @__PURE__ */ new Set();
+    f.value = /* @__PURE__ */ new Set();
   }
-  return { layout: a, isCollapsed: u, toggle: m, expandAll: l };
+  return { layout: r, isCollapsed: h, toggle: _, expandAll: l };
 }
-function De(o, c, i) {
-  const e = g(i() ? ae() : null);
-  function a() {
-    e.value = i() ? re(o.value, c()) : null;
+function Qe(t, f, s) {
+  const e = g(s() ? he() : null);
+  function r() {
+    e.value = s() ? be(t.value, f()) : null;
   }
-  return V(() => {
-    a(), window.addEventListener("scroll", a, { passive: !0, capture: !0 }), window.addEventListener("resize", a, { passive: !0 });
-  }), P(() => {
-    window.removeEventListener("scroll", a, { capture: !0 }), window.removeEventListener("resize", a);
-  }), { rect: e, update: a };
+  return Z(() => {
+    r(), window.addEventListener("scroll", r, { passive: !0, capture: !0 }), window.addEventListener("resize", r, { passive: !0 });
+  }), Y(() => {
+    window.removeEventListener("scroll", r, { capture: !0 }), window.removeEventListener("resize", r);
+  }), { rect: e, update: r };
 }
-const Ne = ["width", "height"], We = ["data-depth"], Fe = ["d"], He = ["data-depth", "onClick"], Ae = /* @__PURE__ */ D({
+const Ye = ["width", "height"], Ze = ["data-depth"], Ke = ["d"], qe = ["data-depth", "onClick"], Je = /* @__PURE__ */ P({
   __name: "TreeView",
   props: {
     data: {},
@@ -88,11 +88,11 @@ const Ne = ["width", "height"], We = ["data-depth"], Fe = ["d"], He = ["data-dep
     scaleLimits: { default: void 0 },
     nodeClass: { type: [String, Function], default: void 0 },
     virtualize: { type: Boolean, default: !0 },
-    overscan: { default: ie }
+    overscan: { default: me }
   },
   emits: ["node-click", "toggle", "transform"],
-  setup(o, { expose: c, emit: i }) {
-    const e = o, a = i, u = g(null), m = g(null), { layout: l, isCollapsed: b, toggle: r, expandAll: w } = Re({
+  setup(t, { expose: f, emit: s }) {
+    const e = t, r = s, h = g(null), _ = g(null), { layout: l, isCollapsed: b, toggle: u, expandAll: z } = je({
       data: () => e.data,
       options: () => e.options,
       accessors: () => ({
@@ -100,135 +100,143 @@ const Ne = ["width", "height"], We = ["data-depth"], Fe = ["d"], He = ["data-dep
         getChildren: e.getChildren,
         getParentId: e.getParentId
       })
-    }), p = Me({
-      element: u,
+    }), v = Ue({
+      element: h,
       pannable: () => e.pannable,
       zoomable: () => e.zoomable,
-      limits: () => e.scaleLimits ?? de
-    }), T = De(
-      m,
-      () => p.transform.value.scale,
+      limits: () => e.scaleLimits ?? _e
+    }), m = Qe(
+      _,
+      () => v.transform.value.scale,
       () => e.virtualize
-    ), $ = f(
-      () => e.virtualize ? le(l.value, T.rect.value, e.overscan) : l.value
-    ), k = f(() => ({
+    ), C = p(
+      () => e.virtualize ? ge(l.value, m.rect.value, e.overscan) : l.value
+    ), H = re(oe, g(null)), A = p(() => {
+      const o = te(e.options).direction;
+      return o === "right-to-left" || o === "bottom-to-top";
+    }), w = p(() => {
+      const o = H.value;
+      if (o === null) return l.value.height;
+      const x = l.value.nodes.reduce((B, Q) => Math.max(B, Q.depth), 0) + 1;
+      return we(l.value.nodes, o, x, A.value) || l.value.height;
+    }), G = p(() => ({
       width: `${l.value.width}px`,
-      height: `${l.value.height}px`,
-      transform: se(p.transform.value)
-    })), N = f(() => {
+      height: `${w.value}px`,
+      transform: ke(v.transform.value)
+    })), U = p(() => {
       if (e.size !== "content") return;
-      const { scale: n } = p.transform.value;
+      const { scale: o } = v.transform.value;
       return {
-        width: `${l.value.width * n}px`,
-        height: `${l.value.height * n}px`,
+        width: `${l.value.width * o}px`,
+        height: `${w.value * o}px`,
         overflow: "visible"
       };
     });
-    function W(n) {
+    function W(o) {
       return {
-        left: `${n.x}px`,
-        top: `${n.y}px`,
-        width: `${n.width}px`,
-        height: `${n.height}px`
+        left: `${o.x}px`,
+        top: `${o.y}px`,
+        width: `${o.width}px`,
+        height: `${o.height}px`
       };
     }
-    function F(n) {
-      return typeof e.nodeClass == "function" ? e.nodeClass(n) : e.nodeClass;
+    function j(o) {
+      return typeof e.nodeClass == "function" ? e.nodeClass(o) : e.nodeClass;
     }
-    function H(n) {
-      const x = n.data;
-      return x?.name ?? x?.title ?? x?.label ?? n.id;
+    function D(o) {
+      const x = o.data;
+      return x?.name ?? x?.title ?? x?.label ?? o.id;
     }
-    function y(n) {
-      r(n.id), a("toggle", n, b(n.id));
+    function $(o) {
+      u(o.id), r("toggle", o, b(o.id));
     }
-    function A(n, x) {
-      a("node-click", n, x), e.collapsible && n.hasChildren && y(n);
+    function I(o, x) {
+      r("node-click", o, x), e.collapsible && o.hasChildren && $(o);
     }
-    function B(n) {
-      p.fit({ width: l.value.width, height: l.value.height }, n);
+    function O(o) {
+      v.fit({ width: l.value.width, height: l.value.height }, o);
     }
-    return V(() => {
-      e.fitOnMount && U(() => B());
-    }), O(
-      () => p.transform.value,
-      (n) => {
-        T.update(), a("transform", n);
+    return Z(() => {
+      e.fitOnMount && q(() => O());
+    }), F(
+      () => v.transform.value,
+      (o) => {
+        m.update(), r("transform", o);
       }
-    ), O(l, () => {
-      U(() => T.update());
-    }), c({
-      fit: B,
-      zoomIn: p.zoomIn,
-      zoomOut: p.zoomOut,
-      resetTransform: p.reset,
-      setTransform: p.setTransform,
-      expandAll: w,
-      toggle: r,
+    ), F(l, () => {
+      q(() => m.update());
+    }), f({
+      fit: O,
+      zoomIn: v.zoomIn,
+      zoomOut: v.zoomOut,
+      resetTransform: v.reset,
+      setTransform: v.setTransform,
+      expandAll: z,
+      toggle: u,
       layout: l,
-      transform: p.transform
-    }), (n, x) => (s(), d("div", {
+      transform: v.transform
+    }), (o, x) => (d(), c("div", {
       ref_key: "rootElement",
-      ref: u,
-      class: E(["tree-view", { "tree-view--pannable": o.pannable, "tree-view--content": o.size === "content" }]),
-      style: S(N.value)
+      ref: h,
+      class: M(["tree-view", { "tree-view--pannable": t.pannable, "tree-view--content": t.size === "content" }]),
+      style: S(U.value)
     }, [
-      C("div", {
+      y("div", {
         ref_key: "canvasElement",
-        ref: m,
+        ref: _,
         class: "tree-view__canvas",
-        style: S(k.value)
+        style: S(G.value)
       }, [
-        (s(), d("svg", {
+        (d(), c("svg", {
           class: "tree-view__links",
-          width: j(l).width,
-          height: j(l).height
+          width: J(l).width,
+          height: J(l).height
         }, [
-          (s(!0), d(I, null, M($.value.links, (t) => (s(), d("g", {
-            key: t.id,
-            "data-depth": t.target.depth
+          (d(!0), c(R, null, N(C.value.links, (i) => (d(), c("g", {
+            key: i.id,
+            "data-depth": i.target.depth
           }, [
-            R(n.$slots, "link", { link: t }, () => [
-              C("path", {
+            V(o.$slots, "link", { link: i }, () => [
+              y("path", {
                 class: "tree-view__link",
-                d: t.path
-              }, null, 8, Fe)
+                d: i.path
+              }, null, 8, Ke)
             ])
-          ], 8, We))), 128))
-        ], 8, Ne)),
-        (s(!0), d(I, null, M($.value.nodes, (t) => (s(), d("div", {
-          key: t.id,
-          class: E(["tree-view__node", F(t)]),
-          style: S(W(t)),
-          "data-depth": t.depth,
-          onClick: (h) => A(t, h)
+          ], 8, Ze))), 128))
+        ], 8, Ye)),
+        (d(!0), c(R, null, N(C.value.nodes, (i) => (d(), c("div", {
+          key: i.id,
+          class: M(["tree-view__node", j(i)]),
+          style: S(W(i)),
+          "data-depth": i.depth,
+          onClick: (B) => I(i, B)
         }, [
-          R(n.$slots, "node", {
-            node: t,
-            data: t.data,
-            depth: t.depth,
-            collapsed: t.collapsed,
-            hasChildren: t.hasChildren,
-            toggle: () => y(t)
+          V(o.$slots, "node", {
+            node: i,
+            data: i.data,
+            depth: i.depth,
+            collapsed: i.collapsed,
+            hasChildren: i.hasChildren,
+            toggle: () => $(i)
           }, () => [
-            K(Y, {
-              label: H(t),
-              "has-children": t.hasChildren,
-              collapsed: t.collapsed,
-              onToggle: (h) => y(t)
+            le(ne, {
+              label: D(i),
+              "has-children": i.hasChildren,
+              collapsed: i.collapsed,
+              onToggle: (B) => $(i)
             }, null, 8, ["label", "has-children", "collapsed", "onToggle"])
           ])
-        ], 14, He))), 128))
+        ], 14, qe))), 128))
       ], 4)
     ], 6));
   }
-}), Pe = {
+}), Xe = {
   key: 0,
   class: "tv-bracket__hint"
-}, Ve = ["title", "aria-label", "aria-expanded"], Ge = { class: "tv-bracket__rows" }, Ue = ["title", "onClick", "onMouseenter"], je = {
+}, et = ["title", "aria-label", "aria-expanded"], tt = { class: "tv-bracket__rows" }, ot = ["title", "onClick", "onMouseenter"], nt = {
   key: 0,
   class: "tv-bracket__tooltip"
-}, Qe = { class: "tv-bracket__name" }, Ye = { class: "tv-bracket__score" }, Ze = /* @__PURE__ */ D({
+}, at = { class: "tv-bracket__name" }, rt = { class: "tv-bracket__score" }, lt = /* @__PURE__ */ P({
   __name: "BracketCard",
   props: {
     match: {},
@@ -242,51 +250,51 @@ const Ne = ["width", "height"], We = ["data-depth"], Fe = ["d"], He = ["data-dep
     expandHint: { default: "Показать предыдущие матчи" }
   },
   emits: ["select", "toggle"],
-  setup(o, { emit: c }) {
-    const i = o, e = c, a = g(null), u = f(
-      () => ce(i.match, { rows: i.rows, techDefeatLabel: i.techDefeatLabel })
+  setup(t, { emit: f }) {
+    const s = t, e = f, r = g(null), h = p(
+      () => xe(s.match, { rows: s.rows, techDefeatLabel: s.techDefeatLabel })
     );
-    function m(l) {
+    function _(l) {
       l.team && e("select", l.team, l);
     }
-    return (l, b) => (s(), d("div", {
-      class: E(["tv-bracket", { "tv-bracket--my-team": u.value.hasMyTeam }])
+    return (l, b) => (d(), c("div", {
+      class: M(["tv-bracket", { "tv-bracket--my-team": h.value.hasMyTeam }])
     }, [
-      u.value.hasMyTeam && o.myTeamHint ? (s(), d("div", Pe, _(o.myTeamHint), 1)) : z("", !0),
-      o.hasChildren ? (s(), d("button", {
+      h.value.hasMyTeam && t.myTeamHint ? (d(), c("div", Xe, E(t.myTeamHint), 1)) : L("", !0),
+      t.hasChildren ? (d(), c("button", {
         key: 1,
         type: "button",
-        class: E(["tv-bracket__toggle", { "tv-bracket__toggle--collapsed": o.collapsed }]),
-        title: o.collapsed ? o.expandHint : o.collapseHint,
-        "aria-label": o.collapsed ? o.expandHint : o.collapseHint,
-        "aria-expanded": !o.collapsed,
+        class: M(["tv-bracket__toggle", { "tv-bracket__toggle--collapsed": t.collapsed }]),
+        title: t.collapsed ? t.expandHint : t.collapseHint,
+        "aria-label": t.collapsed ? t.expandHint : t.collapseHint,
+        "aria-expanded": !t.collapsed,
         "data-tv-no-pan": "",
-        onClick: b[0] || (b[0] = Q((r) => e("toggle"), ["stop"]))
-      }, _(o.collapsed ? "+" : "−"), 11, Ve)) : z("", !0),
-      C("div", Ge, [
-        (s(!0), d(I, null, M(u.value.rows, (r) => (s(), d("div", {
-          key: r.key,
-          class: E(["tv-bracket__row", {
-            "tv-bracket__row--winner": r.isWinner,
-            "tv-bracket__row--loser": r.isLoser && !r.isEmpty,
-            "tv-bracket__row--my": r.isMyTeam,
-            "tv-bracket__row--empty": r.isEmpty
+        onClick: b[0] || (b[0] = ee((u) => e("toggle"), ["stop"]))
+      }, E(t.collapsed ? "+" : "−"), 11, et)) : L("", !0),
+      y("div", tt, [
+        (d(!0), c(R, null, N(h.value.rows, (u) => (d(), c("div", {
+          key: u.key,
+          class: M(["tv-bracket__row", {
+            "tv-bracket__row--winner": u.isWinner,
+            "tv-bracket__row--loser": u.isLoser && !u.isEmpty,
+            "tv-bracket__row--my": u.isMyTeam,
+            "tv-bracket__row--empty": u.isEmpty
           }]),
-          title: r.isMyTeam ? "Моя команда" : void 0,
-          onClick: (w) => m(r),
-          onMouseenter: (w) => a.value = r.key,
-          onMouseleave: b[1] || (b[1] = (w) => a.value = null)
+          title: u.isMyTeam ? "Моя команда" : void 0,
+          onClick: (z) => _(u),
+          onMouseenter: (z) => r.value = u.key,
+          onMouseleave: b[1] || (b[1] = (z) => r.value = null)
         }, [
-          r.team ? (s(), d(I, { key: 0 }, [
-            r.isTechDefeat && a.value === r.key ? (s(), d("span", je, _(o.techDefeatHint), 1)) : z("", !0),
-            C("span", Qe, _(r.team.name), 1),
-            C("span", Ye, _(r.score), 1)
-          ], 64)) : z("", !0)
-        ], 42, Ue))), 128))
+          u.team ? (d(), c(R, { key: 0 }, [
+            u.isTechDefeat && r.value === u.key ? (d(), c("span", nt, E(t.techDefeatHint), 1)) : L("", !0),
+            y("span", at, E(u.team.name), 1),
+            y("span", rt, E(u.score), 1)
+          ], 64)) : L("", !0)
+        ], 42, ot))), 128))
       ])
     ], 2));
   }
-}), Ke = ["onClick"], qe = /* @__PURE__ */ D({
+}), it = ["onClick"], st = /* @__PURE__ */ P({
   __name: "BracketRounds",
   props: {
     rounds: {},
@@ -295,131 +303,174 @@ const Ne = ["width", "height"], We = ["data-depth"], Fe = ["d"], He = ["data-dep
     swipeSiblingGap: { default: 12 },
     hidePassed: { type: Boolean, default: !0 },
     swipe: { type: Boolean, default: void 0 },
-    mobileQuery: { default: ve }
+    mobileQuery: { default: ye }
   },
   emits: ["select", "round"],
-  setup(o, { expose: c, emit: i }) {
-    const e = o, a = i, u = g(null), m = g(null), l = g(!1), b = g(0), r = g(0), w = f(() => e.isShow && (e.swipe ?? l.value)), p = f(() => ue(e.options)), T = f(
-      () => typeof p.value.nodeWidth == "number" ? p.value.nodeWidth : pe.nodeWidth
-    ), $ = f(
-      () => w.value ? fe(b.value, T.value) : p.value.levelGap
-    ), k = f(
-      () => he(e.rounds, { nodeWidth: T.value, levelGap: $.value })
-    ), N = f(
-      () => p.value.direction === "right-to-left" || p.value.direction === "bottom-to-top"
-    ), W = f(
-      () => w.value ? {
+  setup(t, { expose: f, emit: s }) {
+    const e = t, r = s, h = g(null), _ = g(null), l = g(null), b = g(null), u = g(!1), z = g(0), v = g(0), m = p(() => e.isShow && (e.swipe ?? u.value)), C = p(() => te(e.options)), H = p(
+      () => typeof C.value.nodeWidth == "number" ? C.value.nodeWidth : Ce.nodeWidth
+    ), A = p(
+      () => m.value ? Te(z.value, H.value) : C.value.levelGap
+    ), w = p(
+      () => Ee(e.rounds, { nodeWidth: H.value, levelGap: A.value })
+    ), G = p(
+      () => C.value.direction === "right-to-left" || C.value.direction === "bottom-to-top"
+    ), U = p(
+      () => m.value ? {
         ...e.options,
-        levelGap: $.value,
+        levelGap: A.value,
         levelLayout: "stack",
         siblingGap: e.swipeSiblingGap,
-        groupGap: (t, h) => we(h, e.swipeSiblingGap),
+        groupGap: (n, k) => ze(k, e.swipeSiblingGap),
         linkStyle: "bracket",
-        elbowOffset: e.options?.elbowOffset ?? be
+        elbowOffset: e.options?.elbowOffset ?? Se
       } : { ...e.options }
-    ), F = f(() => ({ width: `${k.value.width}px` })), H = f(
-      () => e.isShow ? { paddingLeft: `${k.value.offset}px` } : void 0
     );
-    function y() {
-      const t = m.value;
-      if (!t) return;
-      const h = w.value && e.hidePassed ? r.value : 0, v = k.value.columns.length;
-      xe(t, h, (L) => _e(L, v, N.value));
+    ie(
+      oe,
+      p(() => m.value ? v.value : null)
+    );
+    const W = p(() => ({ width: `${w.value.width}px` })), j = p(
+      () => e.isShow ? { paddingLeft: `${w.value.offset}px` } : void 0
+    );
+    function D() {
+      const n = b.value;
+      if (!n) return;
+      const k = m.value && e.hidePassed ? v.value : 0, a = w.value.columns.length;
+      Ie(n, k, (T) => Oe(T, a, G.value));
     }
-    function A() {
-      const t = u.value;
-      if (!t || !w.value) return;
-      const h = k.value.columns[0]?.width ?? 0, v = ye(t.scrollLeft, h, k.value.columns.length);
-      v !== r.value && (r.value = v, a("round", v));
+    let $ = !1, I = 0, O = !1;
+    function o(n) {
+      O || (O = !0, X(n, () => {
+        O = !1, I = v.value;
+      }));
     }
-    O([r, w, k], () => y());
-    const B = [];
-    V(() => {
-      B.push(
-        me(e.mobileQuery, (t) => {
-          l.value = t;
+    function x() {
+      const n = l.value;
+      if (!n || !m.value) return;
+      _.value && (_.value.scrollLeft = n.scrollLeft);
+      const k = w.value.columns[0]?.width ?? 0;
+      let a = Me(n.scrollLeft, k, w.value.columns.length);
+      if (!$ && k > 0) {
+        const T = Math.min(Math.max(a, I - 1), I + 1);
+        T !== a && (a = T, n.scrollLeft = a * k), o(n);
+      }
+      a !== v.value && (v.value = a, r("round", a));
+    }
+    F([v, m, w], () => D());
+    const i = [];
+    Z(() => {
+      i.push(
+        $e(e.mobileQuery, (n) => {
+          u.value = n;
         }),
-        ge(u.value?.parentElement, (t) => {
-          b.value = t;
+        Be(h.value?.parentElement, (n) => {
+          z.value = n;
         }),
         // Сетка перерисовывает карточки — скрытое расставляем заново.
-        ke(m.value, y)
-      ), y();
-    }), P(() => B.forEach((t) => t()));
-    function n(t) {
-      const h = u.value;
-      if (!h) return;
-      const v = w.value ? h : Ce(h);
-      if (!v) return;
-      const L = m.value, G = L ? Te(L, t.index, t.width, k.value.offset)[0] : void 0, Z = G ? ze(G, v) : { left: Se(h, v) + t.index * t.width, width: t.width };
-      Ee(
-        v,
-        $e({
-          ...Z,
-          viewport: v.clientWidth,
-          scrollWidth: v.scrollWidth
+        Le(b.value, D)
+      ), D();
+    }), Y(() => i.forEach((n) => n()));
+    function B(n) {
+      const k = h.value;
+      if (!k) return;
+      const a = m.value ? l.value : Re(k);
+      if (!a) return;
+      const T = b.value, K = T ? De(T, n.index, n.width, w.value.offset)[0] : void 0, ae = K ? Ne(K, a) : { left: He(k, a) + n.index * n.width, width: n.width };
+      $ = !0, Ae(
+        a,
+        We({
+          ...ae,
+          viewport: a.clientWidth,
+          scrollWidth: a.scrollWidth
         })
-      );
+      ), X(a, () => {
+        $ = !1, I = v.value;
+      });
     }
-    function x(t) {
-      a("select", t), n(t);
+    function Q(n) {
+      r("select", n), B(n);
     }
-    return c({ scrollToRound: n }), (t, h) => (s(), d("div", {
+    return f({ scrollToRound: B }), (n, k) => (d(), c("div", {
       ref_key: "rootElement",
-      ref: u,
-      class: E(["tv-rounds", { "tv-rounds--swipe": w.value }]),
-      onScroll: A
+      ref: h,
+      class: M(["tv-rounds", { "tv-rounds--swipe": m.value }])
     }, [
-      o.isShow ? (s(), d("div", {
+      t.isShow ? (d(), c("div", {
         key: 0,
-        class: "tv-rounds__bar",
-        style: S(F.value)
+        ref_key: "headElement",
+        ref: _,
+        class: "tv-rounds__head"
       }, [
-        (s(!0), d(I, null, M(k.value.columns, (v) => (s(), d("div", {
-          key: v.key,
-          class: "tv-rounds__item",
-          style: S({ width: `${v.width}px` }),
-          onClick: (L) => x(v)
+        y("div", {
+          class: "tv-rounds__bar",
+          style: S(W.value)
         }, [
-          R(t.$slots, "round", { round: v }, () => [
-            q(_(v.name), 1)
-          ])
-        ], 12, Ke))), 128))
-      ], 4)) : z("", !0),
-      C("div", {
-        ref_key: "contentElement",
-        ref: m,
-        class: "tv-rounds__content",
-        style: S(H.value)
+          (d(!0), c(R, null, N(w.value.columns, (a) => (d(), c("div", {
+            key: a.key,
+            class: "tv-rounds__item",
+            style: S({ width: `${a.width}px` }),
+            onClick: (T) => Q(a)
+          }, [
+            V(n.$slots, "round", { round: a }, () => [
+              se(E(a.name), 1)
+            ])
+          ], 12, it))), 128))
+        ], 4)
+      ], 512)) : L("", !0),
+      y("div", {
+        ref_key: "scrollElement",
+        ref: l,
+        class: "tv-rounds__scroll",
+        onScroll: x
       }, [
-        R(t.$slots, "default", {
-          options: W.value,
-          isSwipe: w.value,
-          round: r.value
-        })
-      ], 4)
-    ], 34));
+        m.value ? (d(), c("div", {
+          key: 0,
+          class: "tv-rounds__snap",
+          style: S(W.value),
+          "aria-hidden": "true"
+        }, [
+          (d(!0), c(R, null, N(w.value.columns, (a) => (d(), c("i", {
+            key: a.key,
+            class: "tv-rounds__snap-item",
+            style: S({ width: `${a.width}px` })
+          }, null, 4))), 128))
+        ], 4)) : L("", !0),
+        y("div", {
+          ref_key: "contentElement",
+          ref: b,
+          class: "tv-rounds__content",
+          style: S(j.value)
+        }, [
+          V(n.$slots, "default", {
+            options: U.value,
+            isSwipe: m.value,
+            round: v.value
+          })
+        ], 4)
+      ], 544)
+    ], 2));
   }
-}), Je = ".tree-view{--tv-link-color: #cbd5e1;--tv-link-width: 2px;--tv-node-bg: #ffffff;--tv-node-color: #0f172a;--tv-node-border: 1px solid #e2e8f0;--tv-node-radius: 10px;--tv-node-shadow: 0 1px 2px rgb(15 23 42 / 8%);--tv-node-padding: 8px 12px;--tv-accent: #2563eb;position:relative;width:100%;height:100%;overflow:hidden}.tree-view--pannable{cursor:grab;touch-action:none}.tree-view--content{width:auto;height:auto;overflow:visible}.tree-view__canvas{position:absolute;top:0;left:0;transform-origin:0 0}.tree-view__links{position:absolute;top:0;left:0;overflow:visible;pointer-events:none}.tree-view__link{fill:none;stroke:var(--tv-link-color);stroke-width:var(--tv-link-width)}.tree-view__node{position:absolute;box-sizing:border-box;display:flex;align-items:stretch;justify-content:stretch}.tree-view-card{box-sizing:border-box;display:flex;gap:8px;align-items:center;justify-content:space-between;width:100%;height:100%;padding:var(--tv-node-padding);overflow:hidden;color:var(--tv-node-color);background:var(--tv-node-bg);border:var(--tv-node-border);border-radius:var(--tv-node-radius);box-shadow:var(--tv-node-shadow)}.tree-view-card__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-view-card__toggle{flex:none;width:20px;height:20px;padding:0;font:inherit;line-height:1;color:var(--tv-accent);cursor:pointer;background:none;border:none}.tv-bracket{--tv-bracket-winner-bg: #0427c4;--tv-bracket-winner-color: #ffffff;--tv-bracket-loser-bg: #e5e5e5;--tv-bracket-loser-color: #7d7d8d;--tv-bracket-my-bg: #00146c;--tv-bracket-my-color: #ffffff;--tv-bracket-radius: 6px;--tv-bracket-shadow: 0 0 0 1px rgb(15 23 42 / 8%), 0 1px 3px rgb(15 23 42 / 10%);position:relative;box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%;font-size:12px}.tv-bracket__rows{box-sizing:border-box;display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden;border-radius:var(--tv-bracket-radius);box-shadow:var(--tv-bracket-shadow)}.tv-bracket--my-team .tv-bracket__rows{outline:2px solid var(--tv-bracket-my-bg)}.tv-bracket__hint{position:absolute;right:0;bottom:100%;left:0;padding:3px 8px;overflow:hidden;font-size:11px;font-weight:600;line-height:1.2;color:var(--tv-bracket-my-color);text-align:center;text-overflow:ellipsis;white-space:nowrap;background:var(--tv-bracket-my-bg);border-radius:var(--tv-bracket-radius) var(--tv-bracket-radius) 0 0}.tv-bracket__row{position:relative;box-sizing:border-box;display:flex;flex:1 1 0;align-items:center;justify-content:space-between;min-height:0;padding:4px 8px;cursor:pointer;transition:all 75ms}.tv-bracket__row--winner{font-weight:700;color:var(--tv-bracket-winner-color);background:var(--tv-bracket-winner-bg)}.tv-bracket__row--loser{color:var(--tv-bracket-loser-color);background:var(--tv-bracket-loser-bg)}.tv-bracket__row--my{color:var(--tv-bracket-my-color);background:var(--tv-bracket-my-bg)}.tv-bracket__row--empty{cursor:default;background:var(--tv-bracket-loser-bg)}.tv-bracket__toggle{position:absolute;top:50%;left:-11px;z-index:1;display:flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;font:inherit;font-size:13px;font-weight:700;line-height:1;color:var(--tv-bracket-winner-bg);cursor:pointer;background:#fff;border:1px solid #d1d5db;border-radius:50%;box-shadow:0 1px 3px #0f172a2e;transform:translateY(-50%)}.tv-bracket__toggle:hover{border-color:var(--tv-bracket-winner-bg)}.tv-bracket__toggle--collapsed{color:var(--tv-bracket-winner-color);background:var(--tv-bracket-winner-bg);border-color:var(--tv-bracket-winner-bg)}.tv-bracket__name{max-width:120px;overflow:hidden;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.tv-bracket__score{display:flex;flex:none;align-items:center;justify-content:center;width:20px;height:20px;font-weight:700;font-variant-numeric:tabular-nums}.tv-bracket__tooltip{position:absolute;top:-26px;left:6px;z-index:5000;padding:4px 8px;font-weight:400;color:var(--tv-bracket-loser-color);white-space:nowrap;background:#fff;border:1px solid #d1d5db;border-radius:4px;box-shadow:0 4px 10px #0f172a26}.tv-rounds{--tv-rounds-bg: #f5f5f7;--tv-rounds-color: #9ca3af;--tv-rounds-border: 2px solid #e5e7eb;--tv-rounds-gap: 20px;--tv-rounds-fade: .22s;--tv-rounds-collapse-scale: .86;--tv-rounds-collapse-ease: cubic-bezier(.4, 0, .2, 1);--tv-rounds-link-color: #94a3b8;--tv-rounds-link-width: 3px;display:flex;flex-direction:column;width:max-content;min-width:100%}.tv-rounds__bar{display:flex;min-width:100%;margin-bottom:var(--tv-rounds-gap);background:var(--tv-rounds-bg);border-bottom:var(--tv-rounds-border)}.tv-rounds__item{flex:none;box-sizing:border-box;padding:10px 20px;font:inherit;font-size:14px;font-weight:600;color:var(--tv-rounds-color);text-align:center;text-transform:uppercase;white-space:nowrap;background:none;border:none;border-right:var(--tv-rounds-border)}.tv-rounds--swipe .tv-bracket__hint{display:none}.tv-rounds--swipe .tree-view{--tv-link-color: var(--tv-rounds-link-color);--tv-link-width: var(--tv-rounds-link-width)}.tv-rounds--swipe{width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}.tv-rounds--swipe::-webkit-scrollbar{display:none}.tv-rounds--swipe .tv-rounds__item{scroll-snap-align:start;scroll-snap-stop:always}.tv-rounds--swipe [data-depth]{transition:opacity var(--tv-rounds-fade, .22s) ease,transform var(--tv-rounds-fade, .22s) var(--tv-rounds-collapse-ease)}.tv-rounds--swipe [data-depth].tv-hidden{visibility:hidden;opacity:0;transition:opacity var(--tv-rounds-fade, .22s) ease,transform var(--tv-rounds-fade, .22s) var(--tv-rounds-collapse-ease),visibility 0s linear var(--tv-rounds-fade, .22s)}.tv-rounds--swipe .tree-view__node.tv-hidden{transform:scale(var(--tv-rounds-collapse-scale));transform-origin:right center}.tv-hidden{visibility:hidden}@media(prefers-reduced-motion:reduce){.tv-rounds--swipe [data-depth],.tv-rounds--swipe [data-depth].tv-hidden{transition:none}.tv-rounds--swipe .tree-view__node.tv-hidden{transform:none}}";
-Be(Je);
-const tt = {
-  install(o) {
-    o.component("TreeView", Ae), o.component("TreeNodeCard", Y), o.component("BracketCard", Ze), o.component("BracketRounds", qe);
+}), dt = ".tree-view{--tv-link-color: #cbd5e1;--tv-link-width: 2px;--tv-node-bg: #ffffff;--tv-node-color: #0f172a;--tv-node-border: 1px solid #e2e8f0;--tv-node-radius: 10px;--tv-node-shadow: 0 1px 2px rgb(15 23 42 / 8%);--tv-node-padding: 8px 12px;--tv-accent: #2563eb;position:relative;width:100%;height:100%;overflow:hidden}.tree-view--pannable{cursor:grab;touch-action:none}.tree-view--content{width:auto;height:auto;overflow:visible}.tree-view__canvas{position:absolute;top:0;left:0;transform-origin:0 0}.tree-view__links{position:absolute;top:0;left:0;overflow:visible;pointer-events:none}.tree-view__link{fill:none;stroke:var(--tv-link-color);stroke-width:var(--tv-link-width)}.tree-view__node{position:absolute;box-sizing:border-box;display:flex;align-items:stretch;justify-content:stretch}.tree-view-card{box-sizing:border-box;display:flex;gap:8px;align-items:center;justify-content:space-between;width:100%;height:100%;padding:var(--tv-node-padding);overflow:hidden;color:var(--tv-node-color);background:var(--tv-node-bg);border:var(--tv-node-border);border-radius:var(--tv-node-radius);box-shadow:var(--tv-node-shadow)}.tree-view-card__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-view-card__toggle{flex:none;width:20px;height:20px;padding:0;font:inherit;line-height:1;color:var(--tv-accent);cursor:pointer;background:none;border:none}.tv-bracket{--tv-bracket-winner-bg: #0427c4;--tv-bracket-winner-color: #ffffff;--tv-bracket-loser-bg: #e5e5e5;--tv-bracket-loser-color: #7d7d8d;--tv-bracket-my-bg: #00146c;--tv-bracket-my-color: #ffffff;--tv-bracket-radius: 6px;--tv-bracket-shadow: 0 0 0 1px rgb(15 23 42 / 8%), 0 1px 3px rgb(15 23 42 / 10%);position:relative;box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%;font-size:12px}.tv-bracket__rows{box-sizing:border-box;display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden;border-radius:var(--tv-bracket-radius);box-shadow:var(--tv-bracket-shadow)}.tv-bracket--my-team .tv-bracket__rows{outline:2px solid var(--tv-bracket-my-bg)}.tv-bracket__hint{position:absolute;right:0;bottom:100%;left:0;padding:3px 8px;overflow:hidden;font-size:11px;font-weight:600;line-height:1.2;color:var(--tv-bracket-my-color);text-align:center;text-overflow:ellipsis;white-space:nowrap;background:var(--tv-bracket-my-bg);border-radius:var(--tv-bracket-radius) var(--tv-bracket-radius) 0 0}.tv-bracket__row{position:relative;box-sizing:border-box;display:flex;flex:1 1 0;align-items:center;justify-content:space-between;min-height:0;padding:4px 8px;cursor:pointer;transition:all 75ms}.tv-bracket__row--winner{font-weight:700;color:var(--tv-bracket-winner-color);background:var(--tv-bracket-winner-bg)}.tv-bracket__row--loser{color:var(--tv-bracket-loser-color);background:var(--tv-bracket-loser-bg)}.tv-bracket__row--my{color:var(--tv-bracket-my-color);background:var(--tv-bracket-my-bg)}.tv-bracket__row--empty{cursor:default;background:var(--tv-bracket-loser-bg)}.tv-bracket__toggle{position:absolute;top:50%;left:-11px;z-index:1;display:flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;font:inherit;font-size:13px;font-weight:700;line-height:1;color:var(--tv-bracket-winner-bg);cursor:pointer;background:#fff;border:1px solid #d1d5db;border-radius:50%;box-shadow:0 1px 3px #0f172a2e;transform:translateY(-50%)}.tv-bracket__toggle:hover{border-color:var(--tv-bracket-winner-bg)}.tv-bracket__toggle--collapsed{color:var(--tv-bracket-winner-color);background:var(--tv-bracket-winner-bg);border-color:var(--tv-bracket-winner-bg)}.tv-bracket__name{max-width:120px;overflow:hidden;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.tv-bracket__score{display:flex;flex:none;align-items:center;justify-content:center;width:20px;height:20px;font-weight:700;font-variant-numeric:tabular-nums}.tv-bracket__tooltip{position:absolute;top:-26px;left:6px;z-index:5000;padding:4px 8px;font-weight:400;color:var(--tv-bracket-loser-color);white-space:nowrap;background:#fff;border:1px solid #d1d5db;border-radius:4px;box-shadow:0 4px 10px #0f172a26}.tv-rounds{--tv-rounds-bg: #f5f5f7;--tv-rounds-color: #9ca3af;--tv-rounds-border: 2px solid #e5e7eb;--tv-rounds-gap: 20px;--tv-rounds-fade: .22s;--tv-rounds-collapse-scale: .86;--tv-rounds-collapse-ease: cubic-bezier(.4, 0, .2, 1);--tv-rounds-link-color: #94a3b8;--tv-rounds-link-width: 3px;display:flex;flex-direction:column;width:max-content;min-width:100%}.tv-rounds__head{position:sticky;top:0;z-index:2;overflow:hidden;margin-bottom:var(--tv-rounds-gap);background:var(--tv-rounds-bg);border-bottom:var(--tv-rounds-border)}.tv-rounds__bar{display:flex;min-width:100%}.tv-rounds__scroll{position:relative}.tv-rounds__snap{display:flex;height:1px;margin-bottom:-1px}.tv-rounds__snap-item{flex:none;display:block}.tv-rounds__item{flex:none;box-sizing:border-box;padding:10px 20px;font:inherit;font-size:14px;font-weight:600;color:var(--tv-rounds-color);text-align:center;text-transform:uppercase;white-space:nowrap;background:none;border:none;border-right:var(--tv-rounds-border)}.tv-rounds--swipe .tv-bracket__hint{display:none}.tv-rounds--swipe .tree-view{--tv-link-color: var(--tv-rounds-link-color);--tv-link-width: var(--tv-rounds-link-width)}.tv-rounds--swipe{width:100%;min-width:0}.tv-rounds--swipe .tv-rounds__scroll{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}.tv-rounds--swipe .tv-rounds__scroll::-webkit-scrollbar{display:none}.tv-rounds--swipe .tv-rounds__snap-item{scroll-snap-align:start;scroll-snap-stop:always}.tv-rounds--swipe [data-depth]{transition:none}.tv-rounds--swipe [data-depth].tv-hidden{visibility:hidden;opacity:0;transition:opacity var(--tv-rounds-fade, .22s) ease,transform var(--tv-rounds-fade, .22s) var(--tv-rounds-collapse-ease),visibility 0s linear var(--tv-rounds-fade, .22s)}.tv-rounds--swipe .tree-view__node.tv-hidden{transform:scale(var(--tv-rounds-collapse-scale));transform-origin:right center}.tv-hidden{visibility:hidden}@media(prefers-reduced-motion:reduce){.tv-rounds--swipe [data-depth],.tv-rounds--swipe [data-depth].tv-hidden{transition:none}.tv-rounds--swipe .tree-view__node.tv-hidden{transform:none}}";
+Fe(dt);
+const vt = {
+  install(t) {
+    t.component("TreeView", Je), t.component("TreeNodeCard", ne), t.component("BracketCard", lt), t.component("BracketRounds", st);
   }
 };
 export {
-  Ze as BracketCard,
-  qe as BracketRounds,
-  at as DEFAULT_OPTIONS,
-  rt as MOBILE_MEDIA_QUERY,
-  Y as TreeNodeCard,
-  Ae as TreeView,
-  tt as TreeViewPlugin,
-  it as bracketCardHeight,
-  lt as buildBracketCard,
-  st as buildBracketRounds,
-  tt as default,
-  Me as usePanZoom,
-  Re as useTreeLayout
+  lt as BracketCard,
+  st as BracketRounds,
+  ht as DEFAULT_OPTIONS,
+  bt as MOBILE_MEDIA_QUERY,
+  ne as TreeNodeCard,
+  Je as TreeView,
+  vt as TreeViewPlugin,
+  mt as bracketCardHeight,
+  gt as buildBracketCard,
+  wt as buildBracketRounds,
+  vt as default,
+  Ue as usePanZoom,
+  je as useTreeLayout
 };
 //# sourceMappingURL=index.js.map