@bigplay/tree-view 0.3.1 → 0.5.0

package/dist/index.js

@@ -1,7 +1,7 @@
-import { defineComponent as R, openBlock as d, createElementBlock as c, createElementVNode as C, toDisplayString as w, withModifiers as j, createCommentVNode as E, ref as g, watch as N, onBeforeUnmount as D, computed as h, onMounted as V, nextTick as P, normalizeStyle as y, normalizeClass as I, unref as W, Fragment as B, renderList as M, renderSlot as O, createVNode as Q, createTextVNode as G } from "vue";
-import { IDENTITY_TRANSFORM as Y, PanZoomController as Z, toTree as K, applyCollapsed as q, layoutTree as J, toggleCollapsed as X, estimateVisibleRect as ee, measureVisibleRect as te, DEFAULT_OVERSCAN as oe, visibleLayout as ne, toCssTransform as re, DEFAULT_SCALE_LIMITS as ae, buildBracketCard as ie, MOBILE_MEDIA_QUERY as le, watchMedia as se, buildBracketRounds as de, findScrollParent as ce, nodesInColumn as ue, horizontalBox as ve, offsetWithin as fe, smoothScrollLeft as pe, roundScrollLeft as he, injectStyles as be } from "@bigplay/tree-view-core";
-import { DEFAULT_OPTIONS as Pe, MOBILE_MEDIA_QUERY as We, bracketCardHeight as He, buildBracketCard as Ue, buildBracketRounds as je } from "@bigplay/tree-view-core";
-const me = { class: "tree-view-card" }, ge = { class: "tree-view-card__label" }, we = ["aria-label"], H = /* @__PURE__ */ R({
+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({
   __name: "TreeNodeCard",
   props: {
     label: {},
@@ -9,70 +9,70 @@ const me = { class: "tree-view-card" }, ge = { class: "tree-view-card__label" },
     collapsed: { type: Boolean }
   },
   emits: ["toggle"],
-  setup(t, { emit: l }) {
-    const o = l;
-    return (e, r) => (d(), c("div", me, [
-      C("span", ge, w(t.label), 1),
-      t.hasChildren ? (d(), c("button", {
+  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", {
         key: 0,
         type: "button",
         class: "tree-view-card__toggle",
         "data-tv-no-pan": "",
-        "aria-label": t.collapsed ? "Развернуть" : "Свернуть",
-        onClick: r[0] || (r[0] = j((v) => o("toggle"), ["stop"]))
-      }, w(t.collapsed ? "+" : "−"), 9, we)) : E("", !0)
+        "aria-label": o.collapsed ? "Развернуть" : "Свернуть",
+        onClick: a[0] || (a[0] = Q((u) => i("toggle"), ["stop"]))
+      }, _(o.collapsed ? "+" : "−"), 9, Oe)) : z("", !0)
     ]));
   }
 });
-function ke(t) {
-  const l = g({ ...Y }), o = new Z({
-    pannable: t.pannable,
-    zoomable: t.zoomable,
-    limits: t.limits,
+function Me(o) {
+  const c = g({ ...J }), i = new X({
+    pannable: o.pannable,
+    zoomable: o.zoomable,
+    limits: o.limits,
     onChange: (e) => {
-      l.value = e;
+      c.value = e;
     }
   });
-  return N(
-    t.element,
-    (e, r, v) => {
-      e && (o.attach(e), v(() => o.detach()));
+  return O(
+    o.element,
+    (e, a, u) => {
+      e && (i.attach(e), u(() => i.detach()));
     },
     { immediate: !0 }
-  ), D(() => o.detach()), {
-    transform: l,
-    fit: (e, r) => o.fit(e, r),
-    zoomIn: () => o.zoomIn(),
-    zoomOut: () => o.zoomOut(),
-    reset: () => o.reset(),
-    setTransform: (e) => o.set(e)
+  ), 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)
   };
 }
-function _e(t) {
-  const l = g(/* @__PURE__ */ new Set()), o = h(() => K(t.data(), t.accessors())), e = h(() => q(o.value, l.value)), r = h(() => J(e.value, t.options()));
-  function v(b) {
-    return l.value.has(b);
+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 m(b) {
-    l.value = X(l.value, b);
+    c.value = ne(c.value, b);
   }
-  function a() {
-    l.value = /* @__PURE__ */ new Set();
+  function l() {
+    c.value = /* @__PURE__ */ new Set();
   }
-  return { layout: r, isCollapsed: v, toggle: m, expandAll: a };
+  return { layout: a, isCollapsed: u, toggle: m, expandAll: l };
 }
-function xe(t, l, o) {
-  const e = g(o() ? ee() : null);
-  function r() {
-    e.value = o() ? te(t.value, l()) : null;
+function De(o, c, i) {
+  const e = g(i() ? ae() : null);
+  function a() {
+    e.value = i() ? re(o.value, c()) : null;
   }
   return V(() => {
-    r(), window.addEventListener("scroll", r, { passive: !0, capture: !0 }), window.addEventListener("resize", r, { passive: !0 });
-  }), D(() => {
-    window.removeEventListener("scroll", r, { capture: !0 }), window.removeEventListener("resize", r);
-  }), { rect: e, update: r };
+    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 };
 }
-const ye = ["width", "height"], Ce = ["d"], Te = ["onClick"], ze = /* @__PURE__ */ R({
+const Ne = ["width", "height"], We = ["data-depth"], Fe = ["d"], He = ["data-depth", "onClick"], Ae = /* @__PURE__ */ D({
   __name: "TreeView",
   props: {
     data: {},
@@ -88,11 +88,11 @@ const ye = ["width", "height"], Ce = ["d"], Te = ["onClick"], ze = /* @__PURE__
     scaleLimits: { default: void 0 },
     nodeClass: { type: [String, Function], default: void 0 },
     virtualize: { type: Boolean, default: !0 },
-    overscan: { default: oe }
+    overscan: { default: ie }
   },
   emits: ["node-click", "toggle", "transform"],
-  setup(t, { expose: l, emit: o }) {
-    const e = t, r = o, v = g(null), m = g(null), { layout: a, isCollapsed: b, toggle: i, expandAll: k } = _e({
+  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({
       data: () => e.data,
       options: () => e.options,
       accessors: () => ({
@@ -100,31 +100,31 @@ const ye = ["width", "height"], Ce = ["d"], Te = ["onClick"], ze = /* @__PURE__
         getChildren: e.getChildren,
         getParentId: e.getParentId
       })
-    }), p = ke({
-      element: v,
+    }), p = Me({
+      element: u,
       pannable: () => e.pannable,
       zoomable: () => e.zoomable,
-      limits: () => e.scaleLimits ?? ae
-    }), T = xe(
+      limits: () => e.scaleLimits ?? de
+    }), T = De(
       m,
       () => p.transform.value.scale,
       () => e.virtualize
-    ), S = h(
-      () => e.virtualize ? ne(a.value, T.rect.value, e.overscan) : a.value
-    ), u = h(() => ({
-      width: `${a.value.width}px`,
-      height: `${a.value.height}px`,
-      transform: re(p.transform.value)
-    })), _ = h(() => {
+    ), $ = f(
+      () => e.virtualize ? le(l.value, T.rect.value, e.overscan) : l.value
+    ), k = f(() => ({
+      width: `${l.value.width}px`,
+      height: `${l.value.height}px`,
+      transform: se(p.transform.value)
+    })), N = f(() => {
       if (e.size !== "content") return;
       const { scale: n } = p.transform.value;
       return {
-        width: `${a.value.width * n}px`,
-        height: `${a.value.height * n}px`,
+        width: `${l.value.width * n}px`,
+        height: `${l.value.height * n}px`,
         overflow: "visible"
       };
     });
-    function f(n) {
+    function W(n) {
       return {
         left: `${n.x}px`,
         top: `${n.y}px`,
@@ -132,229 +132,294 @@ const ye = ["width", "height"], Ce = ["d"], Te = ["onClick"], ze = /* @__PURE__
         height: `${n.height}px`
       };
     }
-    function z(n) {
+    function F(n) {
       return typeof e.nodeClass == "function" ? e.nodeClass(n) : e.nodeClass;
     }
-    function L(n) {
+    function H(n) {
       const x = n.data;
       return x?.name ?? x?.title ?? x?.label ?? n.id;
     }
-    function $(n) {
-      i(n.id), r("toggle", n, b(n.id));
+    function y(n) {
+      r(n.id), a("toggle", n, b(n.id));
     }
-    function U(n, x) {
-      r("node-click", n, x), e.collapsible && n.hasChildren && $(n);
+    function A(n, x) {
+      a("node-click", n, x), e.collapsible && n.hasChildren && y(n);
     }
-    function A(n) {
-      p.fit({ width: a.value.width, height: a.value.height }, n);
+    function B(n) {
+      p.fit({ width: l.value.width, height: l.value.height }, n);
     }
     return V(() => {
-      e.fitOnMount && P(() => A());
-    }), N(
+      e.fitOnMount && U(() => B());
+    }), O(
       () => p.transform.value,
       (n) => {
-        T.update(), r("transform", n);
+        T.update(), a("transform", n);
       }
-    ), N(a, () => {
-      P(() => T.update());
-    }), l({
-      fit: A,
+    ), O(l, () => {
+      U(() => T.update());
+    }), c({
+      fit: B,
       zoomIn: p.zoomIn,
       zoomOut: p.zoomOut,
       resetTransform: p.reset,
       setTransform: p.setTransform,
-      expandAll: k,
-      toggle: i,
-      layout: a,
+      expandAll: w,
+      toggle: r,
+      layout: l,
       transform: p.transform
-    }), (n, x) => (d(), c("div", {
+    }), (n, x) => (s(), d("div", {
       ref_key: "rootElement",
-      ref: v,
-      class: I(["tree-view", { "tree-view--pannable": t.pannable, "tree-view--content": t.size === "content" }]),
-      style: y(_.value)
+      ref: u,
+      class: E(["tree-view", { "tree-view--pannable": o.pannable, "tree-view--content": o.size === "content" }]),
+      style: S(N.value)
     }, [
       C("div", {
         ref_key: "canvasElement",
         ref: m,
         class: "tree-view__canvas",
-        style: y(u.value)
+        style: S(k.value)
       }, [
-        (d(), c("svg", {
+        (s(), d("svg", {
           class: "tree-view__links",
-          width: W(a).width,
-          height: W(a).height
+          width: j(l).width,
+          height: j(l).height
         }, [
-          (d(!0), c(B, null, M(S.value.links, (s) => O(n.$slots, "link", { link: s }, () => [
-            C("path", {
-              class: "tree-view__link",
-              d: s.path
-            }, null, 8, Ce)
-          ], void 0, s.id)), 128))
-        ], 8, ye)),
-        (d(!0), c(B, null, M(S.value.nodes, (s) => (d(), c("div", {
-          key: s.id,
-          class: I(["tree-view__node", z(s)]),
-          style: y(f(s)),
-          onClick: (F) => U(s, F)
+          (s(!0), d(I, null, M($.value.links, (t) => (s(), d("g", {
+            key: t.id,
+            "data-depth": t.target.depth
+          }, [
+            R(n.$slots, "link", { link: t }, () => [
+              C("path", {
+                class: "tree-view__link",
+                d: t.path
+              }, null, 8, Fe)
+            ])
+          ], 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)
         }, [
-          O(n.$slots, "node", {
-            node: s,
-            data: s.data,
-            depth: s.depth,
-            collapsed: s.collapsed,
-            hasChildren: s.hasChildren,
-            toggle: () => $(s)
+          R(n.$slots, "node", {
+            node: t,
+            data: t.data,
+            depth: t.depth,
+            collapsed: t.collapsed,
+            hasChildren: t.hasChildren,
+            toggle: () => y(t)
           }, () => [
-            Q(H, {
-              label: L(s),
-              "has-children": s.hasChildren,
-              collapsed: s.collapsed,
-              onToggle: (F) => $(s)
+            K(Y, {
+              label: H(t),
+              "has-children": t.hasChildren,
+              collapsed: t.collapsed,
+              onToggle: (h) => y(t)
             }, null, 8, ["label", "has-children", "collapsed", "onToggle"])
           ])
-        ], 14, Te))), 128))
+        ], 14, He))), 128))
       ], 4)
     ], 6));
   }
-}), $e = {
+}), Pe = {
   key: 0,
   class: "tv-bracket__hint"
-}, Ee = ["title", "onClick", "onMouseenter"], Be = {
+}, Ve = ["title", "aria-label", "aria-expanded"], Ge = { class: "tv-bracket__rows" }, Ue = ["title", "onClick", "onMouseenter"], je = {
   key: 0,
   class: "tv-bracket__tooltip"
-}, Se = { class: "tv-bracket__name" }, Le = { class: "tv-bracket__score" }, Ie = /* @__PURE__ */ R({
+}, Qe = { class: "tv-bracket__name" }, Ye = { class: "tv-bracket__score" }, Ze = /* @__PURE__ */ D({
   __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(t, { emit: l }) {
-    const o = t, e = l, r = g(null), v = h(
-      () => ie(o.match, { rows: o.rows, techDefeatLabel: o.techDefeatLabel })
+  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 })
     );
-    function m(a) {
-      a.team && e("select", a.team, a);
+    function m(l) {
+      l.team && e("select", l.team, l);
     }
-    return (a, b) => (d(), c("div", {
-      class: I(["tv-bracket", { "tv-bracket--my-team": v.value.hasMyTeam }])
+    return (l, b) => (s(), d("div", {
+      class: E(["tv-bracket", { "tv-bracket--my-team": u.value.hasMyTeam }])
     }, [
-      v.value.hasMyTeam && t.myTeamHint ? (d(), c("div", $e, w(t.myTeamHint), 1)) : E("", !0),
-      (d(!0), c(B, null, M(v.value.rows, (i) => (d(), c("div", {
-        key: i.key,
-        class: I(["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: (k) => m(i),
-        onMouseenter: (k) => r.value = i.key,
-        onMouseleave: b[0] || (b[0] = (k) => r.value = null)
-      }, [
-        i.team ? (d(), c(B, { key: 0 }, [
-          i.isTechDefeat && r.value === i.key ? (d(), c("span", Be, w(t.techDefeatHint), 1)) : E("", !0),
-          C("span", Se, w(i.team.name), 1),
-          C("span", Le, w(i.score), 1)
-        ], 64)) : E("", !0)
-      ], 42, Ee))), 128))
+      u.value.hasMyTeam && o.myTeamHint ? (s(), d("div", Pe, _(o.myTeamHint), 1)) : z("", !0),
+      o.hasChildren ? (s(), d("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,
+        "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
+          }]),
+          title: r.isMyTeam ? "Моя команда" : void 0,
+          onClick: (w) => m(r),
+          onMouseenter: (w) => a.value = r.key,
+          onMouseleave: b[1] || (b[1] = (w) => a.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))
+      ])
     ], 2));
   }
-}), Me = ["onClick"], Oe = /* @__PURE__ */ R({
+}), Ke = ["onClick"], qe = /* @__PURE__ */ D({
   __name: "BracketRounds",
   props: {
     rounds: {},
-    nodeWidth: { default: 180 },
-    levelGap: { default: 60 },
+    options: { default: void 0 },
     isShow: { type: Boolean, default: !0 },
-    scrollOnClick: { type: Boolean, default: void 0 },
-    mobileQuery: { default: le }
+    swipeSiblingGap: { default: 12 },
+    hidePassed: { type: Boolean, default: !0 },
+    swipe: { type: Boolean, default: void 0 },
+    mobileQuery: { default: ve }
   },
-  emits: ["select"],
-  setup(t, { emit: l }) {
-    const o = t, e = l, r = g(null), v = g(null), m = g(!1);
-    let a = null;
-    V(() => {
-      a = se(o.mobileQuery, (u) => {
-        m.value = u;
-      });
-    }), D(() => a?.());
-    const b = h(() => o.isShow && (o.scrollOnClick ?? m.value)), i = h(
-      () => de(o.rounds, { nodeWidth: o.nodeWidth, levelGap: o.levelGap })
-    ), k = h(() => ({ width: `${i.value.width}px` })), p = h(
-      () => o.isShow ? { paddingLeft: `${i.value.offset}px` } : void 0
+  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 ? {
+        ...e.options,
+        levelGap: $.value,
+        levelLayout: "stack",
+        siblingGap: e.swipeSiblingGap,
+        groupGap: (t, h) => we(h, e.swipeSiblingGap),
+        linkStyle: "bracket",
+        elbowOffset: e.options?.elbowOffset ?? be
+      } : { ...e.options }
+    ), F = f(() => ({ width: `${k.value.width}px` })), H = f(
+      () => e.isShow ? { paddingLeft: `${k.value.offset}px` } : void 0
     );
-    function T(u) {
-      const _ = r.value, f = ce(_);
-      if (!_ || !f) return;
-      const z = v.value, L = z ? ue(z, u.index, u.width, i.value.offset)[0] : void 0, $ = L ? ve(L, f) : { left: fe(_, f) + u.index * u.width, width: u.width };
-      pe(
-        f,
-        he({
-          ...$,
-          viewport: f.clientWidth,
-          scrollWidth: f.scrollWidth
+    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));
+    }
+    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));
+    }
+    O([r, w, k], () => y());
+    const B = [];
+    V(() => {
+      B.push(
+        me(e.mobileQuery, (t) => {
+          l.value = t;
+        }),
+        ge(u.value?.parentElement, (t) => {
+          b.value = t;
+        }),
+        // Сетка перерисовывает карточки — скрытое расставляем заново.
+        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
         })
       );
     }
-    function S(u) {
-      b.value && (e("select", u), T(u));
+    function x(t) {
+      a("select", t), n(t);
     }
-    return (u, _) => (d(), c("div", {
+    return c({ scrollToRound: n }), (t, h) => (s(), d("div", {
       ref_key: "rootElement",
-      ref: r,
-      class: "tv-rounds"
+      ref: u,
+      class: E(["tv-rounds", { "tv-rounds--swipe": w.value }]),
+      onScroll: A
     }, [
-      t.isShow ? (d(), c("div", {
+      o.isShow ? (s(), d("div", {
         key: 0,
         class: "tv-rounds__bar",
-        style: y(k.value)
+        style: S(F.value)
       }, [
-        (d(!0), c(B, null, M(i.value.columns, (f) => (d(), c("div", {
-          key: f.key,
+        (s(!0), d(I, null, M(k.value.columns, (v) => (s(), d("div", {
+          key: v.key,
           class: "tv-rounds__item",
-          style: y({ width: `${f.width}px` }),
-          onClick: (z) => S(f)
+          style: S({ width: `${v.width}px` }),
+          onClick: (L) => x(v)
         }, [
-          O(u.$slots, "round", { round: f }, () => [
-            G(w(f.name), 1)
+          R(t.$slots, "round", { round: v }, () => [
+            q(_(v.name), 1)
           ])
-        ], 12, Me))), 128))
-      ], 4)) : E("", !0),
+        ], 12, Ke))), 128))
+      ], 4)) : z("", !0),
       C("div", {
         ref_key: "contentElement",
-        ref: v,
+        ref: m,
         class: "tv-rounds__content",
-        style: y(p.value)
+        style: S(H.value)
       }, [
-        O(u.$slots, "default")
+        R(t.$slots, "default", {
+          options: W.value,
+          isSwipe: w.value,
+          round: r.value
+        })
       ], 4)
-    ], 512));
+    ], 34));
   }
-}), Re = ".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;touch-action:none}.tree-view--pannable{cursor:grab}.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;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)}";
-be(Re);
-const Ve = {
-  install(t) {
-    t.component("TreeView", ze), t.component("TreeNodeCard", H), t.component("BracketCard", Ie), t.component("BracketRounds", Oe);
+}), 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);
   }
 };
 export {
-  Ie as BracketCard,
-  Oe as BracketRounds,
-  Pe as DEFAULT_OPTIONS,
-  We as MOBILE_MEDIA_QUERY,
-  H as TreeNodeCard,
-  ze as TreeView,
-  Ve as TreeViewPlugin,
-  He as bracketCardHeight,
-  Ue as buildBracketCard,
-  je as buildBracketRounds,
-  Ve as default,
-  ke as usePanZoom,
-  _e as useTreeLayout
+  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
 };
 //# sourceMappingURL=index.js.map