@kong-ui-public/split-pane 0.1.1-pr.2798.c222b7a86.0 → 0.1.1-pr.2823.7037e5373.0

package/README.md

@@ -1,29 +1,38 @@
 # @kong-ui-public/split-pane
 
-A shared SplitPane layout component for Vue 3 applications.
+A shared SplitPane component for Vue 3 applications with resizable panes, vertical navigation, and collapsible panels.
 
 - [Features](#features)
 - [Requirements](#requirements)
 - [Usage](#usage)
   - [Install](#install)
   - [Props](#props)
+  - [Slots](#slots)
+  - [Composables](#composables)
+- [Examples](#examples)
 
 ## Features
 
-- Split pane component for Vue 3 applications
-- Resizable panes with drag-and-drop functionality
-- Customizable pane sizes and orientations
+- **Three-pane layout**: Left, center, and right panes with customizable visibility
+- **Resizable panes**: Drag-to-resize functionality between center and right panes
+- **Collapsible left pane**: Expand/collapse the left pane with smooth transitions
+- **Vertical navigation**: Optional navigation sidebar with icon buttons and tooltips
+- **Flexible configuration**: Control pane visibility and maximum widths
+- **Toolbar support**: Optional toolbar slot above the panes
+- **Responsive**: Automatically adjusts to window resizing
+- **Accessible**: Full keyboard support and ARIA attributes
 
 ## Requirements
 
 - `vue` must be initialized in the host application
 - `@kong/kongponents` must be available as a `dependency` in the host application
+- `vue-router` (optional, required if using navigation items with routing)
 
 ## Usage
 
 ### Install
 
-Install the package in your host application
+Install the package in your host application:
 
 ```sh
 pnpm add @kong-ui-public/split-pane
@@ -31,4 +40,211 @@ pnpm add @kong-ui-public/split-pane
 
 ### Props
 
-TBD
+#### `SplitPane` Component
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `resizable` | `boolean` | `true` | Enable drag-to-resize functionality between center and right panes |
+| `showResizeHandle` | `boolean` | `true` | Show/hide the resize handle divider |
+| `showNavigation` | `boolean` | `true` | Show/hide the vertical navigation sidebar |
+| `navigationItems` | `VerticalNavigationItem[]` | `[]` | Array of navigation items to display in the sidebar |
+| `paneLeft` | `PaneConfig` | `{ visible: true, maxWidth: '500px' }` | Configuration for the left pane |
+| `paneCenter` | `PaneConfig` | `{ visible: true, maxWidth: '50%' }` | Configuration for the center pane |
+| `paneRight` | `PaneConfig` | `{ visible: true, maxWidth: '50%' }` | Configuration for the right pane |
+
+#### Type Definitions
+
+```typescript
+interface PaneConfig {
+  /** Pass false to hide the pane even if it contains slot content */
+  visible?: boolean
+  /** The max width of the pane (e.g., '500px', '50%') */
+  maxWidth?: string
+}
+
+interface VerticalNavigationItem {
+  /** Vue Router location object for navigation */
+  to?: RouteLocationRaw
+  /** Tooltip text displayed on hover */
+  tooltip: string
+  /** Whether this navigation item is currently active */
+  active: boolean
+  /** Icon component to display */
+  icon: Component
+  /** Test ID for the navigation item */
+  testid: string
+}
+```
+
+#### Default Constraints
+
+- **Left pane**: Min width `260px`, max width `500px` (customizable)
+- **Center/Right panes**: Min width `300px` each
+- When `resizable` is `true`, center and right panes have no max-width constraint
+- When `resizable` is `false`, center and right panes respect the `maxWidth` prop
+
+### Slots
+
+The component provides four named slots:
+
+| Slot | Description |
+|------|-------------|
+| `toolbar` | Optional toolbar content displayed above the panes |
+| `pane-left` | Content for the collapsible left pane |
+| `pane-center` | Content for the resizable center pane |
+| `pane-right` | Content for the right pane |
+
+### Composables
+
+#### `useSplitPane()`
+
+A composable that provides split-pane functionality including drag-to-resize and pane collapsing.
+
+**Returns:**
+
+```typescript
+{
+  isDraggingPaneLeft: ComputedRef<boolean>
+  isDraggingInnerPanes: ComputedRef<boolean>
+  startDraggingInnerPanes: (e: MouseEvent) => void
+  refreshInnerPaneSizes: () => void
+  paneLeftExpanded: ComputedRef<boolean>
+  togglePaneLeft: () => Promise<void>
+  startDraggingPaneLeft: (e: MouseEvent) => void
+  centerPaneWidth: Ref<number>
+}
+```
+
+## Examples
+
+### Basic Three-Pane Layout
+
+```vue
+<template>
+  <SplitPane
+    :navigation-items="navItems"
+    :show-navigation="true"
+  >
+    <template #pane-left>
+      <div class="left-content">
+        <!-- Collapsible left sidebar content -->
+      </div>
+    </template>
+
+    <template #pane-center>
+      <div class="center-content">
+        <!-- Main content area -->
+      </div>
+    </template>
+
+    <template #pane-right>
+      <div class="right-content">
+        <!-- Right panel content -->
+      </div>
+    </template>
+  </SplitPane>
+</template>
+
+<script setup lang="ts">
+import { SplitPane } from '@kong-ui-public/split-pane'
+import { HomeIcon, SettingsIcon } from '@kong/icons'
+
+const navItems = [
+  {
+    to: '/home',
+    tooltip: 'Home',
+    active: true,
+    icon: HomeIcon,
+    testid: 'home',
+  },
+  {
+    to: '/settings',
+    tooltip: 'Settings',
+    active: false,
+    icon: SettingsIcon,
+    testid: 'settings',
+  },
+]
+</script>
+```
+
+### With Toolbar
+
+```vue
+<template>
+  <SplitPane>
+    <template #toolbar>
+      <div class="toolbar">
+        <h1>Page Title</h1>
+        <button>Action</button>
+      </div>
+    </template>
+
+    <template #pane-center>
+      <!-- Content -->
+    </template>
+  </SplitPane>
+</template>
+```
+
+### Two-Pane Layout (No Left Pane)
+
+```vue
+<template>
+  <SplitPane
+    :pane-left="{ visible: false }"
+    :show-navigation="false"
+  >
+    <template #pane-center>
+      <!-- Main content -->
+    </template>
+
+    <template #pane-right>
+      <!-- Side panel -->
+    </template>
+  </SplitPane>
+</template>
+```
+
+### Non-Resizable Layout
+
+```vue
+<template>
+  <SplitPane
+    :resizable="false"
+    :pane-center="{ maxWidth: '60%' }"
+    :pane-right="{ maxWidth: '40%' }"
+  >
+    <template #pane-center>
+      <!-- Fixed width center pane -->
+    </template>
+
+    <template #pane-right>
+      <!-- Fixed width right pane -->
+    </template>
+  </SplitPane>
+</template>
+```
+
+### Custom Pane Widths
+
+```vue
+<template>
+  <SplitPane
+    :pane-left="{ maxWidth: '400px' }"
+    :pane-center="{ maxWidth: '800px' }"
+  >
+    <template #pane-left>
+      <!-- Custom width left pane -->
+    </template>
+
+    <template #pane-center>
+      <!-- Custom width center pane -->
+    </template>
+
+    <template #pane-right>
+      <!-- Flexible right pane -->
+    </template>
+  </SplitPane>
+</template>
+```

package/dist/split-pane.es.js

@@ -0,0 +1,560 @@
+import { watch as G, getCurrentScope as xe, onScopeDispose as we, onMounted as ee, nextTick as j, getCurrentInstance as pe, computed as P, toValue as $, shallowRef as Y, watchEffect as ye, unref as l, ref as m, readonly as ne, defineComponent as ge, useCssVars as he, resolveComponent as oe, createElementBlock as S, openBlock as k, createElementVNode as y, Fragment as Ce, renderList as ke, createBlock as V, withCtx as Z, createVNode as se, withModifiers as ie, normalizeClass as N, resolveDynamicComponent as le, createCommentVNode as F, useSlots as Le, useTemplateRef as I, renderSlot as J, withDirectives as re, vShow as ue } from "vue";
+import { ChevronDoubleLeftIcon as We, ChevronDoubleRightIcon as ze } from "@kong/icons";
+import { useRouter as De } from "vue-router";
+import { createI18n as _e, i18nTComponent as Ie } from "@kong-ui-public/i18n";
+const Ee = "260px", ae = "500px", ce = "50%", de = "50%";
+function te(e) {
+  return xe() ? (we(e), !0) : !1;
+}
+const Ne = typeof window < "u" && typeof document < "u";
+typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
+const Se = (e) => e != null, Te = Object.prototype.toString, Me = (e) => Te.call(e) === "[object Object]", $e = () => {
+};
+function K(e) {
+  return Array.isArray(e) ? e : [e];
+}
+function Oe(e) {
+  return pe();
+}
+function Ae(e, n = !0, r) {
+  Oe() ? ee(e, r) : n ? e() : j(e);
+}
+function Be(e, n, r) {
+  return G(
+    e,
+    n,
+    {
+      ...r,
+      immediate: !0
+    }
+  );
+}
+const O = Ne ? window : void 0;
+function z(e) {
+  var n;
+  const r = $(e);
+  return (n = r == null ? void 0 : r.$el) != null ? n : r;
+}
+function U(...e) {
+  const n = [], r = () => {
+    n.forEach((t) => t()), n.length = 0;
+  }, o = (t, c, f, v) => (t.addEventListener(c, f, v), () => t.removeEventListener(c, f, v)), u = P(() => {
+    const t = K($(e[0])).filter((c) => c != null);
+    return t.every((c) => typeof c != "string") ? t : void 0;
+  }), d = Be(
+    () => {
+      var t, c;
+      return [
+        (c = (t = u.value) == null ? void 0 : t.map((f) => z(f))) != null ? c : [O].filter((f) => f != null),
+        K($(u.value ? e[1] : e[0])),
+        K(l(u.value ? e[2] : e[1])),
+        // @ts-expect-error - TypeScript gets the correct types, but somehow still complains
+        $(u.value ? e[3] : e[2])
+      ];
+    },
+    ([t, c, f, v]) => {
+      if (r(), !(t != null && t.length) || !(c != null && c.length) || !(f != null && f.length))
+        return;
+      const a = Me(v) ? { ...v } : v;
+      n.push(
+        ...t.flatMap(
+          (s) => c.flatMap(
+            (g) => f.map((h) => o(s, g, h, a))
+          )
+        )
+      );
+    },
+    { flush: "post" }
+  ), i = () => {
+    d(), r();
+  };
+  return te(r), i;
+}
+// @__NO_SIDE_EFFECTS__
+function He() {
+  const e = Y(!1), n = pe();
+  return n && ee(() => {
+    e.value = !0;
+  }, n), e;
+}
+// @__NO_SIDE_EFFECTS__
+function be(e) {
+  const n = /* @__PURE__ */ He();
+  return P(() => (n.value, !!e()));
+}
+function Xe(e, n, r = {}) {
+  const { window: o = O, ...u } = r;
+  let d;
+  const i = /* @__PURE__ */ be(() => o && "MutationObserver" in o), t = () => {
+    d && (d.disconnect(), d = void 0);
+  }, c = P(() => {
+    const s = $(e), g = K(s).map(z).filter(Se);
+    return new Set(g);
+  }), f = G(
+    c,
+    (s) => {
+      t(), i.value && s.size && (d = new MutationObserver(n), s.forEach((g) => d.observe(g, u)));
+    },
+    { immediate: !0, flush: "post" }
+  ), v = () => d == null ? void 0 : d.takeRecords(), a = () => {
+    f(), t();
+  };
+  return te(a), {
+    isSupported: i,
+    stop: a,
+    takeRecords: v
+  };
+}
+function Ve(e, n, r = {}) {
+  const {
+    window: o = O,
+    document: u = o == null ? void 0 : o.document,
+    flush: d = "sync"
+  } = r;
+  if (!o || !u)
+    return $e;
+  let i;
+  const t = (v) => {
+    i == null || i(), i = v;
+  }, c = ye(() => {
+    const v = z(e);
+    if (v) {
+      const { stop: a } = Xe(
+        u,
+        (s) => {
+          s.map((h) => [...h.removedNodes]).flat().some((h) => h === v || h.contains(v)) && n(s);
+        },
+        {
+          window: o,
+          childList: !0,
+          subtree: !0
+        }
+      );
+      t(a);
+    }
+  }, { flush: d }), f = () => {
+    c(), t();
+  };
+  return te(f), f;
+}
+function Fe(e, n, r = {}) {
+  const { window: o = O, ...u } = r;
+  let d;
+  const i = /* @__PURE__ */ be(() => o && "ResizeObserver" in o), t = () => {
+    d && (d.disconnect(), d = void 0);
+  }, c = P(() => {
+    const a = $(e);
+    return Array.isArray(a) ? a.map((s) => z(s)) : [z(a)];
+  }), f = G(
+    c,
+    (a) => {
+      if (t(), i.value && o) {
+        d = new ResizeObserver(n);
+        for (const s of a)
+          s && d.observe(s, u);
+      }
+    },
+    { immediate: !0, flush: "post" }
+  ), v = () => {
+    t(), f();
+  };
+  return te(v), {
+    isSupported: i,
+    stop: v
+  };
+}
+function fe(e, n = {}) {
+  const {
+    delayEnter: r = 0,
+    delayLeave: o = 0,
+    triggerOnRemoval: u = !1,
+    window: d = O
+  } = n, i = Y(!1);
+  let t;
+  const c = (f) => {
+    const v = f ? r : o;
+    t && (clearTimeout(t), t = void 0), v ? t = setTimeout(() => i.value = f, v) : i.value = f;
+  };
+  return d && (U(e, "mouseenter", () => c(!0), { passive: !0 }), U(e, "mouseleave", () => c(!1), { passive: !0 }), u && Ve(
+    P(() => z(e)),
+    () => c(!1)
+  )), i;
+}
+function Ke(e, n = { width: 0, height: 0 }, r = {}) {
+  const { window: o = O, box: u = "content-box" } = r, d = P(() => {
+    var a, s;
+    return (s = (a = z(e)) == null ? void 0 : a.namespaceURI) == null ? void 0 : s.includes("svg");
+  }), i = Y(n.width), t = Y(n.height), { stop: c } = Fe(
+    e,
+    ([a]) => {
+      const s = u === "border-box" ? a.borderBoxSize : u === "content-box" ? a.contentBoxSize : a.devicePixelContentBoxSize;
+      if (o && d.value) {
+        const g = z(e);
+        if (g) {
+          const h = g.getBoundingClientRect();
+          i.value = h.width, t.value = h.height;
+        }
+      } else if (s) {
+        const g = K(s);
+        i.value = g.reduce((h, { inlineSize: W }) => h + W, 0), t.value = g.reduce((h, { blockSize: W }) => h + W, 0);
+      } else
+        i.value = a.contentRect.width, t.value = a.contentRect.height;
+    },
+    r
+  );
+  Ae(() => {
+    const a = z(e);
+    a && (i.value = "offsetWidth" in a ? a.offsetWidth : n.width, t.value = "offsetHeight" in a ? a.offsetHeight : n.height);
+  });
+  const f = G(
+    () => z(e),
+    (a) => {
+      i.value = a ? n.width : 0, t.value = a ? n.height : 0;
+    }
+  );
+  function v() {
+    c(), f();
+  }
+  return {
+    width: i,
+    height: t,
+    stop: v
+  };
+}
+const ve = "20px", M = m(!1), E = m(!1), Q = m(!0), X = m(0);
+function me(e) {
+  const n = (e == null ? void 0 : e.verticalNavRef) || m(null), r = (e == null ? void 0 : e.innerPanesContainerRef) || m(null), o = (e == null ? void 0 : e.paneLeftRef) || m(null), u = (e == null ? void 0 : e.paneCenterRef) || m(null), d = (e == null ? void 0 : e.paneRightRef) || m(null), i = (p) => {
+    var b, C, L, x, w;
+    switch (p) {
+      case "verticalNav":
+        return ((b = n.value) == null ? void 0 : b.offsetWidth) || 0;
+      case "innerPanesContainer":
+        return ((C = r.value) == null ? void 0 : C.offsetWidth) || 0;
+      case "paneLeft":
+        return ((L = o.value) == null ? void 0 : L.offsetWidth) || 0;
+      case "paneCenter":
+        return ((x = u.value) == null ? void 0 : x.offsetWidth) || 0;
+      case "paneRight":
+        return ((w = d.value) == null ? void 0 : w.offsetWidth) || 0;
+      default:
+        return 0;
+    }
+  }, t = m(50), c = m(0), f = m(0), v = m(0), a = m(0), s = (p) => {
+    if (u.value) {
+      if (p) {
+        u.value.style.width = `${p}%`, X.value = i("paneCenter");
+        return;
+      } else (typeof t.value != "number" || !isFinite(t.value)) && (t.value = 38);
+      u.value.style.width = `${t.value}%`, X.value = i("paneCenter");
+    }
+  }, g = () => {
+    var p;
+    u.value && ((p = d.value) == null ? void 0 : p.style.display) === "none" ? s(100) : s();
+  }, h = () => {
+    var L;
+    if (!r.value || !u.value) return;
+    const p = 100, b = i("innerPanesContainer") - i("verticalNav") - i("paneLeft") - p, C = t.value / 100 * i("innerPanesContainer");
+    if (C < p ? t.value = p / i("innerPanesContainer") * 100 : C > b && (t.value = b / i("innerPanesContainer") * 100), u.value && d.value && ((L = d.value) == null ? void 0 : L.style.display) === "none") {
+      s(100);
+      return;
+    }
+    s();
+  }, W = (p) => {
+    !u.value || p.button !== 0 || (E.value = !0, c.value = p.clientX, f.value = u.value.offsetWidth || 0, document.body.style.userSelect = "none");
+  }, R = (p) => {
+    if (!E.value || !r.value || !u.value) return;
+    const b = r.value.offsetWidth, C = p.clientX - c.value, x = (f.value + C) / b * 100, w = 100 / b * 100, H = (b - 100) / b * 100;
+    t.value = Math.min(Math.max(w, x), H), s();
+  }, D = () => {
+    E.value = !1, document.body.style.userSelect = "";
+  }, T = (p) => {
+    !o.value || !Q.value || p.button !== 0 || (M.value = !0, v.value = p.clientX, a.value = o.value.offsetWidth || 0, document.body.style.userSelect = "none");
+  }, q = (p) => {
+    if (!M.value || !o.value) return;
+    let b = a.value + (p.clientX - v.value);
+    const C = Number(Ee.replace(/px$/i, "")), L = Number(ae.replace(/px$/i, ""));
+    b < C && (b = C), b > L && (b = L), o.value.style.width = `${b}px`, v.value = p.clientX, a.value = b, X.value = i("paneCenter");
+  }, _ = () => {
+    M.value = !1, document.body.style.userSelect = "";
+  }, A = () => {
+    E.value || h();
+  }, B = async () => {
+    Q.value = !Q.value;
+  };
+  return U(window, "resize", A), ee(async () => {
+    await j(), u.value && (h(), await j(), s(), requestAnimationFrame(() => {
+      X.value = i("paneCenter");
+    }));
+  }), U(document, "mousemove", (p) => {
+    E.value && R(p), M.value && q(p);
+  }), U(document, "mouseup", () => {
+    E.value && D(), M.value && _();
+  }), {
+    isDraggingPaneLeft: ne(M),
+    isDraggingInnerPanes: ne(E),
+    startDraggingInnerPanes: W,
+    refreshInnerPaneSizes: g,
+    // Toggle the left pane
+    paneLeftExpanded: ne(Q),
+    togglePaneLeft: B,
+    startDraggingPaneLeft: T,
+    centerPaneWidth: X
+  };
+}
+const Ue = {
+  return: "Return",
+  collapse_panel: "Collapse panel",
+  expand_panel: "Expand panel",
+  drag_to_resize: "Click and drag to resize"
+}, je = {
+  actions: Ue
+};
+function Re() {
+  const e = _e("en-us", je);
+  return {
+    i18n: e,
+    i18nT: Ie(e)
+    // Translation component <i18n-t>
+  };
+}
+const Ge = { class: "kong-ui-public-split-pane-vertical-navigation" }, qe = { class: "split-pane-nav" }, Ze = { class: "top" }, Je = { class: "bottom" }, Qe = /* @__PURE__ */ ge({
+  __name: "VerticalNavigation",
+  props: {
+    paneLeftWidth: { default: 0 },
+    paneLeftVisible: { type: Boolean, default: !0 },
+    items: { default: () => [] }
+  },
+  setup(e) {
+    he((s) => ({
+      v01870e39: v.value
+    }));
+    const { i18n: n } = Re(), r = De(), { paneLeftExpanded: o, togglePaneLeft: u, isDraggingPaneLeft: d, isDraggingInnerPanes: i } = me(), t = m(!1), c = m(!1), f = P(() => t.value || d.value || i.value), v = P(() => `${e.paneLeftWidth - 8}px`), a = (s) => {
+      o.value || u(), !s.active && s.to && r.push(s.to);
+    };
+    return ee(async () => {
+      await j(), await new Promise((s) => setTimeout(s, 500)), c.value = !0;
+    }), (s, g) => {
+      const h = oe("KButton"), W = oe("KTooltip");
+      return k(), S("div", Ge, [
+        y("nav", qe, [
+          y("div", Ze, [
+            (k(!0), S(Ce, null, ke(e.items, (R) => (k(), V(W, {
+              key: R.tooltip,
+              "kpop-attributes": { offset: "10px" },
+              label: R.tooltip,
+              placement: "right"
+            }, {
+              default: Z(() => [
+                se(h, {
+                  appearance: "none",
+                  "aria-label": R.tooltip,
+                  class: N(["split-pane-nav-item", { active: R.active }]),
+                  "data-testid": `kong-ui-public-split-pane-vertical-navigation-nav-item-${R.testid}`,
+                  icon: "",
+                  size: "large",
+                  style: { cursor: "pointer" },
+                  to: R.to,
+                  onClickCapture: ie((D) => a(R), ["prevent"])
+                }, {
+                  default: Z(() => [
+                    (k(), V(le(R.icon), {
+                      decorative: "",
+                      size: l(ve)
+                    }, null, 8, ["size"]))
+                  ]),
+                  _: 2
+                }, 1032, ["aria-label", "class", "data-testid", "to", "onClickCapture"])
+              ]),
+              _: 2
+            }, 1032, ["label"]))), 128))
+          ]),
+          y("div", Je, [
+            e.paneLeftVisible ? (k(), S("div", {
+              key: 0,
+              class: N(["toggle-left-panel-control", {
+                expanded: l(o),
+                "disable-animation": !c.value || l(d) || l(i)
+              }]),
+              onTransitionend: g[0] || (g[0] = ie((R) => t.value = !1, ["self"])),
+              onTransitionstart: g[1] || (g[1] = ie((R) => t.value = !0, ["self"]))
+            }, [
+              (k(), V(W, {
+                key: String(l(o)),
+                "kpop-attributes": l(o) ? void 0 : { offset: "10px" },
+                label: f.value ? void 0 : l(o) ? l(n).t("actions.collapse_panel") : l(n).t("actions.expand_panel"),
+                placement: l(o) ? "left" : "right"
+              }, {
+                default: Z(() => [
+                  se(h, {
+                    appearance: "none",
+                    "aria-controls": "left-pane",
+                    "aria-expanded": l(o),
+                    "aria-label": l(o) ? l(n).t("actions.collapse_panel") : l(n).t("actions.expand_panel"),
+                    class: "split-pane-nav-item toggle-left-panel",
+                    "data-testid": "kong-ui-public-split-pane-toggle-left-panel-button",
+                    icon: "",
+                    size: "large",
+                    onClick: l(u)
+                  }, {
+                    default: Z(() => [
+                      (k(), V(le(l(o) ? l(We) : l(ze)), {
+                        decorative: "",
+                        size: l(ve)
+                      }, null, 8, ["size"]))
+                    ]),
+                    _: 1
+                  }, 8, ["aria-expanded", "aria-label", "onClick"])
+                ]),
+                _: 1
+              }, 8, ["kpop-attributes", "label", "placement"]))
+            ], 34)) : F("", !0)
+          ])
+        ])
+      ]);
+    };
+  }
+}), Pe = (e, n) => {
+  const r = e.__vccOpts || e;
+  for (const [o, u] of n)
+    r[o] = u;
+  return r;
+}, Ye = /* @__PURE__ */ Pe(Qe, [["__scopeId", "data-v-acbeb50e"]]), et = { class: "kong-ui-public-split-pane-container" }, tt = { class: "kong-ui-public-split-pane-container-inner" }, nt = { class: "kong-ui-public-split-pane-panes" }, it = ["aria-hidden", "tabindex"], at = ["title"], ot = { class: "kong-ui-public-split-pane-container-inner-content" }, st = ["aria-hidden", "tabindex"], lt = ["title"], rt = ["aria-hidden", "tabindex"], ut = /* @__PURE__ */ ge({
+  __name: "SplitPane",
+  props: {
+    resizable: { type: Boolean, default: !0 },
+    showResizeHandle: { type: Boolean, default: !0 },
+    showNavigation: { type: Boolean, default: !0 },
+    navigationItems: { default: () => [] },
+    paneLeft: { default: () => ({
+      /** Pass false to hide the panel even if it contains slot content */
+      visible: !0,
+      maxWidth: ae
+    }) },
+    paneCenter: { default: () => ({
+      /** Pass false to hide the panel even if it contains slot content */
+      visible: !0,
+      maxWidth: ce
+    }) },
+    paneRight: { default: () => ({
+      /** Pass false to hide the panel even if it contains slot content */
+      visible: !0,
+      maxWidth: de
+    }) }
+  },
+  setup(e) {
+    he((x) => ({
+      v77518bb8: o.value,
+      a7565b74: u.value,
+      v39a6730f: d.value
+    }));
+    const n = Le(), r = (x) => x === "left" ? e.paneLeft.maxWidth !== void 0 ? e.paneLeft.maxWidth : ae : x === "center" ? e.resizable ? "none" : e.paneCenter.maxWidth !== void 0 ? e.paneCenter.maxWidth : ce : x === "right" ? e.resizable ? "none" : e.paneRight.maxWidth !== void 0 ? e.paneRight.maxWidth : de : "none", o = P(() => r("left")), u = P(() => r("center")), d = P(() => r("right")), i = I("verticalNavRef"), t = I("innerPanesContainerRef"), c = I("paneLeftRef"), f = I("paneCenterRef"), v = I("paneRightRef"), a = I("paneLeftDivider"), s = I("innerPanesDivider"), { startDraggingInnerPanes: g, startDraggingPaneLeft: h, refreshInnerPaneSizes: W, paneLeftExpanded: R, isDraggingPaneLeft: D, isDraggingInnerPanes: T } = me({
+      verticalNavRef: i,
+      innerPanesContainerRef: t,
+      paneLeftRef: c,
+      paneCenterRef: f,
+      paneRightRef: v
+    }), { i18n: q } = Re(), _ = P(() => !!n["pane-left"] && e.paneLeft.visible !== !1 && R.value), A = P(() => !!n["pane-center"] && e.paneCenter.visible !== !1), B = P(() => !!n["pane-right"] && e.paneRight.visible !== !1), p = P(() => e.resizable && e.showResizeHandle && !!n["pane-center"] && e.paneCenter.visible !== !1 && !!n["pane-right"] && e.paneRight.visible !== !1), b = fe(a), C = fe(s), { width: L } = Ke(c);
+    return G(() => e.paneRight.visible, async () => {
+      e.resizable && (await j(), W());
+    }, { flush: "post" }), (x, w) => (k(), S("div", {
+      class: N(["kong-ui-public-split-pane", { "has-navigation": e.showNavigation }])
+    }, [
+      y("div", et, [
+        e.showNavigation ? (k(), V(Ye, {
+          key: 0,
+          ref_key: "verticalNavRef",
+          ref: i,
+          items: e.navigationItems,
+          "pane-left-visible": e.paneLeft.visible !== !1,
+          "pane-left-width": l(L)
+        }, null, 8, ["items", "pane-left-visible", "pane-left-width"])) : F("", !0),
+        y("div", tt, [
+          y("div", nt, [
+            y("div", {
+              id: "kong-ui-public-split-pane-left",
+              ref_key: "paneLeftRef",
+              ref: c,
+              "aria-hidden": _.value ? void 0 : "true",
+              class: N(["kong-ui-public-split-pane-pane-left", [{ expanded: l(R), "show-resize-border": l(b) }, { "is-dragging-pane-left": l(D) }, { "is-dragging-pane": l(D) || l(T) }]]),
+              "data-testid": "kong-ui-public-split-pane-pane-left",
+              tabindex: _.value ? 0 : -1
+            }, [
+              J(x.$slots, "pane-left", {}, void 0, !0)
+            ], 10, it),
+            _.value ? (k(), S("div", {
+              key: 0,
+              ref_key: "paneLeftDivider",
+              ref: a,
+              class: "kong-ui-public-split-pane-resize-divider left",
+              tabindex: "0",
+              title: l(q).t("actions.drag_to_resize"),
+              onMousedown: w[0] || (w[0] = //@ts-ignore
+              (...H) => l(h) && l(h)(...H))
+            }, [...w[2] || (w[2] = [
+              y("div", { class: "kong-ui-public-split-pane-drag-handle" }, null, -1)
+            ])], 40, at)) : F("", !0),
+            y("div", ot, [
+              n.toolbar ? (k(), S("div", {
+                key: 0,
+                class: N(["kong-ui-public-split-pane-toolbar-container", { "has-resize-divider-left": _.value }]),
+                "data-testid": "kong-ui-public-split-pane-toolbar"
+              }, [
+                J(x.$slots, "toolbar", {}, void 0, !0)
+              ], 2)) : F("", !0),
+              y("div", {
+                ref_key: "innerPanesContainerRef",
+                ref: t,
+                class: "kong-ui-public-split-pane-inner-panes"
+              }, [
+                re(y("div", {
+                  ref_key: "paneCenterRef",
+                  ref: f,
+                  "aria-hidden": A.value ? void 0 : "true",
+                  class: N(["kong-ui-public-split-pane-pane-center", [{ "has-resize-divider-left": _.value }, { "has-resize-divider-right": p.value }, { "is-dragging-pane": l(D) || l(T) }]]),
+                  "data-testid": "kong-ui-public-split-pane-pane-center",
+                  tabindex: A.value ? 0 : -1
+                }, [
+                  J(x.$slots, "pane-center", {}, void 0, !0)
+                ], 10, st), [
+                  [ue, A.value]
+                ]),
+                p.value ? (k(), S("div", {
+                  key: 0,
+                  ref_key: "innerPanesDivider",
+                  ref: s,
+                  class: "kong-ui-public-split-pane-resize-divider right",
+                  tabindex: "0",
+                  title: l(q).t("actions.drag_to_resize"),
+                  onMousedown: w[1] || (w[1] = //@ts-ignore
+                  (...H) => l(g) && l(g)(...H))
+                }, [...w[3] || (w[3] = [
+                  y("div", { class: "kong-ui-public-split-pane-drag-handle" }, null, -1)
+                ])], 40, lt)) : F("", !0),
+                re(y("div", {
+                  ref_key: "paneRightRef",
+                  ref: v,
+                  "aria-hidden": B.value ? void 0 : "true",
+                  class: N(["kong-ui-public-split-pane-pane-right", [
+                    { "has-toolbar": !!n.toolbar },
+                    { "show-resize-border": l(C) },
+                    { "is-dragging-inner-panes": l(T) },
+                    { "is-dragging-pane": l(D) || l(T) }
+                  ]]),
+                  "data-testid": "kong-ui-public-split-pane-pane-right",
+                  tabindex: B.value ? 0 : -1
+                }, [
+                  J(x.$slots, "pane-right", {}, void 0, !0)
+                ], 10, rt), [
+                  [ue, B.value]
+                ])
+              ], 512)
+            ])
+          ])
+        ])
+      ])
+    ], 2));
+  }
+}), pt = /* @__PURE__ */ Pe(ut, [["__scopeId", "data-v-a2181be5"]]);
+export {
+  pt as SplitPane
+};

package/dist/split-pane.umd.js

@@ -0,0 +1 @@
+(function(x,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@kong/icons"),require("vue-router"),require("@kong-ui-public/i18n")):typeof define=="function"&&define.amd?define(["exports","vue","@kong/icons","vue-router","@kong-ui-public/i18n"],e):(x=typeof globalThis<"u"?globalThis:x||self,e(x["kong-ui-public-split-pane"]={},x.Vue,x.KongIcons,x.VueRouter,x["kong-ui-public-i18n"]))})(this,function(x,e,H,Q,X){"use strict";const Y="260px",A="500px",F="50%",j="50%";function M(t){return e.getCurrentScope()?(e.onScopeDispose(t),!0):!1}const ee=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const te=t=>t!=null,ne=Object.prototype.toString,ie=t=>ne.call(t)==="[object Object]",ae=()=>{};function T(t){return Array.isArray(t)?t:[t]}function oe(t){return e.getCurrentInstance()}function le(t,i=!0,r){oe()?e.onMounted(t,r):i?t():e.nextTick(t)}function se(t,i,r){return e.watch(t,i,{...r,immediate:!0})}const N=ee?window:void 0;function y(t){var i;const r=e.toValue(t);return(i=r==null?void 0:r.$el)!=null?i:r}function _(...t){const i=[],r=()=>{i.forEach(n=>n()),i.length=0},l=(n,d,u,p)=>(n.addEventListener(d,u,p),()=>n.removeEventListener(d,u,p)),c=e.computed(()=>{const n=T(e.toValue(t[0])).filter(d=>d!=null);return n.every(d=>typeof d!="string")?n:void 0}),f=se(()=>{var n,d;return[(d=(n=c.value)==null?void 0:n.map(u=>y(u)))!=null?d:[N].filter(u=>u!=null),T(e.toValue(c.value?t[1]:t[0])),T(e.unref(c.value?t[2]:t[1])),e.toValue(c.value?t[3]:t[2])]},([n,d,u,p])=>{if(r(),!(n!=null&&n.length)||!(d!=null&&d.length)||!(u!=null&&u.length))return;const o=ie(p)?{...p}:p;i.push(...n.flatMap(s=>d.flatMap(h=>u.map(m=>l(s,h,m,o)))))},{flush:"post"}),a=()=>{f(),r()};return M(r),a}function re(){const t=e.shallowRef(!1),i=e.getCurrentInstance();return i&&e.onMounted(()=>{t.value=!0},i),t}function K(t){const i=re();return e.computed(()=>(i.value,!!t()))}function ce(t,i,r={}){const{window:l=N,...c}=r;let f;const a=K(()=>l&&"MutationObserver"in l),n=()=>{f&&(f.disconnect(),f=void 0)},d=e.computed(()=>{const s=e.toValue(t),h=T(s).map(y).filter(te);return new Set(h)}),u=e.watch(d,s=>{n(),a.value&&s.size&&(f=new MutationObserver(i),s.forEach(h=>f.observe(h,c)))},{immediate:!0,flush:"post"}),p=()=>f==null?void 0:f.takeRecords(),o=()=>{u(),n()};return M(o),{isSupported:a,stop:o,takeRecords:p}}function de(t,i,r={}){const{window:l=N,document:c=l==null?void 0:l.document,flush:f="sync"}=r;if(!l||!c)return ae;let a;const n=p=>{a==null||a(),a=p},d=e.watchEffect(()=>{const p=y(t);if(p){const{stop:o}=ce(c,s=>{s.map(m=>[...m.removedNodes]).flat().some(m=>m===p||m.contains(p))&&i(s)},{window:l,childList:!0,subtree:!0});n(o)}},{flush:f}),u=()=>{d(),n()};return M(u),u}function fe(t,i,r={}){const{window:l=N,...c}=r;let f;const a=K(()=>l&&"ResizeObserver"in l),n=()=>{f&&(f.disconnect(),f=void 0)},d=e.computed(()=>{const o=e.toValue(t);return Array.isArray(o)?o.map(s=>y(s)):[y(o)]}),u=e.watch(d,o=>{if(n(),a.value&&l){f=new ResizeObserver(i);for(const s of o)s&&f.observe(s,c)}},{immediate:!0,flush:"post"}),p=()=>{n(),u()};return M(p),{isSupported:a,stop:p}}function q(t,i={}){const{delayEnter:r=0,delayLeave:l=0,triggerOnRemoval:c=!1,window:f=N}=i,a=e.shallowRef(!1);let n;const d=u=>{const p=u?r:l;n&&(clearTimeout(n),n=void 0),p?n=setTimeout(()=>a.value=u,p):a.value=u};return f&&(_(t,"mouseenter",()=>d(!0),{passive:!0}),_(t,"mouseleave",()=>d(!1),{passive:!0}),c&&de(e.computed(()=>y(t)),()=>d(!1))),a}function ue(t,i={width:0,height:0},r={}){const{window:l=N,box:c="content-box"}=r,f=e.computed(()=>{var o,s;return(s=(o=y(t))==null?void 0:o.namespaceURI)==null?void 0:s.includes("svg")}),a=e.shallowRef(i.width),n=e.shallowRef(i.height),{stop:d}=fe(t,([o])=>{const s=c==="border-box"?o.borderBoxSize:c==="content-box"?o.contentBoxSize:o.devicePixelContentBoxSize;if(l&&f.value){const h=y(t);if(h){const m=h.getBoundingClientRect();a.value=m.width,n.value=m.height}}else if(s){const h=T(s);a.value=h.reduce((m,{inlineSize:P})=>m+P,0),n.value=h.reduce((m,{blockSize:P})=>m+P,0)}else a.value=o.contentRect.width,n.value=o.contentRect.height},r);le(()=>{const o=y(t);o&&(a.value="offsetWidth"in o?o.offsetWidth:i.width,n.value="offsetHeight"in o?o.offsetHeight:i.height)});const u=e.watch(()=>y(t),o=>{a.value=o?i.width:0,n.value=o?i.height:0});function p(){d(),u()}return{width:a,height:n,stop:p}}const U="20px",z=e.ref(!1),L=e.ref(!1),$=e.ref(!0),B=e.ref(0);function G(t){const i=(t==null?void 0:t.verticalNavRef)||e.ref(null),r=(t==null?void 0:t.innerPanesContainerRef)||e.ref(null),l=(t==null?void 0:t.paneLeftRef)||e.ref(null),c=(t==null?void 0:t.paneCenterRef)||e.ref(null),f=(t==null?void 0:t.paneRightRef)||e.ref(null),a=g=>{var b,R,w,k,C;switch(g){case"verticalNav":return((b=i.value)==null?void 0:b.offsetWidth)||0;case"innerPanesContainer":return((R=r.value)==null?void 0:R.offsetWidth)||0;case"paneLeft":return((w=l.value)==null?void 0:w.offsetWidth)||0;case"paneCenter":return((k=c.value)==null?void 0:k.offsetWidth)||0;case"paneRight":return((C=f.value)==null?void 0:C.offsetWidth)||0;default:return 0}},n=e.ref(50),d=e.ref(0),u=e.ref(0),p=e.ref(0),o=e.ref(0),s=g=>{if(c.value){if(g){c.value.style.width=`${g}%`,B.value=a("paneCenter");return}else(typeof n.value!="number"||!isFinite(n.value))&&(n.value=38);c.value.style.width=`${n.value}%`,B.value=a("paneCenter")}},h=()=>{var g;c.value&&((g=f.value)==null?void 0:g.style.display)==="none"?s(100):s()},m=()=>{var w;if(!r.value||!c.value)return;const g=100,b=a("innerPanesContainer")-a("verticalNav")-a("paneLeft")-g,R=n.value/100*a("innerPanesContainer");if(R<g?n.value=g/a("innerPanesContainer")*100:R>b&&(n.value=b/a("innerPanesContainer")*100),c.value&&f.value&&((w=f.value)==null?void 0:w.style.display)==="none"){s(100);return}s()},P=g=>{!c.value||g.button!==0||(L.value=!0,d.value=g.clientX,u.value=c.value.offsetWidth||0,document.body.style.userSelect="none")},v=g=>{if(!L.value||!r.value||!c.value)return;const b=r.value.offsetWidth,R=g.clientX-d.value,k=(u.value+R)/b*100,C=100/b*100,S=(b-100)/b*100;n.value=Math.min(Math.max(C,k),S),s()},W=()=>{L.value=!1,document.body.style.userSelect=""},D=g=>{!l.value||!$.value||g.button!==0||(z.value=!0,p.value=g.clientX,o.value=l.value.offsetWidth||0,document.body.style.userSelect="none")},O=g=>{if(!z.value||!l.value)return;let b=o.value+(g.clientX-p.value);const R=Number(Y.replace(/px$/i,"")),w=Number(A.replace(/px$/i,""));b<R&&(b=R),b>w&&(b=w),l.value.style.width=`${b}px`,p.value=g.clientX,o.value=b,B.value=a("paneCenter")},E=()=>{z.value=!1,document.body.style.userSelect=""},I=()=>{L.value||m()},V=async()=>{$.value=!$.value};return _(window,"resize",I),e.onMounted(async()=>{await e.nextTick(),c.value&&(m(),await e.nextTick(),s(),requestAnimationFrame(()=>{B.value=a("paneCenter")}))}),_(document,"mousemove",g=>{L.value&&v(g),z.value&&O(g)}),_(document,"mouseup",()=>{L.value&&W(),z.value&&E()}),{isDraggingPaneLeft:e.readonly(z),isDraggingInnerPanes:e.readonly(L),startDraggingInnerPanes:P,refreshInnerPaneSizes:h,paneLeftExpanded:e.readonly($),togglePaneLeft:V,startDraggingPaneLeft:D,centerPaneWidth:B}}const pe={actions:{return:"Return",collapse_panel:"Collapse panel",expand_panel:"Expand panel",drag_to_resize:"Click and drag to resize"}};function Z(){const t=X.createI18n("en-us",pe);return{i18n:t,i18nT:X.i18nTComponent(t)}}const ge={class:"kong-ui-public-split-pane-vertical-navigation"},he={class:"split-pane-nav"},me={class:"top"},be={class:"bottom"},ve=e.defineComponent({__name:"VerticalNavigation",props:{paneLeftWidth:{default:0},paneLeftVisible:{type:Boolean,default:!0},items:{default:()=>[]}},setup(t){e.useCssVars(s=>({v01870e39:p.value}));const{i18n:i}=Z(),r=Q.useRouter(),{paneLeftExpanded:l,togglePaneLeft:c,isDraggingPaneLeft:f,isDraggingInnerPanes:a}=G(),n=e.ref(!1),d=e.ref(!1),u=e.computed(()=>n.value||f.value||a.value),p=e.computed(()=>`${t.paneLeftWidth-8}px`),o=s=>{l.value||c(),!s.active&&s.to&&r.push(s.to)};return e.onMounted(async()=>{await e.nextTick(),await new Promise(s=>setTimeout(s,500)),d.value=!0}),(s,h)=>{const m=e.resolveComponent("KButton"),P=e.resolveComponent("KTooltip");return e.openBlock(),e.createElementBlock("div",ge,[e.createElementVNode("nav",he,[e.createElementVNode("div",me,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.items,v=>(e.openBlock(),e.createBlock(P,{key:v.tooltip,"kpop-attributes":{offset:"10px"},label:v.tooltip,placement:"right"},{default:e.withCtx(()=>[e.createVNode(m,{appearance:"none","aria-label":v.tooltip,class:e.normalizeClass(["split-pane-nav-item",{active:v.active}]),"data-testid":`kong-ui-public-split-pane-vertical-navigation-nav-item-${v.testid}`,icon:"",size:"large",style:{cursor:"pointer"},to:v.to,onClickCapture:e.withModifiers(W=>o(v),["prevent"])},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(v.icon),{decorative:"",size:e.unref(U)},null,8,["size"]))]),_:2},1032,["aria-label","class","data-testid","to","onClickCapture"])]),_:2},1032,["label"]))),128))]),e.createElementVNode("div",be,[t.paneLeftVisible?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["toggle-left-panel-control",{expanded:e.unref(l),"disable-animation":!d.value||e.unref(f)||e.unref(a)}]),onTransitionend:h[0]||(h[0]=e.withModifiers(v=>n.value=!1,["self"])),onTransitionstart:h[1]||(h[1]=e.withModifiers(v=>n.value=!0,["self"]))},[(e.openBlock(),e.createBlock(P,{key:String(e.unref(l)),"kpop-attributes":e.unref(l)?void 0:{offset:"10px"},label:u.value?void 0:e.unref(l)?e.unref(i).t("actions.collapse_panel"):e.unref(i).t("actions.expand_panel"),placement:e.unref(l)?"left":"right"},{default:e.withCtx(()=>[e.createVNode(m,{appearance:"none","aria-controls":"left-pane","aria-expanded":e.unref(l),"aria-label":e.unref(l)?e.unref(i).t("actions.collapse_panel"):e.unref(i).t("actions.expand_panel"),class:"split-pane-nav-item toggle-left-panel","data-testid":"kong-ui-public-split-pane-toggle-left-panel-button",icon:"",size:"large",onClick:e.unref(c)},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(l)?e.unref(H.ChevronDoubleLeftIcon):e.unref(H.ChevronDoubleRightIcon)),{decorative:"",size:e.unref(U)},null,8,["size"]))]),_:1},8,["aria-expanded","aria-label","onClick"])]),_:1},8,["kpop-attributes","label","placement"]))],34)):e.createCommentVNode("",!0)])])])}}}),J=(t,i)=>{const r=t.__vccOpts||t;for(const[l,c]of i)r[l]=c;return r},ke=J(ve,[["__scopeId","data-v-acbeb50e"]]),Ce={class:"kong-ui-public-split-pane-container"},Re={class:"kong-ui-public-split-pane-container-inner"},we={class:"kong-ui-public-split-pane-panes"},xe=["aria-hidden","tabindex"],ye=["title"],Pe={class:"kong-ui-public-split-pane-container-inner-content"},Le=["aria-hidden","tabindex"],We=["title"],Ee=["aria-hidden","tabindex"],Ne=J(e.defineComponent({__name:"SplitPane",props:{resizable:{type:Boolean,default:!0},showResizeHandle:{type:Boolean,default:!0},showNavigation:{type:Boolean,default:!0},navigationItems:{default:()=>[]},paneLeft:{default:()=>({visible:!0,maxWidth:A})},paneCenter:{default:()=>({visible:!0,maxWidth:F})},paneRight:{default:()=>({visible:!0,maxWidth:j})}},setup(t){e.useCssVars(k=>({v77518bb8:l.value,a7565b74:c.value,v39a6730f:f.value}));const i=e.useSlots(),r=k=>k==="left"?t.paneLeft.maxWidth!==void 0?t.paneLeft.maxWidth:A:k==="center"?t.resizable?"none":t.paneCenter.maxWidth!==void 0?t.paneCenter.maxWidth:F:k==="right"?t.resizable?"none":t.paneRight.maxWidth!==void 0?t.paneRight.maxWidth:j:"none",l=e.computed(()=>r("left")),c=e.computed(()=>r("center")),f=e.computed(()=>r("right")),a=e.useTemplateRef("verticalNavRef"),n=e.useTemplateRef("innerPanesContainerRef"),d=e.useTemplateRef("paneLeftRef"),u=e.useTemplateRef("paneCenterRef"),p=e.useTemplateRef("paneRightRef"),o=e.useTemplateRef("paneLeftDivider"),s=e.useTemplateRef("innerPanesDivider"),{startDraggingInnerPanes:h,startDraggingPaneLeft:m,refreshInnerPaneSizes:P,paneLeftExpanded:v,isDraggingPaneLeft:W,isDraggingInnerPanes:D}=G({verticalNavRef:a,innerPanesContainerRef:n,paneLeftRef:d,paneCenterRef:u,paneRightRef:p}),{i18n:O}=Z(),E=e.computed(()=>!!i["pane-left"]&&t.paneLeft.visible!==!1&&v.value),I=e.computed(()=>!!i["pane-center"]&&t.paneCenter.visible!==!1),V=e.computed(()=>!!i["pane-right"]&&t.paneRight.visible!==!1),g=e.computed(()=>t.resizable&&t.showResizeHandle&&!!i["pane-center"]&&t.paneCenter.visible!==!1&&!!i["pane-right"]&&t.paneRight.visible!==!1),b=q(o),R=q(s),{width:w}=ue(d);return e.watch(()=>t.paneRight.visible,async()=>{t.resizable&&(await e.nextTick(),P())},{flush:"post"}),(k,C)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["kong-ui-public-split-pane",{"has-navigation":t.showNavigation}])},[e.createElementVNode("div",Ce,[t.showNavigation?(e.openBlock(),e.createBlock(ke,{key:0,ref_key:"verticalNavRef",ref:a,items:t.navigationItems,"pane-left-visible":t.paneLeft.visible!==!1,"pane-left-width":e.unref(w)},null,8,["items","pane-left-visible","pane-left-width"])):e.createCommentVNode("",!0),e.createElementVNode("div",Re,[e.createElementVNode("div",we,[e.createElementVNode("div",{id:"kong-ui-public-split-pane-left",ref_key:"paneLeftRef",ref:d,"aria-hidden":E.value?void 0:"true",class:e.normalizeClass(["kong-ui-public-split-pane-pane-left",[{expanded:e.unref(v),"show-resize-border":e.unref(b)},{"is-dragging-pane-left":e.unref(W)},{"is-dragging-pane":e.unref(W)||e.unref(D)}]]),"data-testid":"kong-ui-public-split-pane-pane-left",tabindex:E.value?0:-1},[e.renderSlot(k.$slots,"pane-left",{},void 0,!0)],10,xe),E.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"paneLeftDivider",ref:o,class:"kong-ui-public-split-pane-resize-divider left",tabindex:"0",title:e.unref(O).t("actions.drag_to_resize"),onMousedown:C[0]||(C[0]=(...S)=>e.unref(m)&&e.unref(m)(...S))},[...C[2]||(C[2]=[e.createElementVNode("div",{class:"kong-ui-public-split-pane-drag-handle"},null,-1)])],40,ye)):e.createCommentVNode("",!0),e.createElementVNode("div",Pe,[i.toolbar?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["kong-ui-public-split-pane-toolbar-container",{"has-resize-divider-left":E.value}]),"data-testid":"kong-ui-public-split-pane-toolbar"},[e.renderSlot(k.$slots,"toolbar",{},void 0,!0)],2)):e.createCommentVNode("",!0),e.createElementVNode("div",{ref_key:"innerPanesContainerRef",ref:n,class:"kong-ui-public-split-pane-inner-panes"},[e.withDirectives(e.createElementVNode("div",{ref_key:"paneCenterRef",ref:u,"aria-hidden":I.value?void 0:"true",class:e.normalizeClass(["kong-ui-public-split-pane-pane-center",[{"has-resize-divider-left":E.value},{"has-resize-divider-right":g.value},{"is-dragging-pane":e.unref(W)||e.unref(D)}]]),"data-testid":"kong-ui-public-split-pane-pane-center",tabindex:I.value?0:-1},[e.renderSlot(k.$slots,"pane-center",{},void 0,!0)],10,Le),[[e.vShow,I.value]]),g.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"innerPanesDivider",ref:s,class:"kong-ui-public-split-pane-resize-divider right",tabindex:"0",title:e.unref(O).t("actions.drag_to_resize"),onMousedown:C[1]||(C[1]=(...S)=>e.unref(h)&&e.unref(h)(...S))},[...C[3]||(C[3]=[e.createElementVNode("div",{class:"kong-ui-public-split-pane-drag-handle"},null,-1)])],40,We)):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("div",{ref_key:"paneRightRef",ref:p,"aria-hidden":V.value?void 0:"true",class:e.normalizeClass(["kong-ui-public-split-pane-pane-right",[{"has-toolbar":!!i.toolbar},{"show-resize-border":e.unref(R)},{"is-dragging-inner-panes":e.unref(D)},{"is-dragging-pane":e.unref(W)||e.unref(D)}]]),"data-testid":"kong-ui-public-split-pane-pane-right",tabindex:V.value?0:-1},[e.renderSlot(k.$slots,"pane-right",{},void 0,!0)],10,Ee),[[e.vShow,V.value]])],512)])])])])],2))}}),[["__scopeId","data-v-a2181be5"]]);x.SplitPane=Ne,Object.defineProperty(x,Symbol.toStringTag,{value:"Module"})});

package/dist/style.css

@@ -0,0 +1 @@
+.kong-ui-public-split-pane-vertical-navigation[data-v-acbeb50e]{color:#bee2ff;color:var(--kui-navigation-color-text, #bee2ff);display:flex;height:100%;justify-content:center;padding:8px;padding:var(--kui-space-40, 8px);position:relative;width:52px;z-index:1}.kong-ui-public-split-pane-vertical-navigation .split-pane-nav[data-v-acbeb50e]{align-items:center;display:flex;flex-direction:column;gap:12px;gap:var(--kui-space-50, 12px);justify-content:space-between;width:100%}.kong-ui-public-split-pane-vertical-navigation .split-pane-nav .top[data-v-acbeb50e],.kong-ui-public-split-pane-vertical-navigation .split-pane-nav .bottom[data-v-acbeb50e]{display:flex;flex-direction:column;flex-grow:1;gap:12px;gap:var(--kui-space-50, 12px);position:relative;width:100%}.kong-ui-public-split-pane-vertical-navigation .split-pane-nav .top[data-v-acbeb50e]{align-items:center;justify-content:flex-start}.kong-ui-public-split-pane-vertical-navigation .split-pane-nav .bottom[data-v-acbeb50e]{align-items:center;justify-content:flex-end}.kong-ui-public-split-pane-vertical-navigation .split-pane-nav[data-v-acbeb50e] .k-popover .popover{pointer-events:none}.kong-ui-public-split-pane-vertical-navigation .split-pane-nav-item[data-v-acbeb50e]{align-items:center;background-color:#000933;background-color:var(--kui-navigation-color-background, #000933);border:1px solid transparent;border:var(--kui-border-width-10, 1px) solid var(--kui-color-border-transparent, transparent);border-radius:6px;border-radius:var(--kui-border-radius-30, 6px);color:#bee2ff;color:var(--kui-navigation-color-text, #bee2ff);cursor:pointer;display:flex;justify-content:center;justify-content:space-between;text-decoration:none;transition:color .2s ease;white-space:nowrap}.kong-ui-public-split-pane-vertical-navigation .split-pane-nav-item[data-v-acbeb50e]:hover,.kong-ui-public-split-pane-vertical-navigation .split-pane-nav-item[data-v-acbeb50e]:focus-visible{color:#eefaff;color:var(--kui-navigation-color-text-hover, #eefaff)}.kong-ui-public-split-pane-vertical-navigation .split-pane-nav-item[data-v-acbeb50e]:hover svg,.kong-ui-public-split-pane-vertical-navigation .split-pane-nav-item[data-v-acbeb50e]:focus-visible svg{color:#eefaff;color:var(--kui-navigation-color-text-hover, #eefaff)}.kong-ui-public-split-pane-vertical-navigation .split-pane-nav-item[data-v-acbeb50e]:focus-visible{box-shadow:0 0 0 1px #fff9 inset;box-shadow:var(--kui-navigation-shadow-focus, 0 0 0 1px rgba(255, 255, 255, .6) inset);outline:none}.kong-ui-public-split-pane-vertical-navigation .split-pane-nav-item[data-v-acbeb50e] svg path{color:currentColor;fill:currentColor;transition:all .2s ease-out}.kong-ui-public-split-pane-vertical-navigation .split-pane-nav-item.active[data-v-acbeb50e]{background-color:#ffffff1f;background-color:var(--kui-navigation-color-background-selected, rgba(255, 255, 255, .12));border-color:#ffffff1f;border-color:var(--kui-navigation-color-border, rgba(255, 255, 255, .12));color:#00fabe;color:var(--kui-navigation-color-text-selected, #00fabe)}.kong-ui-public-split-pane-vertical-navigation .split-pane-nav-item.active[data-v-acbeb50e]:hover,.kong-ui-public-split-pane-vertical-navigation .split-pane-nav-item.active[data-v-acbeb50e]:focus-visible{color:#00fabe!important;color:var(--kui-navigation-color-text-selected, #00fabe)!important}.kong-ui-public-split-pane-vertical-navigation .split-pane-nav-item.active[data-v-acbeb50e]:hover svg,.kong-ui-public-split-pane-vertical-navigation .split-pane-nav-item.active[data-v-acbeb50e]:focus-visible svg{color:#00fabe;color:var(--kui-navigation-color-text-selected, #00fabe)}.kong-ui-public-split-pane-vertical-navigation .split-pane-nav-item.toggle-left-panel[data-v-acbeb50e]{border-color:#ffffff1f;border-color:var(--kui-navigation-color-border, rgba(255, 255, 255, .12))}.toggle-left-panel-control[data-v-acbeb50e]{left:0;position:absolute;z-index:1}.toggle-left-panel-control[data-v-acbeb50e]:not(.disable-animation){transition:left .2s ease-out}.toggle-left-panel-control.expanded[data-v-acbeb50e]{left:var(--v01870e39)}[data-v-a2181be5],[data-v-a2181be5] *{box-sizing:border-box}.kong-ui-public-split-pane[data-v-a2181be5]{height:100%}.kong-ui-public-split-pane.has-navigation[data-v-a2181be5]{background-color:#000933;background-color:var(--kui-navigation-color-background, #000933);bottom:0;left:0;position:fixed;right:0;top:0;z-index:2000}.kong-ui-public-split-pane.has-navigation .kong-ui-public-split-pane-container-inner[data-v-a2181be5]{padding-top:6px;padding-top:var(--kui-space-30, 6px)}.kong-ui-public-split-pane-container[data-v-a2181be5]{display:flex;flex-direction:row;height:100%;width:100%}.kong-ui-public-split-pane-container-inner[data-v-a2181be5]{display:flex;flex-direction:column;width:100%}.kong-ui-public-split-pane-container-inner-content[data-v-a2181be5]{display:flex;flex:1 1 auto;flex-direction:column;height:100%;max-height:calc(100vh - 6px);min-width:0;position:relative;width:100%}.kong-ui-public-split-pane-inner-panes[data-v-a2181be5]{display:flex;height:100%;width:100%}.kong-ui-public-split-pane-panes[data-v-a2181be5]{align-items:stretch;background-color:#fff;background-color:var(--kui-color-background, #ffffff);border-top-left-radius:6px;border-top-left-radius:var(--kui-border-radius-30, 6px);display:flex;flex:1 1 auto;flex-direction:row;overflow:hidden;z-index:0}.kong-ui-public-split-pane-pane-left[data-v-a2181be5],.kong-ui-public-split-pane-pane-center[data-v-a2181be5],.kong-ui-public-split-pane-pane-right[data-v-a2181be5]{overflow-x:hidden;overflow-y:auto;position:relative;scrollbar-width:thin}.kong-ui-public-split-pane-pane-left.has-toolbar[data-v-a2181be5],.kong-ui-public-split-pane-pane-center.has-toolbar[data-v-a2181be5],.kong-ui-public-split-pane-pane-right.has-toolbar[data-v-a2181be5]{max-height:calc(100vh - 44px)}.kong-ui-public-split-pane-pane-left.is-dragging-pane[data-v-a2181be5],.kong-ui-public-split-pane-pane-center.is-dragging-pane[data-v-a2181be5],.kong-ui-public-split-pane-pane-right.is-dragging-pane[data-v-a2181be5]{pointer-events:none;transition:none}.kong-ui-public-split-pane-pane-left[data-v-a2181be5]{border-right:1px solid transparent;border-right:var(--kui-border-width-10, 1px) solid var(--kui-color-border-transparent, transparent);border-top-left-radius:6px;border-top-left-radius:var(--kui-border-radius-30, 6px);flex:0 0 auto;max-height:none!important;max-width:0;overflow:hidden;pointer-events:none;position:relative;transition:border-color .1s ease-in-out,max-width .1s ease-in-out;width:260px;will-change:border-color,max-width,min-width;z-index:5}.kong-ui-public-split-pane-pane-left.expanded[data-v-a2181be5]{border-right-color:#e0e4ea;border-right-color:var(--kui-color-border, #e0e4ea);max-width:var(--v77518bb8);pointer-events:auto}.kong-ui-public-split-pane-pane-left.is-dragging-pane-left[data-v-a2181be5],.kong-ui-public-split-pane-pane-left.expanded.show-resize-border[data-v-a2181be5],.kong-ui-public-split-pane-pane-left.show-resize-border[data-v-a2181be5]{border-right-color:#0044f4;border-right-color:var(--kui-color-border-primary, #0044f4)}.kong-ui-public-split-pane-pane-center[data-v-a2181be5]{max-width:var(--a7565b74);min-width:300px;width:300px}.kong-ui-public-split-pane-pane-center.has-resize-divider-left[data-v-a2181be5]{margin-left:-3px}.kong-ui-public-split-pane-pane-center.has-resize-divider-right[data-v-a2181be5]{margin-right:-3px}.kong-ui-public-split-pane-pane-right[data-v-a2181be5]{border-left:1px solid #e0e4ea;border-left:var(--kui-border-width-10, 1px) solid var(--kui-color-border, #e0e4ea);flex:1;max-width:var(--v39a6730f);min-width:300px;transition:border-color .1s ease-in-out}.kong-ui-public-split-pane-pane-right.is-dragging-inner-panes[data-v-a2181be5],.kong-ui-public-split-pane-pane-right.show-resize-border[data-v-a2181be5]{border-left-color:#0044f4;border-left-color:var(--kui-color-border-primary, #0044f4)}.kong-ui-public-split-pane-toolbar-container.has-resize-divider-left[data-v-a2181be5]{margin-left:-3px}.kong-ui-public-split-pane-resize-divider[data-v-a2181be5]{align-self:flex-end;background-color:transparent;background-color:var(--kui-color-background-transparent, transparent);cursor:col-resize;height:calc(100% - 43px);position:relative;transition:all .1s ease-in-out;width:3px;z-index:4}.kong-ui-public-split-pane-resize-divider.left[data-v-a2181be5]{margin-left:0}.kong-ui-public-split-pane-resize-divider.right[data-v-a2181be5]{right:-3px}

package/dist/types/components/SplitPane.vue.d.ts

@@ -0,0 +1,17 @@
+import type { SplitPaneProps } from '../types';
+type __VLS_Slots = {
+    toolbar?: () => any;
+    'pane-left'?: () => any;
+    'pane-center'?: () => any;
+    'pane-right'?: () => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<SplitPaneProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SplitPaneProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=SplitPane.vue.d.ts.map

package/dist/types/components/SplitPane.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitPane.vue.d.ts","sourceRoot":"","sources":["../../../src/components/SplitPane.vue"],"names":[],"mappings":"AAkZA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AA0B9C,KAAK,WAAW,GAAG;IACjB,OAAO,CAAC,EAAE,MAAM,GAAG,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,GAAG,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,GAAG,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,GAAG,CAAA;CACzB,CAAC;AA2RF,QAAA,MAAM,UAAU,wSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/types/components/VerticalNavigation.vue.d.ts

@@ -0,0 +1,10 @@
+import type { VerticalNavigationItem } from '../types';
+type __VLS_Props = {
+    paneLeftWidth?: number;
+    paneLeftVisible?: boolean;
+    items?: VerticalNavigationItem[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=VerticalNavigation.vue.d.ts.map

package/dist/types/components/VerticalNavigation.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalNavigation.vue.d.ts","sourceRoot":"","sources":["../../../src/components/VerticalNavigation.vue"],"names":[],"mappings":"AA+PA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAA;AAEtD,KAAK,WAAW,GAAG;IACjB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,KAAK,CAAC,EAAE,sBAAsB,EAAE,CAAA;CACjC,CAAC;AAqRF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/types/composable/useI18n.d.ts

@@ -0,0 +1,9 @@
+import { createI18n, i18nTComponent } from '@kong-ui-public/i18n';
+import english from '../locales/en.json';
+interface UseI18nReturn {
+    i18n: ReturnType<typeof createI18n<typeof english>>;
+    i18nT: ReturnType<typeof i18nTComponent<typeof english>>;
+}
+export default function useI18n(): UseI18nReturn;
+export {};
+//# sourceMappingURL=useI18n.d.ts.map

package/dist/types/composable/useI18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../../src/composable/useI18n.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AACjE,OAAO,OAAO,MAAM,oBAAoB,CAAA;AAExC,UAAU,aAAa;IACrB,IAAI,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC,CAAA;IACnD,KAAK,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,OAAO,OAAO,CAAC,CAAC,CAAA;CACzD;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,IAAI,aAAa,CAO/C"}

package/dist/types/composable/useSplitPane.d.ts

@@ -0,0 +1,17 @@
+import type { useSplitPaneParams } from '../types';
+/**
+ * Composable for managing split pane layout with resizable panels
+ * @param {useSplitPaneParams} [params]
+ * @returns {Object} Object containing pane state and control functions
+ */
+export default function useSplitPane(params?: useSplitPaneParams): {
+    isDraggingPaneLeft: Readonly<import("vue").Ref<boolean, boolean>>;
+    isDraggingInnerPanes: Readonly<import("vue").Ref<boolean, boolean>>;
+    startDraggingInnerPanes: (e: MouseEvent) => void;
+    refreshInnerPaneSizes: () => void;
+    paneLeftExpanded: Readonly<import("vue").Ref<boolean, boolean>>;
+    togglePaneLeft: () => Promise<void>;
+    startDraggingPaneLeft: (e: MouseEvent) => void;
+    centerPaneWidth: import("vue").Ref<number, number>;
+};
+//# sourceMappingURL=useSplitPane.d.ts.map

package/dist/types/composable/useSplitPane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSplitPane.d.ts","sourceRoot":"","sources":["../../../src/composable/useSplitPane.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAgBlD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,MAAM,CAAC,EAAE,kBAAkB;;;iCA+G1B,UAAU,KAAG,IAAI;iCA5CnB,IAAI;;0BA2JL,OAAO,CAAC,IAAI,CAAC;+BA7DZ,UAAU,KAAG,IAAI;;EA8GpD"}

package/dist/types/constants/split-pane.d.ts

@@ -0,0 +1,9 @@
+/** Default minimum width for the left pane */
+export declare const PANE_LEFT_MIN_WIDTH = "260px";
+/** Default maximum width for the left pane */
+export declare const PANE_LEFT_MAX_WIDTH = "500px";
+/** Default maximum width for the center pane */
+export declare const PANE_CENTER_DEFAULT_MAX_WIDTH: string;
+/** Default maximum width for the right pane */
+export declare const PANE_RIGHT_DEFAULT_MAX_WIDTH: string;
+//# sourceMappingURL=split-pane.d.ts.map

package/dist/types/constants/split-pane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-pane.d.ts","sourceRoot":"","sources":["../../../src/constants/split-pane.ts"],"names":[],"mappings":"AAAA,8CAA8C;AAC9C,eAAO,MAAM,mBAAmB,UAAU,CAAA;AAC1C,8CAA8C;AAC9C,eAAO,MAAM,mBAAmB,UAAU,CAAA;AAC1C,gDAAgD;AAChD,eAAO,MAAM,6BAA6B,EAAE,MAAc,CAAA;AAC1D,+CAA+C;AAC/C,eAAO,MAAM,4BAA4B,EAAE,MAAc,CAAA"}

package/dist/types/index.d.ts

@@ -0,0 +1,4 @@
+import SplitPane from './components/SplitPane.vue';
+export { SplitPane };
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAalD,OAAO,EAAE,SAAS,EAAE,CAAA;AAEpB,cAAc,SAAS,CAAA"}

package/dist/types/types/index.d.ts

@@ -0,0 +1,74 @@
+import type { Component, ShallowRef } from 'vue';
+import type { RouteLocationRaw } from 'vue-router';
+export interface SplitPaneProps {
+    /**
+     * Should the center and right panels allow for resizing
+     * @default true
+     */
+    resizable?: boolean;
+    /**
+     *  Should the resize handle be hidden
+     * @default true
+     */
+    showResizeHandle?: boolean;
+    /**
+     * Show the navigation pane
+     * @default true
+     */
+    showNavigation?: boolean;
+    /**
+     * The items to show in the vertical navigation
+     * @default []
+     */
+    navigationItems?: VerticalNavigationItem[];
+    paneLeft?: {
+        /** Pass false to hide the pane even if it contains slot content */
+        visible?: boolean;
+        maxWidth?: string;
+    };
+    paneCenter?: {
+        /** Pass false to hide the pane even if it contains slot content */
+        visible?: boolean;
+        maxWidth?: string;
+    };
+    paneRight?: {
+        /** Pass false to hide the pane even if it contains slot content */
+        visible?: boolean;
+        maxWidth?: string;
+    };
+}
+export interface VerticalNavigationItem {
+    /**
+     * The route location to navigate to
+     */
+    to?: RouteLocationRaw;
+    /**
+     * The tooltip text to show on hover
+     */
+    tooltip: string;
+    /**
+     * Is the item currently active
+     */
+    active: boolean;
+    /**
+     * The icon to show for the navigation item
+     */
+    icon: Component;
+    /**
+     * The test ID for the navigation item
+     */
+    testid: string;
+}
+export interface useSplitPaneParams {
+    /** The `useTemplateRef()` of the vertical navigation component */
+    verticalNavRef?: Readonly<ShallowRef<any | null>>;
+    /** The `useTemplateRef()` of the resizable pane's parent element */
+    innerPanesContainerRef?: Readonly<ShallowRef<HTMLDivElement | null>>;
+    /** The `useTemplateRef()` of the left pane */
+    paneLeftRef?: Readonly<ShallowRef<HTMLDivElement | null>>;
+    /** The `useTemplateRef()` of the center pane */
+    paneCenterRef?: Readonly<ShallowRef<HTMLDivElement | null>>;
+    /** The `useTemplateRef()` of the right pane */
+    paneRightRef?: Readonly<ShallowRef<HTMLDivElement | null>>;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/types/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAChD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAElD,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;;OAGG;IACH,eAAe,CAAC,EAAE,sBAAsB,EAAE,CAAA;IAC1C,QAAQ,CAAC,EAAE;QACT,mEAAmE;QACnE,OAAO,CAAC,EAAE,OAAO,CAAA;QAEjB,QAAQ,CAAC,EAAE,MAAM,CAAA;KAClB,CAAA;IACD,UAAU,CAAC,EAAE;QACX,mEAAmE;QACnE,OAAO,CAAC,EAAE,OAAO,CAAA;QAEjB,QAAQ,CAAC,EAAE,MAAM,CAAA;KAClB,CAAA;IACD,SAAS,CAAC,EAAE;QACV,mEAAmE;QACnE,OAAO,CAAC,EAAE,OAAO,CAAA;QAEjB,QAAQ,CAAC,EAAE,MAAM,CAAA;KAClB,CAAA;CACF;AAGD,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAA;IACrB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAA;IACf;;OAEG;IACH,MAAM,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,IAAI,EAAE,SAAS,CAAA;IACf;;OAEG;IACH,MAAM,EAAE,MAAM,CAAA;CACf;AAGD,MAAM,WAAW,kBAAkB;IACjC,kEAAkE;IAClE,cAAc,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,CAAA;IACjD,oEAAoE;IACpE,sBAAsB,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC,CAAA;IACpE,8CAA8C;IAC9C,WAAW,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC,CAAA;IACzD,gDAAgD;IAChD,aAAa,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC,CAAA;IAC3D,+CAA+C;IAC/C,YAAY,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC,CAAA;CAC3D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kong-ui-public/split-pane",
-  "version": "0.1.1-pr.2798.c222b7a86.0",
+  "version": "0.1.1-pr.2823.7037e5373.0",
   "type": "module",
   "description": "A shared SplitPane layout component for Vue 3 applications.",
   "main": "./dist/split-pane.umd.js",
@@ -24,7 +24,8 @@
   "devDependencies": {
     "@kong/design-tokens": "1.18.2",
     "@kong/kongponents": "9.49.0",
-    "vue": "^3.5.26"
+    "vue": "^3.5.26",
+    "@kong-ui-public/i18n": "^2.4.5"
   },
   "repository": {
     "type": "git",
@@ -44,8 +45,10 @@
     "errorLimit": "200KB"
   },
   "peerDependencies": {
-    "@kong/kongponents": "9.49.0",
-    "vue": "^3.5.26"
+    "@kong/icons": "^1.41.0",
+    "@kong/kongponents": ">=9.42.0 <10.0.0",
+    "vue": "^3.5.26",
+    "@kong-ui-public/i18n": "^2.4.5"
   },
   "scripts": {
     "dev": "cross-env USE_SANDBOX=true vite",