@bigplay/tree-view 0.4.0 → 0.6.0

package/dist/index.js

@@ -1,7 +1,7 @@
-import { defineComponent as D, openBlock as c, createElementBlock as u, createElementVNode as z, toDisplayString as x, withModifiers as Z, createCommentVNode as B, ref as g, watch as O, onBeforeUnmount as P, computed as h, onMounted as G, nextTick as U, normalizeStyle as T, normalizeClass as L, 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 ue, resolveOptions as ve, DEFAULT_OPTIONS as pe, levelGapForWidth as he, buildBracketRounds as fe, roundSiblingGap as be, watchMedia as me, watchWidth as we, watchChildren as ge, hideRoundsBefore as ke, roundOfDepth as _e, roundAtScroll as ye, findScrollParent as xe, nodesInColumn as Ce, horizontalBox as Te, offsetWithin as ze, smoothScrollLeft as Se, roundScrollLeft as $e, injectStyles as Ee } from "@bigplay/tree-view-core";
-import { DEFAULT_OPTIONS as tt, MOBILE_MEDIA_QUERY as ot, bracketCardHeight as nt, buildBracketCard as at, buildBracketRounds as rt } from "@bigplay/tree-view-core";
-const Be = { class: "tree-view-card" }, Le = { class: "tree-view-card__label" }, Ie = ["aria-label"], Q = /* @__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 Be = { class: "tree-view-card" }, Le = { class: "tree-view-card__label" },
     collapsed: { type: Boolean }
   },
   emits: ["toggle"],
-  setup(o, { emit: s }) {
-    const r = s;
-    return (e, a) => (c(), u("div", Be, [
-      z("span", Le, x(o.label), 1),
-      o.hasChildren ? (c(), u("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] = Z((v) => r("toggle"), ["stop"]))
-      }, x(o.collapsed ? "+" : "−"), 9, Ie)) : B("", !0)
+        "aria-label": t.collapsed ? "Развернуть" : "Свернуть",
+        onClick: r[0] || (r[0] = ee((h) => s("toggle"), ["stop"]))
+      }, E(t.collapsed ? "+" : "−"), 9, Ge)) : L("", !0)
     ]));
   }
 });
-function Oe(o) {
-  const s = g({ ...J }), r = 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) => {
-      s.value = e;
+      f.value = e;
     }
   });
-  return O(
-    o.element,
-    (e, a, v) => {
-      e && (r.attach(e), v(() => r.detach()));
+  return F(
+    t.element,
+    (e, r, h) => {
+      e && (s.attach(e), h(() => s.detach()));
     },
     { immediate: !0 }
-  ), P(() => r.detach()), {
-    transform: s,
-    fit: (e, a) => r.fit(e, a),
-    zoomIn: () => r.zoomIn(),
-    zoomOut: () => r.zoomOut(),
-    reset: () => r.reset(),
-    setTransform: (e) => r.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 Me(o) {
-  const s = g(/* @__PURE__ */ new Set()), r = h(() => ee(o.data(), o.accessors())), e = h(() => te(r.value, s.value)), a = h(() => oe(e.value, o.options()));
-  function v(w) {
-    return s.value.has(w);
+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(w) {
-    s.value = ne(s.value, w);
+  function _(b) {
+    f.value = fe(f.value, b);
   }
   function l() {
-    s.value = /* @__PURE__ */ new Set();
+    f.value = /* @__PURE__ */ new Set();
   }
-  return { layout: a, isCollapsed: v, toggle: m, expandAll: l };
+  return { layout: r, isCollapsed: h, toggle: _, expandAll: l };
 }
-function Re(o, s, r) {
-  const e = g(r() ? ae() : null);
-  function a() {
-    e.value = r() ? re(o.value, s()) : null;
+function Qe(t, f, s) {
+  const e = g(s() ? he() : null);
+  function r() {
+    e.value = s() ? be(t.value, f()) : null;
   }
-  return G(() => {
-    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 De = ["width", "height"], Ne = ["data-depth"], Ae = ["d"], Ve = ["data-depth", "onClick"], We = /* @__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 De = ["width", "height"], Ne = ["data-depth"], Ae = ["d"], Ve = ["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: s, emit: r }) {
-    const e = o, a = r, v = g(null), m = g(null), { layout: l, isCollapsed: w, toggle: i, expandAll: b } = Me({
+  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,177 +100,201 @@ const De = ["width", "height"], Ne = ["data-depth"], Ae = ["d"], Ve = ["data-dep
         getChildren: e.getChildren,
         getParentId: e.getParentId
       })
-    }), p = Oe({
-      element: v,
+    }), v = Ue({
+      element: h,
       pannable: () => e.pannable,
       zoomable: () => e.zoomable,
-      limits: () => e.scaleLimits ?? de
-    }), C = Re(
-      m,
-      () => p.transform.value.scale,
+      limits: () => e.scaleLimits ?? _e
+    }), m = Qe(
+      _,
+      () => v.transform.value.scale,
       () => e.virtualize
-    ), S = h(
-      () => e.virtualize ? le(l.value, C.rect.value, e.overscan) : l.value
-    ), k = h(() => ({
+    ), 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 = h(() => {
+      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 A(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 V(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 W(n) {
-      const _ = n.data;
-      return _?.name ?? _?.title ?? _?.label ?? n.id;
+    function D(o) {
+      const x = o.data;
+      return x?.name ?? x?.title ?? x?.label ?? o.id;
     }
-    function y(n) {
-      i(n.id), a("toggle", n, w(n.id));
+    function $(o) {
+      u(o.id), r("toggle", o, b(o.id));
     }
-    function F(n, _) {
-      a("node-click", n, _), e.collapsible && n.hasChildren && y(n);
+    function I(o, x) {
+      r("node-click", o, x), e.collapsible && o.hasChildren && $(o);
     }
-    function $(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 G(() => {
-      e.fitOnMount && U(() => $());
-    }), O(
-      () => p.transform.value,
-      (n) => {
-        C.update(), a("transform", n);
+    return Z(() => {
+      e.fitOnMount && q(() => O());
+    }), F(
+      () => v.transform.value,
+      (o) => {
+        m.update(), r("transform", o);
       }
-    ), O(l, () => {
-      U(() => C.update());
-    }), s({
-      fit: $,
-      zoomIn: p.zoomIn,
-      zoomOut: p.zoomOut,
-      resetTransform: p.reset,
-      setTransform: p.setTransform,
-      expandAll: b,
-      toggle: i,
+    ), 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, _) => (c(), u("div", {
+      transform: v.transform
+    }), (o, x) => (d(), c("div", {
       ref_key: "rootElement",
-      ref: v,
-      class: L(["tree-view", { "tree-view--pannable": o.pannable, "tree-view--content": o.size === "content" }]),
-      style: T(N.value)
+      ref: h,
+      class: M(["tree-view", { "tree-view--pannable": t.pannable, "tree-view--content": t.size === "content" }]),
+      style: S(U.value)
     }, [
-      z("div", {
+      y("div", {
         ref_key: "canvasElement",
-        ref: m,
+        ref: _,
         class: "tree-view__canvas",
-        style: T(k.value)
+        style: S(G.value)
       }, [
-        (c(), u("svg", {
+        (d(), c("svg", {
           class: "tree-view__links",
-          width: j(l).width,
-          height: j(l).height
+          width: J(l).width,
+          height: J(l).height
         }, [
-          (c(!0), u(I, null, M(S.value.links, (t) => (c(), u("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 }, () => [
-              z("path", {
+            V(o.$slots, "link", { link: i }, () => [
+              y("path", {
                 class: "tree-view__link",
-                d: t.path
-              }, null, 8, Ae)
+                d: i.path
+              }, null, 8, Ke)
             ])
-          ], 8, Ne))), 128))
-        ], 8, De)),
-        (c(!0), u(I, null, M(S.value.nodes, (t) => (c(), u("div", {
-          key: t.id,
-          class: L(["tree-view__node", V(t)]),
-          style: T(A(t)),
-          "data-depth": t.depth,
-          onClick: (f) => F(t, f)
+          ], 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(Q, {
-              label: W(t),
-              "has-children": t.hasChildren,
-              collapsed: t.collapsed,
-              onToggle: (f) => 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, Ve))), 128))
+        ], 14, qe))), 128))
       ], 4)
     ], 6));
   }
-}), Fe = {
+}), Xe = {
   key: 0,
   class: "tv-bracket__hint"
-}, Pe = ["title", "onClick", "onMouseenter"], Ge = {
+}, et = ["title", "aria-label", "aria-expanded"], tt = { class: "tv-bracket__rows" }, ot = ["title", "onClick", "onMouseenter"], nt = {
   key: 0,
   class: "tv-bracket__tooltip"
-}, He = { class: "tv-bracket__name" }, Ue = { class: "tv-bracket__score" }, je = /* @__PURE__ */ D({
+}, at = { class: "tv-bracket__name" }, rt = { class: "tv-bracket__score" }, lt = /* @__PURE__ */ P({
   __name: "BracketCard",
   props: {
     match: {},
     rows: { default: void 0 },
     myTeamHint: { default: "Нажми для перехода в матч 👇" },
     techDefeatLabel: { default: "ТП" },
-    techDefeatHint: { default: "Техническое поражение" }
+    techDefeatHint: { default: "Техническое поражение" },
+    hasChildren: { type: Boolean, default: !1 },
+    collapsed: { type: Boolean, default: !1 },
+    collapseHint: { default: "Свернуть предыдущие матчи" },
+    expandHint: { default: "Показать предыдущие матчи" }
   },
-  emits: ["select"],
-  setup(o, { emit: s }) {
-    const r = o, e = s, a = g(null), v = h(
-      () => ce(r.match, { rows: r.rows, techDefeatLabel: r.techDefeatLabel })
+  emits: ["select", "toggle"],
+  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, w) => (c(), u("div", {
-      class: L(["tv-bracket", { "tv-bracket--my-team": v.value.hasMyTeam }])
+    return (l, b) => (d(), c("div", {
+      class: M(["tv-bracket", { "tv-bracket--my-team": h.value.hasMyTeam }])
     }, [
-      v.value.hasMyTeam && o.myTeamHint ? (c(), u("div", Fe, x(o.myTeamHint), 1)) : B("", !0),
-      (c(!0), u(I, null, M(v.value.rows, (i) => (c(), u("div", {
-        key: i.key,
-        class: L(["tv-bracket__row", {
-          "tv-bracket__row--winner": i.isWinner,
-          "tv-bracket__row--loser": i.isLoser && !i.isEmpty,
-          "tv-bracket__row--my": i.isMyTeam,
-          "tv-bracket__row--empty": i.isEmpty
-        }]),
-        title: i.isMyTeam ? "Моя команда" : void 0,
-        onClick: (b) => m(i),
-        onMouseenter: (b) => a.value = i.key,
-        onMouseleave: w[0] || (w[0] = (b) => a.value = null)
-      }, [
-        i.team ? (c(), u(I, { key: 0 }, [
-          i.isTechDefeat && a.value === i.key ? (c(), u("span", Ge, x(o.techDefeatHint), 1)) : B("", !0),
-          z("span", He, x(i.team.name), 1),
-          z("span", Ue, x(i.score), 1)
-        ], 64)) : B("", !0)
-      ], 42, Pe))), 128))
+      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: 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] = 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: u.isMyTeam ? "Моя команда" : void 0,
+          onClick: (z) => _(u),
+          onMouseenter: (z) => r.value = u.key,
+          onMouseleave: b[1] || (b[1] = (z) => r.value = null)
+        }, [
+          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));
   }
-}), Qe = ["onClick"], Ye = /* @__PURE__ */ D({
+}), it = ["onClick"], st = /* @__PURE__ */ P({
   __name: "BracketRounds",
   props: {
     rounds: {},
@@ -279,128 +303,174 @@ const De = ["width", "height"], Ne = ["data-depth"], Ae = ["d"], Ve = ["data-dep
     swipeSiblingGap: { default: 12 },
     hidePassed: { type: Boolean, default: !0 },
     swipe: { type: Boolean, default: void 0 },
-    mobileQuery: { default: ue }
+    mobileQuery: { default: ye }
   },
   emits: ["select", "round"],
-  setup(o, { expose: s, emit: r }) {
-    const e = o, a = r, v = g(null), m = g(null), l = g(!1), w = g(0), i = g(0), b = h(() => e.isShow && (e.swipe ?? l.value)), p = h(() => ve(e.options)), C = h(
-      () => typeof p.value.nodeWidth == "number" ? p.value.nodeWidth : pe.nodeWidth
-    ), S = h(
-      () => b.value ? he(w.value, C.value) : p.value.levelGap
-    ), k = h(
-      () => fe(e.rounds, { nodeWidth: C.value, levelGap: S.value })
-    ), N = h(
-      () => p.value.direction === "right-to-left" || p.value.direction === "bottom-to-top"
-    ), A = h(
-      () => b.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: S.value,
+        levelGap: A.value,
         levelLayout: "stack",
-        siblingGap: (t, f) => be(f, e.swipeSiblingGap)
+        siblingGap: e.swipeSiblingGap,
+        groupGap: (n, k) => ze(k, e.swipeSiblingGap),
+        linkStyle: "bracket",
+        elbowOffset: e.options?.elbowOffset ?? Se
       } : { ...e.options }
-    ), V = h(() => ({ width: `${k.value.width}px` })), W = h(
-      () => e.isShow ? { paddingLeft: `${k.value.offset}px` } : void 0
     );
-    function y() {
-      const t = m.value;
-      if (!t) return;
-      const f = b.value && e.hidePassed ? i.value : 0, d = k.value.columns.length;
-      ke(t, f, (E) => _e(E, d, 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 F() {
-      const t = v.value;
-      if (!t || !b.value) return;
-      const f = k.value.columns[0]?.width ?? 0, d = ye(t.scrollLeft, f, k.value.columns.length);
-      d !== i.value && (i.value = d, a("round", d));
+    let $ = !1, I = 0, O = !1;
+    function o(n) {
+      O || (O = !0, X(n, () => {
+        O = !1, I = v.value;
+      }));
+    }
+    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));
     }
-    O([i, b, k], () => y());
-    const $ = [];
-    G(() => {
-      $.push(
-        me(e.mobileQuery, (t) => {
-          l.value = t;
+    F([v, m, w], () => D());
+    const i = [];
+    Z(() => {
+      i.push(
+        $e(e.mobileQuery, (n) => {
+          u.value = n;
         }),
-        we(v.value?.parentElement, (t) => {
-          w.value = t;
+        Be(h.value?.parentElement, (n) => {
+          z.value = n;
         }),
         // Сетка перерисовывает карточки — скрытое расставляем заново.
-        ge(m.value, y)
-      ), y();
-    }), P(() => $.forEach((t) => t()));
-    function n(t) {
-      const f = v.value;
-      if (!f) return;
-      const d = b.value ? f : xe(f);
-      if (!d) return;
-      const E = m.value, H = E ? Ce(E, t.index, t.width, k.value.offset)[0] : void 0, Y = H ? Te(H, d) : { left: ze(f, d) + t.index * t.width, width: t.width };
-      Se(
-        d,
-        $e({
-          ...Y,
-          viewport: d.clientWidth,
-          scrollWidth: d.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 _(t) {
-      a("select", t), n(t);
+    function Q(n) {
+      r("select", n), B(n);
     }
-    return s({ scrollToRound: n }), (t, f) => (c(), u("div", {
+    return f({ scrollToRound: B }), (n, k) => (d(), c("div", {
       ref_key: "rootElement",
-      ref: v,
-      class: L(["tv-rounds", { "tv-rounds--swipe": b.value }]),
-      onScroll: F
+      ref: h,
+      class: M(["tv-rounds", { "tv-rounds--swipe": m.value }])
     }, [
-      o.isShow ? (c(), u("div", {
+      t.isShow ? (d(), c("div", {
         key: 0,
-        class: "tv-rounds__bar",
-        style: T(V.value)
+        ref_key: "headElement",
+        ref: _,
+        class: "tv-rounds__head"
       }, [
-        (c(!0), u(I, null, M(k.value.columns, (d) => (c(), u("div", {
-          key: d.key,
-          class: "tv-rounds__item",
-          style: T({ width: `${d.width}px` }),
-          onClick: (E) => _(d)
+        y("div", {
+          class: "tv-rounds__bar",
+          style: S(W.value)
         }, [
-          R(t.$slots, "round", { round: d }, () => [
-            q(x(d.name), 1)
-          ])
-        ], 12, Qe))), 128))
-      ], 4)) : B("", !0),
-      z("div", {
-        ref_key: "contentElement",
-        ref: m,
-        class: "tv-rounds__content",
-        style: T(W.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: A.value,
-          isSwipe: b.value,
-          round: i.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));
   }
-}), Ze = ".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;position:relative;box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%;font-size:12px}.tv-bracket--my-team{border-radius:var(--tv-bracket-radius);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__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-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 .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}.tv-rounds--swipe [data-depth]{transition:opacity var(--tv-rounds-fade, .22s) ease}.tv-rounds--swipe [data-depth].tv-hidden{visibility:hidden;opacity:0;transition:opacity var(--tv-rounds-fade, .22s) ease,visibility 0s linear var(--tv-rounds-fade, .22s)}.tv-hidden{visibility:hidden}@media(prefers-reduced-motion:reduce){.tv-rounds--swipe [data-depth],.tv-rounds--swipe [data-depth].tv-hidden{transition:none}}";
-Ee(Ze);
-const Je = {
-  install(o) {
-    o.component("TreeView", We), o.component("TreeNodeCard", Q), o.component("BracketCard", je), o.component("BracketRounds", Ye);
+}), 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 {
-  je as BracketCard,
-  Ye as BracketRounds,
-  tt as DEFAULT_OPTIONS,
-  ot as MOBILE_MEDIA_QUERY,
-  Q as TreeNodeCard,
-  We as TreeView,
-  Je as TreeViewPlugin,
-  nt as bracketCardHeight,
-  at as buildBracketCard,
-  rt as buildBracketRounds,
-  Je as default,
-  Oe as usePanZoom,
-  Me 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