@kong-ui-public/split-pane 0.1.1-pr.2823.becfc0979.0 → 0.1.1-pr.2823.de75a90a3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/split-pane.es.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { watch as G, getCurrentScope as
|
|
2
|
-
import { ChevronDoubleLeftIcon as
|
|
3
|
-
import { useRouter as
|
|
1
|
+
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 he, useCssVars as ge, resolveComponent as oe, createElementBlock as S, openBlock as L, createElementVNode as y, Fragment as Ce, renderList as Le, createBlock as V, withCtx as Z, createVNode as se, withModifiers as ae, normalizeClass as N, resolveDynamicComponent as le, createCommentVNode as F, useSlots as We, useTemplateRef as I, renderSlot as J, withDirectives as re, vShow as ue } from "vue";
|
|
2
|
+
import { ChevronDoubleLeftIcon as ze, ChevronDoubleRightIcon as De } from "@kong/icons";
|
|
3
|
+
import { useRouter as ke } from "vue-router";
|
|
4
4
|
import { createI18n as _e, i18nTComponent as Ie } from "@kong-ui-public/i18n";
|
|
5
|
-
const Ee = "260px",
|
|
5
|
+
const Ee = "260px", ie = "500px", ce = "50%", de = "50%";
|
|
6
6
|
function te(e) {
|
|
7
|
-
return
|
|
7
|
+
return xe() ? (we(e), !0) : !1;
|
|
8
8
|
}
|
|
9
9
|
const Ne = typeof window < "u" && typeof document < "u";
|
|
10
10
|
typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
|
|
@@ -13,62 +13,62 @@ const Se = (e) => e != null, Te = Object.prototype.toString, Me = (e) => Te.call
|
|
|
13
13
|
function K(e) {
|
|
14
14
|
return Array.isArray(e) ? e : [e];
|
|
15
15
|
}
|
|
16
|
-
function
|
|
16
|
+
function Oe(e) {
|
|
17
17
|
return pe();
|
|
18
18
|
}
|
|
19
|
-
function
|
|
20
|
-
|
|
19
|
+
function Ae(e, n = !0, r) {
|
|
20
|
+
Oe() ? ee(e, r) : n ? e() : j(e);
|
|
21
21
|
}
|
|
22
|
-
function Be(e, n,
|
|
22
|
+
function Be(e, n, r) {
|
|
23
23
|
return G(
|
|
24
24
|
e,
|
|
25
25
|
n,
|
|
26
26
|
{
|
|
27
|
-
...
|
|
27
|
+
...r,
|
|
28
28
|
immediate: !0
|
|
29
29
|
}
|
|
30
30
|
);
|
|
31
31
|
}
|
|
32
|
-
const
|
|
33
|
-
function
|
|
32
|
+
const O = Ne ? window : void 0;
|
|
33
|
+
function D(e) {
|
|
34
34
|
var n;
|
|
35
|
-
const
|
|
36
|
-
return (n =
|
|
35
|
+
const r = $(e);
|
|
36
|
+
return (n = r == null ? void 0 : r.$el) != null ? n : r;
|
|
37
37
|
}
|
|
38
38
|
function U(...e) {
|
|
39
|
-
const n = [],
|
|
39
|
+
const n = [], r = () => {
|
|
40
40
|
n.forEach((t) => t()), n.length = 0;
|
|
41
|
-
}, o = (t, c, f, v) => (t.addEventListener(c, f, v), () => t.removeEventListener(c, f, v)), u =
|
|
41
|
+
}, o = (t, c, f, v) => (t.addEventListener(c, f, v), () => t.removeEventListener(c, f, v)), u = P(() => {
|
|
42
42
|
const t = K($(e[0])).filter((c) => c != null);
|
|
43
43
|
return t.every((c) => typeof c != "string") ? t : void 0;
|
|
44
44
|
}), d = Be(
|
|
45
45
|
() => {
|
|
46
46
|
var t, c;
|
|
47
47
|
return [
|
|
48
|
-
(c = (t = u.value) == null ? void 0 : t.map((f) =>
|
|
48
|
+
(c = (t = u.value) == null ? void 0 : t.map((f) => D(f))) != null ? c : [O].filter((f) => f != null),
|
|
49
49
|
K($(u.value ? e[1] : e[0])),
|
|
50
|
-
K(
|
|
50
|
+
K(l(u.value ? e[2] : e[1])),
|
|
51
51
|
// @ts-expect-error - TypeScript gets the correct types, but somehow still complains
|
|
52
52
|
$(u.value ? e[3] : e[2])
|
|
53
53
|
];
|
|
54
54
|
},
|
|
55
55
|
([t, c, f, v]) => {
|
|
56
|
-
if (
|
|
56
|
+
if (r(), !(t != null && t.length) || !(c != null && c.length) || !(f != null && f.length))
|
|
57
57
|
return;
|
|
58
|
-
const
|
|
58
|
+
const i = Me(v) ? { ...v } : v;
|
|
59
59
|
n.push(
|
|
60
60
|
...t.flatMap(
|
|
61
|
-
(
|
|
62
|
-
(
|
|
61
|
+
(s) => c.flatMap(
|
|
62
|
+
(h) => f.map((g) => o(s, h, g, i))
|
|
63
63
|
)
|
|
64
64
|
)
|
|
65
65
|
);
|
|
66
66
|
},
|
|
67
67
|
{ flush: "post" }
|
|
68
|
-
),
|
|
69
|
-
d(),
|
|
68
|
+
), a = () => {
|
|
69
|
+
d(), r();
|
|
70
70
|
};
|
|
71
|
-
return te(
|
|
71
|
+
return te(r), a;
|
|
72
72
|
}
|
|
73
73
|
// @__NO_SIDE_EFFECTS__
|
|
74
74
|
function He() {
|
|
@@ -80,49 +80,49 @@ function He() {
|
|
|
80
80
|
// @__NO_SIDE_EFFECTS__
|
|
81
81
|
function be(e) {
|
|
82
82
|
const n = /* @__PURE__ */ He();
|
|
83
|
-
return
|
|
83
|
+
return P(() => (n.value, !!e()));
|
|
84
84
|
}
|
|
85
|
-
function Xe(e, n,
|
|
86
|
-
const { window: o =
|
|
85
|
+
function Xe(e, n, r = {}) {
|
|
86
|
+
const { window: o = O, ...u } = r;
|
|
87
87
|
let d;
|
|
88
|
-
const
|
|
88
|
+
const a = /* @__PURE__ */ be(() => o && "MutationObserver" in o), t = () => {
|
|
89
89
|
d && (d.disconnect(), d = void 0);
|
|
90
|
-
}, c =
|
|
91
|
-
const
|
|
92
|
-
return new Set(
|
|
90
|
+
}, c = P(() => {
|
|
91
|
+
const s = $(e), h = K(s).map(D).filter(Se);
|
|
92
|
+
return new Set(h);
|
|
93
93
|
}), f = G(
|
|
94
94
|
c,
|
|
95
|
-
(
|
|
96
|
-
t(),
|
|
95
|
+
(s) => {
|
|
96
|
+
t(), a.value && s.size && (d = new MutationObserver(n), s.forEach((h) => d.observe(h, u)));
|
|
97
97
|
},
|
|
98
98
|
{ immediate: !0, flush: "post" }
|
|
99
|
-
), v = () => d == null ? void 0 : d.takeRecords(),
|
|
99
|
+
), v = () => d == null ? void 0 : d.takeRecords(), i = () => {
|
|
100
100
|
f(), t();
|
|
101
101
|
};
|
|
102
|
-
return te(
|
|
103
|
-
isSupported:
|
|
104
|
-
stop:
|
|
102
|
+
return te(i), {
|
|
103
|
+
isSupported: a,
|
|
104
|
+
stop: i,
|
|
105
105
|
takeRecords: v
|
|
106
106
|
};
|
|
107
107
|
}
|
|
108
|
-
function Ve(e, n,
|
|
108
|
+
function Ve(e, n, r = {}) {
|
|
109
109
|
const {
|
|
110
|
-
window: o =
|
|
110
|
+
window: o = O,
|
|
111
111
|
document: u = o == null ? void 0 : o.document,
|
|
112
112
|
flush: d = "sync"
|
|
113
|
-
} =
|
|
113
|
+
} = r;
|
|
114
114
|
if (!o || !u)
|
|
115
115
|
return $e;
|
|
116
|
-
let
|
|
116
|
+
let a;
|
|
117
117
|
const t = (v) => {
|
|
118
|
-
|
|
119
|
-
}, c =
|
|
120
|
-
const v =
|
|
118
|
+
a == null || a(), a = v;
|
|
119
|
+
}, c = ye(() => {
|
|
120
|
+
const v = D(e);
|
|
121
121
|
if (v) {
|
|
122
|
-
const { stop:
|
|
122
|
+
const { stop: i } = Xe(
|
|
123
123
|
u,
|
|
124
|
-
(
|
|
125
|
-
|
|
124
|
+
(s) => {
|
|
125
|
+
s.map((g) => [...g.removedNodes]).flat().some((g) => g === v || g.contains(v)) && n(s);
|
|
126
126
|
},
|
|
127
127
|
{
|
|
128
128
|
window: o,
|
|
@@ -130,28 +130,28 @@ function Ve(e, n, l = {}) {
|
|
|
130
130
|
subtree: !0
|
|
131
131
|
}
|
|
132
132
|
);
|
|
133
|
-
t(
|
|
133
|
+
t(i);
|
|
134
134
|
}
|
|
135
135
|
}, { flush: d }), f = () => {
|
|
136
136
|
c(), t();
|
|
137
137
|
};
|
|
138
138
|
return te(f), f;
|
|
139
139
|
}
|
|
140
|
-
function Fe(e, n,
|
|
141
|
-
const { window: o =
|
|
140
|
+
function Fe(e, n, r = {}) {
|
|
141
|
+
const { window: o = O, ...u } = r;
|
|
142
142
|
let d;
|
|
143
|
-
const
|
|
143
|
+
const a = /* @__PURE__ */ be(() => o && "ResizeObserver" in o), t = () => {
|
|
144
144
|
d && (d.disconnect(), d = void 0);
|
|
145
|
-
}, c =
|
|
146
|
-
const
|
|
147
|
-
return Array.isArray(
|
|
145
|
+
}, c = P(() => {
|
|
146
|
+
const i = $(e);
|
|
147
|
+
return Array.isArray(i) ? i.map((s) => D(s)) : [D(i)];
|
|
148
148
|
}), f = G(
|
|
149
149
|
c,
|
|
150
|
-
(
|
|
151
|
-
if (t(),
|
|
150
|
+
(i) => {
|
|
151
|
+
if (t(), a.value && o) {
|
|
152
152
|
d = new ResizeObserver(n);
|
|
153
|
-
for (const
|
|
154
|
-
|
|
153
|
+
for (const s of i)
|
|
154
|
+
s && d.observe(s, u);
|
|
155
155
|
}
|
|
156
156
|
},
|
|
157
157
|
{ immediate: !0, flush: "post" }
|
|
@@ -159,141 +159,141 @@ function Fe(e, n, l = {}) {
|
|
|
159
159
|
t(), f();
|
|
160
160
|
};
|
|
161
161
|
return te(v), {
|
|
162
|
-
isSupported:
|
|
162
|
+
isSupported: a,
|
|
163
163
|
stop: v
|
|
164
164
|
};
|
|
165
165
|
}
|
|
166
166
|
function fe(e, n = {}) {
|
|
167
167
|
const {
|
|
168
|
-
delayEnter:
|
|
168
|
+
delayEnter: r = 0,
|
|
169
169
|
delayLeave: o = 0,
|
|
170
170
|
triggerOnRemoval: u = !1,
|
|
171
|
-
window: d =
|
|
172
|
-
} = n,
|
|
171
|
+
window: d = O
|
|
172
|
+
} = n, a = Y(!1);
|
|
173
173
|
let t;
|
|
174
174
|
const c = (f) => {
|
|
175
|
-
const v = f ?
|
|
176
|
-
t && (clearTimeout(t), t = void 0), v ? t = setTimeout(() =>
|
|
175
|
+
const v = f ? r : o;
|
|
176
|
+
t && (clearTimeout(t), t = void 0), v ? t = setTimeout(() => a.value = f, v) : a.value = f;
|
|
177
177
|
};
|
|
178
178
|
return d && (U(e, "mouseenter", () => c(!0), { passive: !0 }), U(e, "mouseleave", () => c(!1), { passive: !0 }), u && Ve(
|
|
179
|
-
|
|
179
|
+
P(() => D(e)),
|
|
180
180
|
() => c(!1)
|
|
181
|
-
)),
|
|
181
|
+
)), a;
|
|
182
182
|
}
|
|
183
|
-
function Ke(e, n = { width: 0, height: 0 },
|
|
184
|
-
const { window: o =
|
|
185
|
-
var
|
|
186
|
-
return (
|
|
187
|
-
}),
|
|
183
|
+
function Ke(e, n = { width: 0, height: 0 }, r = {}) {
|
|
184
|
+
const { window: o = O, box: u = "content-box" } = r, d = P(() => {
|
|
185
|
+
var i, s;
|
|
186
|
+
return (s = (i = D(e)) == null ? void 0 : i.namespaceURI) == null ? void 0 : s.includes("svg");
|
|
187
|
+
}), a = Y(n.width), t = Y(n.height), { stop: c } = Fe(
|
|
188
188
|
e,
|
|
189
|
-
([
|
|
190
|
-
const
|
|
189
|
+
([i]) => {
|
|
190
|
+
const s = u === "border-box" ? i.borderBoxSize : u === "content-box" ? i.contentBoxSize : i.devicePixelContentBoxSize;
|
|
191
191
|
if (o && d.value) {
|
|
192
|
-
const
|
|
193
|
-
if (
|
|
194
|
-
const
|
|
195
|
-
|
|
192
|
+
const h = D(e);
|
|
193
|
+
if (h) {
|
|
194
|
+
const g = h.getBoundingClientRect();
|
|
195
|
+
a.value = g.width, t.value = g.height;
|
|
196
196
|
}
|
|
197
|
-
} else if (
|
|
198
|
-
const
|
|
199
|
-
|
|
197
|
+
} else if (s) {
|
|
198
|
+
const h = K(s);
|
|
199
|
+
a.value = h.reduce((g, { inlineSize: z }) => g + z, 0), t.value = h.reduce((g, { blockSize: z }) => g + z, 0);
|
|
200
200
|
} else
|
|
201
|
-
|
|
201
|
+
a.value = i.contentRect.width, t.value = i.contentRect.height;
|
|
202
202
|
},
|
|
203
|
-
|
|
203
|
+
r
|
|
204
204
|
);
|
|
205
|
-
|
|
206
|
-
const
|
|
207
|
-
|
|
205
|
+
Ae(() => {
|
|
206
|
+
const i = D(e);
|
|
207
|
+
i && (a.value = "offsetWidth" in i ? i.offsetWidth : n.width, t.value = "offsetHeight" in i ? i.offsetHeight : n.height);
|
|
208
208
|
});
|
|
209
209
|
const f = G(
|
|
210
|
-
() =>
|
|
211
|
-
(
|
|
212
|
-
|
|
210
|
+
() => D(e),
|
|
211
|
+
(i) => {
|
|
212
|
+
a.value = i ? n.width : 0, t.value = i ? n.height : 0;
|
|
213
213
|
}
|
|
214
214
|
);
|
|
215
215
|
function v() {
|
|
216
216
|
c(), f();
|
|
217
217
|
}
|
|
218
218
|
return {
|
|
219
|
-
width:
|
|
219
|
+
width: a,
|
|
220
220
|
height: t,
|
|
221
221
|
stop: v
|
|
222
222
|
};
|
|
223
223
|
}
|
|
224
224
|
const ve = "20px", M = m(!1), E = m(!1), Q = m(!0), X = m(0);
|
|
225
225
|
function me(e) {
|
|
226
|
-
const n = (e == null ? void 0 : e.verticalNavRef) || m(null),
|
|
227
|
-
var b,
|
|
226
|
+
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), a = (p) => {
|
|
227
|
+
var b, C, W, x, w;
|
|
228
228
|
switch (p) {
|
|
229
229
|
case "verticalNav":
|
|
230
230
|
return ((b = n.value) == null ? void 0 : b.offsetWidth) || 0;
|
|
231
231
|
case "innerPanesContainer":
|
|
232
|
-
return ((
|
|
232
|
+
return ((C = r.value) == null ? void 0 : C.offsetWidth) || 0;
|
|
233
233
|
case "paneLeft":
|
|
234
|
-
return ((
|
|
234
|
+
return ((W = o.value) == null ? void 0 : W.offsetWidth) || 0;
|
|
235
235
|
case "paneCenter":
|
|
236
|
-
return ((
|
|
236
|
+
return ((x = u.value) == null ? void 0 : x.offsetWidth) || 0;
|
|
237
237
|
case "paneRight":
|
|
238
|
-
return ((
|
|
238
|
+
return ((w = d.value) == null ? void 0 : w.offsetWidth) || 0;
|
|
239
239
|
default:
|
|
240
240
|
return 0;
|
|
241
241
|
}
|
|
242
|
-
}, t = m(50), c = m(0), f = m(0), v = m(0),
|
|
242
|
+
}, t = m(50), c = m(0), f = m(0), v = m(0), i = m(0), s = (p) => {
|
|
243
243
|
if (u.value) {
|
|
244
244
|
if (p) {
|
|
245
|
-
u.value.style.width = `${p}%`, X.value =
|
|
245
|
+
u.value.style.width = `${p}%`, X.value = a("paneCenter");
|
|
246
246
|
return;
|
|
247
247
|
} else (typeof t.value != "number" || !isFinite(t.value)) && (t.value = 38);
|
|
248
|
-
u.value.style.width = `${t.value}%`, X.value =
|
|
248
|
+
u.value.style.width = `${t.value}%`, X.value = a("paneCenter");
|
|
249
249
|
}
|
|
250
|
-
}, g = () => {
|
|
251
|
-
var p;
|
|
252
|
-
u.value && ((p = d.value) == null ? void 0 : p.style.display) === "none" ? r(100) : r();
|
|
253
250
|
}, h = () => {
|
|
254
|
-
var
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
251
|
+
var p;
|
|
252
|
+
u.value && ((p = d.value) == null ? void 0 : p.style.display) === "none" ? s(100) : s();
|
|
253
|
+
}, g = () => {
|
|
254
|
+
var W;
|
|
255
|
+
if (!r.value || !u.value) return;
|
|
256
|
+
const p = 100, b = a("innerPanesContainer") - a("verticalNav") - a("paneLeft") - p, C = t.value / 100 * a("innerPanesContainer");
|
|
257
|
+
if (C < p ? t.value = p / a("innerPanesContainer") * 100 : C > b && (t.value = b / a("innerPanesContainer") * 100), u.value && d.value && ((W = d.value) == null ? void 0 : W.style.display) === "none") {
|
|
258
|
+
s(100);
|
|
259
259
|
return;
|
|
260
260
|
}
|
|
261
|
-
|
|
262
|
-
},
|
|
261
|
+
s();
|
|
262
|
+
}, z = (p) => {
|
|
263
263
|
!u.value || p.button !== 0 || (E.value = !0, c.value = p.clientX, f.value = u.value.offsetWidth || 0, document.body.style.userSelect = "none");
|
|
264
264
|
}, R = (p) => {
|
|
265
|
-
if (!E.value || !
|
|
266
|
-
const b =
|
|
267
|
-
t.value = Math.min(Math.max(
|
|
268
|
-
},
|
|
265
|
+
if (!E.value || !r.value || !u.value) return;
|
|
266
|
+
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;
|
|
267
|
+
t.value = Math.min(Math.max(w, x), H), s();
|
|
268
|
+
}, k = () => {
|
|
269
269
|
E.value = !1, document.body.style.userSelect = "";
|
|
270
270
|
}, T = (p) => {
|
|
271
|
-
!o.value || !Q.value || p.button !== 0 || (M.value = !0, v.value = p.clientX,
|
|
271
|
+
!o.value || !Q.value || p.button !== 0 || (M.value = !0, v.value = p.clientX, i.value = o.value.offsetWidth || 0, document.body.style.userSelect = "none");
|
|
272
272
|
}, q = (p) => {
|
|
273
273
|
if (!M.value || !o.value) return;
|
|
274
|
-
let b =
|
|
275
|
-
const
|
|
276
|
-
b <
|
|
274
|
+
let b = i.value + (p.clientX - v.value);
|
|
275
|
+
const C = Number(Ee.replace(/px$/i, "")), W = Number(ie.replace(/px$/i, ""));
|
|
276
|
+
b < C && (b = C), b > W && (b = W), o.value.style.width = `${b}px`, v.value = p.clientX, i.value = b, X.value = a("paneCenter");
|
|
277
277
|
}, _ = () => {
|
|
278
278
|
M.value = !1, document.body.style.userSelect = "";
|
|
279
|
-
},
|
|
280
|
-
E.value ||
|
|
279
|
+
}, A = () => {
|
|
280
|
+
E.value || g();
|
|
281
281
|
}, B = async () => {
|
|
282
282
|
Q.value = !Q.value;
|
|
283
283
|
};
|
|
284
|
-
return U(window, "resize",
|
|
285
|
-
await j(), u.value && (
|
|
286
|
-
X.value =
|
|
284
|
+
return U(window, "resize", A), ee(async () => {
|
|
285
|
+
await j(), u.value && (g(), await j(), s(), requestAnimationFrame(() => {
|
|
286
|
+
X.value = a("paneCenter");
|
|
287
287
|
}));
|
|
288
288
|
}), U(document, "mousemove", (p) => {
|
|
289
289
|
E.value && R(p), M.value && q(p);
|
|
290
290
|
}), U(document, "mouseup", () => {
|
|
291
|
-
E.value &&
|
|
291
|
+
E.value && k(), M.value && _();
|
|
292
292
|
}), {
|
|
293
293
|
isDraggingPaneLeft: ne(M),
|
|
294
294
|
isDraggingInnerPanes: ne(E),
|
|
295
|
-
startDraggingInnerPanes:
|
|
296
|
-
refreshInnerPaneSizes:
|
|
295
|
+
startDraggingInnerPanes: z,
|
|
296
|
+
refreshInnerPaneSizes: h,
|
|
297
297
|
// Toggle the left pane
|
|
298
298
|
paneLeftExpanded: ne(Q),
|
|
299
299
|
togglePaneLeft: B,
|
|
@@ -317,7 +317,7 @@ function Re() {
|
|
|
317
317
|
// Translation component <i18n-t>
|
|
318
318
|
};
|
|
319
319
|
}
|
|
320
|
-
const Ge = { class: "kong-ui-public-split-pane-vertical-navigation" }, qe = { class: "split-pane-nav" }, Ze = { class: "top" }, Je = { class: "bottom" }, Qe = /* @__PURE__ */
|
|
320
|
+
const Ge = { class: "kong-ui-public-split-pane-vertical-navigation" }, qe = { class: "split-pane-nav" }, Ze = { class: "top" }, Je = { class: "bottom" }, Qe = /* @__PURE__ */ he({
|
|
321
321
|
__name: "VerticalNavigation",
|
|
322
322
|
props: {
|
|
323
323
|
paneLeftWidth: { default: 0 },
|
|
@@ -325,29 +325,27 @@ const Ge = { class: "kong-ui-public-split-pane-vertical-navigation" }, qe = { cl
|
|
|
325
325
|
items: { default: () => [] }
|
|
326
326
|
},
|
|
327
327
|
setup(e) {
|
|
328
|
-
|
|
329
|
-
|
|
328
|
+
ge((s) => ({
|
|
329
|
+
v01870e39: v.value
|
|
330
330
|
}));
|
|
331
|
-
const { i18n: n } = Re(),
|
|
332
|
-
o.value || u(), !
|
|
331
|
+
const { i18n: n } = Re(), r = ke(), { paneLeftExpanded: o, togglePaneLeft: u, isDraggingPaneLeft: d, isDraggingInnerPanes: a } = me(), t = m(!1), c = m(!1), f = P(() => t.value || d.value || a.value), v = P(() => `${e.paneLeftWidth - 8}px`), i = (s) => {
|
|
332
|
+
o.value || u(), !s.active && s.to && r.push(s.to);
|
|
333
333
|
};
|
|
334
334
|
return ee(async () => {
|
|
335
|
-
await j(),
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
C("div", Ze, [
|
|
343
|
-
(w(!0), S(ke, null, we(e.items, (R) => (w(), V(W, {
|
|
335
|
+
await j(), await new Promise((s) => setTimeout(s, 500)), c.value = !0;
|
|
336
|
+
}), (s, h) => {
|
|
337
|
+
const g = oe("KButton"), z = oe("KTooltip");
|
|
338
|
+
return L(), S("div", Ge, [
|
|
339
|
+
y("nav", qe, [
|
|
340
|
+
y("div", Ze, [
|
|
341
|
+
(L(!0), S(Ce, null, Le(e.items, (R) => (L(), V(z, {
|
|
344
342
|
key: R.tooltip,
|
|
345
343
|
"kpop-attributes": { offset: "10px" },
|
|
346
344
|
label: R.tooltip,
|
|
347
345
|
placement: "right"
|
|
348
346
|
}, {
|
|
349
347
|
default: Z(() => [
|
|
350
|
-
se(
|
|
348
|
+
se(g, {
|
|
351
349
|
appearance: "none",
|
|
352
350
|
"aria-label": R.tooltip,
|
|
353
351
|
class: N(["split-pane-nav-item", { active: R.active }]),
|
|
@@ -356,12 +354,12 @@ const Ge = { class: "kong-ui-public-split-pane-vertical-navigation" }, qe = { cl
|
|
|
356
354
|
size: "large",
|
|
357
355
|
style: { cursor: "pointer" },
|
|
358
356
|
to: R.to,
|
|
359
|
-
onClickCapture:
|
|
357
|
+
onClickCapture: ae((k) => i(R), ["prevent"])
|
|
360
358
|
}, {
|
|
361
359
|
default: Z(() => [
|
|
362
|
-
(
|
|
360
|
+
(L(), V(le(R.icon), {
|
|
363
361
|
decorative: "",
|
|
364
|
-
size:
|
|
362
|
+
size: l(ve)
|
|
365
363
|
}, null, 8, ["size"]))
|
|
366
364
|
]),
|
|
367
365
|
_: 2
|
|
@@ -370,38 +368,38 @@ const Ge = { class: "kong-ui-public-split-pane-vertical-navigation" }, qe = { cl
|
|
|
370
368
|
_: 2
|
|
371
369
|
}, 1032, ["label"]))), 128))
|
|
372
370
|
]),
|
|
373
|
-
|
|
374
|
-
e.paneLeftVisible ? (
|
|
371
|
+
y("div", Je, [
|
|
372
|
+
e.paneLeftVisible ? (L(), S("div", {
|
|
375
373
|
key: 0,
|
|
376
374
|
class: N(["toggle-left-panel-control", {
|
|
377
|
-
expanded:
|
|
378
|
-
"disable-animation":
|
|
375
|
+
expanded: l(o),
|
|
376
|
+
"disable-animation": !c.value || l(d) || l(a)
|
|
379
377
|
}]),
|
|
380
|
-
onTransitionend:
|
|
381
|
-
onTransitionstart:
|
|
378
|
+
onTransitionend: h[0] || (h[0] = ae((R) => t.value = !1, ["self"])),
|
|
379
|
+
onTransitionstart: h[1] || (h[1] = ae((R) => t.value = !0, ["self"]))
|
|
382
380
|
}, [
|
|
383
|
-
(
|
|
384
|
-
key: String(
|
|
385
|
-
"kpop-attributes":
|
|
386
|
-
label: f.value ? void 0 :
|
|
387
|
-
placement:
|
|
381
|
+
(L(), V(z, {
|
|
382
|
+
key: String(l(o)),
|
|
383
|
+
"kpop-attributes": l(o) ? void 0 : { offset: "10px" },
|
|
384
|
+
label: f.value ? void 0 : l(o) ? l(n).t("actions.collapse_panel") : l(n).t("actions.expand_panel"),
|
|
385
|
+
placement: l(o) ? "left" : "right"
|
|
388
386
|
}, {
|
|
389
387
|
default: Z(() => [
|
|
390
|
-
se(
|
|
388
|
+
se(g, {
|
|
391
389
|
appearance: "none",
|
|
392
390
|
"aria-controls": "left-pane",
|
|
393
|
-
"aria-expanded":
|
|
394
|
-
"aria-label":
|
|
391
|
+
"aria-expanded": l(o),
|
|
392
|
+
"aria-label": l(o) ? l(n).t("actions.collapse_panel") : l(n).t("actions.expand_panel"),
|
|
395
393
|
class: "split-pane-nav-item toggle-left-panel",
|
|
396
394
|
"data-testid": "kong-ui-public-split-pane-toggle-left-panel-button",
|
|
397
395
|
icon: "",
|
|
398
396
|
size: "large",
|
|
399
|
-
onClick:
|
|
397
|
+
onClick: l(u)
|
|
400
398
|
}, {
|
|
401
399
|
default: Z(() => [
|
|
402
|
-
(
|
|
400
|
+
(L(), V(le(l(o) ? l(ze) : l(De)), {
|
|
403
401
|
decorative: "",
|
|
404
|
-
size:
|
|
402
|
+
size: l(ve)
|
|
405
403
|
}, null, 8, ["size"]))
|
|
406
404
|
]),
|
|
407
405
|
_: 1
|
|
@@ -415,12 +413,12 @@ const Ge = { class: "kong-ui-public-split-pane-vertical-navigation" }, qe = { cl
|
|
|
415
413
|
]);
|
|
416
414
|
};
|
|
417
415
|
}
|
|
418
|
-
}),
|
|
419
|
-
const
|
|
416
|
+
}), Pe = (e, n) => {
|
|
417
|
+
const r = e.__vccOpts || e;
|
|
420
418
|
for (const [o, u] of n)
|
|
421
|
-
|
|
422
|
-
return
|
|
423
|
-
}, Ye = /* @__PURE__ */
|
|
419
|
+
r[o] = u;
|
|
420
|
+
return r;
|
|
421
|
+
}, Ye = /* @__PURE__ */ Pe(Qe, [["__scopeId", "data-v-acbeb50e"]]), et = { class: "split-pane-container" }, tt = { class: "split-pane-container-inner" }, nt = { class: "panes" }, at = ["aria-hidden", "tabindex"], it = ["title"], ot = { class: "split-pane-container-inner-content" }, st = ["aria-hidden", "tabindex"], lt = ["title"], rt = ["aria-hidden", "tabindex"], ut = /* @__PURE__ */ he({
|
|
424
422
|
__name: "SplitPane",
|
|
425
423
|
props: {
|
|
426
424
|
resizable: { type: Boolean, default: !0 },
|
|
@@ -430,7 +428,7 @@ const Ge = { class: "kong-ui-public-split-pane-vertical-navigation" }, qe = { cl
|
|
|
430
428
|
paneLeft: { default: () => ({
|
|
431
429
|
/** Pass false to hide the panel even if it contains slot content */
|
|
432
430
|
visible: !0,
|
|
433
|
-
maxWidth:
|
|
431
|
+
maxWidth: ie
|
|
434
432
|
}) },
|
|
435
433
|
paneCenter: { default: () => ({
|
|
436
434
|
/** Pass false to hide the panel even if it contains slot content */
|
|
@@ -444,103 +442,107 @@ const Ge = { class: "kong-ui-public-split-pane-vertical-navigation" }, qe = { cl
|
|
|
444
442
|
}) }
|
|
445
443
|
},
|
|
446
444
|
setup(e) {
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
445
|
+
ge((x) => ({
|
|
446
|
+
v11b75b14: o.value,
|
|
447
|
+
v44843aa2: u.value,
|
|
448
|
+
v280ae19a: d.value
|
|
451
449
|
}));
|
|
452
|
-
const n =
|
|
453
|
-
verticalNavRef:
|
|
450
|
+
const n = We(), r = (x) => x === "left" ? e.paneLeft.maxWidth !== void 0 ? e.paneLeft.maxWidth : ie : 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")), a = I("verticalNavRef"), t = I("innerPanesContainerRef"), c = I("paneLeftRef"), f = I("paneCenterRef"), v = I("paneRightRef"), i = I("paneLeftDivider"), s = I("innerPanesDivider"), { startDraggingInnerPanes: h, startDraggingPaneLeft: g, refreshInnerPaneSizes: z, paneLeftExpanded: R, isDraggingPaneLeft: k, isDraggingInnerPanes: T } = me({
|
|
451
|
+
verticalNavRef: a,
|
|
454
452
|
innerPanesContainerRef: t,
|
|
455
453
|
paneLeftRef: c,
|
|
456
454
|
paneCenterRef: f,
|
|
457
455
|
paneRightRef: v
|
|
458
|
-
}), { i18n: q } = Re(), _ =
|
|
456
|
+
}), { 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(i), C = fe(s), { width: W } = Ke(c);
|
|
459
457
|
return G(() => e.paneRight.visible, async () => {
|
|
460
|
-
e.resizable && (await j(),
|
|
461
|
-
}, { flush: "post" }), (
|
|
458
|
+
e.resizable && (await j(), z());
|
|
459
|
+
}, { flush: "post" }), (x, w) => (L(), S("div", {
|
|
462
460
|
class: N(["kong-ui-public-split-pane", { "has-navigation": e.showNavigation }])
|
|
463
461
|
}, [
|
|
464
|
-
|
|
465
|
-
e.showNavigation ? (
|
|
462
|
+
y("div", et, [
|
|
463
|
+
e.showNavigation ? (L(), V(Ye, {
|
|
466
464
|
key: 0,
|
|
467
465
|
ref_key: "verticalNavRef",
|
|
468
|
-
ref:
|
|
466
|
+
ref: a,
|
|
469
467
|
items: e.navigationItems,
|
|
470
468
|
"pane-left-visible": e.paneLeft.visible !== !1,
|
|
471
|
-
"pane-left-width":
|
|
469
|
+
"pane-left-width": l(W)
|
|
472
470
|
}, null, 8, ["items", "pane-left-visible", "pane-left-width"])) : F("", !0),
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
id: "kong-ui-public-split-pane-left",
|
|
471
|
+
y("div", tt, [
|
|
472
|
+
y("div", nt, [
|
|
473
|
+
y("div", {
|
|
477
474
|
ref_key: "paneLeftRef",
|
|
478
475
|
ref: c,
|
|
479
476
|
"aria-hidden": _.value ? void 0 : "true",
|
|
480
|
-
class: N(["
|
|
481
|
-
"data-testid": "
|
|
477
|
+
class: N(["split-pane-left", [{ expanded: l(R), "show-resize-border": l(b) }, { "is-dragging-pane-left": l(k) }, { "is-dragging-pane": l(k) || l(T) }]]),
|
|
478
|
+
"data-testid": "split-pane-left",
|
|
482
479
|
tabindex: _.value ? 0 : -1
|
|
483
480
|
}, [
|
|
484
|
-
J(
|
|
485
|
-
], 10,
|
|
486
|
-
_.value ? (
|
|
481
|
+
J(x.$slots, "pane-left", {}, void 0, !0)
|
|
482
|
+
], 10, at),
|
|
483
|
+
_.value ? (L(), S("div", {
|
|
487
484
|
key: 0,
|
|
488
485
|
ref_key: "paneLeftDivider",
|
|
489
|
-
ref:
|
|
490
|
-
class: "
|
|
486
|
+
ref: i,
|
|
487
|
+
class: "split-pane-resize-divider left",
|
|
491
488
|
tabindex: "0",
|
|
492
|
-
title:
|
|
493
|
-
onMousedown:
|
|
494
|
-
(...H) =>
|
|
495
|
-
}, [...
|
|
496
|
-
|
|
497
|
-
])], 40,
|
|
498
|
-
|
|
499
|
-
n.toolbar ? (
|
|
489
|
+
title: l(q).t("actions.drag_to_resize"),
|
|
490
|
+
onMousedown: w[0] || (w[0] = //@ts-ignore
|
|
491
|
+
(...H) => l(g) && l(g)(...H))
|
|
492
|
+
}, [...w[2] || (w[2] = [
|
|
493
|
+
y("div", { class: "split-pane-drag-handle" }, null, -1)
|
|
494
|
+
])], 40, it)) : F("", !0),
|
|
495
|
+
y("div", ot, [
|
|
496
|
+
n.toolbar ? (L(), S("div", {
|
|
500
497
|
key: 0,
|
|
501
|
-
class: N(["
|
|
502
|
-
"data-testid": "
|
|
498
|
+
class: N(["split-pane-toolbar-container", { "has-resize-divider-left": _.value }]),
|
|
499
|
+
"data-testid": "split-pane-toolbar"
|
|
503
500
|
}, [
|
|
504
|
-
J(
|
|
501
|
+
J(x.$slots, "toolbar", {}, void 0, !0)
|
|
505
502
|
], 2)) : F("", !0),
|
|
506
|
-
|
|
503
|
+
y("div", {
|
|
507
504
|
ref_key: "innerPanesContainerRef",
|
|
508
505
|
ref: t,
|
|
509
|
-
class: "
|
|
506
|
+
class: "split-pane-inner-panes"
|
|
510
507
|
}, [
|
|
511
|
-
re(
|
|
508
|
+
re(y("div", {
|
|
512
509
|
ref_key: "paneCenterRef",
|
|
513
510
|
ref: f,
|
|
514
|
-
"aria-hidden":
|
|
515
|
-
class: N(["
|
|
516
|
-
"data-testid": "
|
|
517
|
-
tabindex:
|
|
511
|
+
"aria-hidden": A.value ? void 0 : "true",
|
|
512
|
+
class: N(["split-pane-center", [{ "has-resize-divider-left": _.value }, { "has-resize-divider-right": p.value }, { "is-dragging-pane": l(k) || l(T) }]]),
|
|
513
|
+
"data-testid": "split-pane-center",
|
|
514
|
+
tabindex: A.value ? 0 : -1
|
|
518
515
|
}, [
|
|
519
|
-
J(
|
|
516
|
+
J(x.$slots, "pane-center", {}, void 0, !0)
|
|
520
517
|
], 10, st), [
|
|
521
|
-
[ue,
|
|
518
|
+
[ue, A.value]
|
|
522
519
|
]),
|
|
523
|
-
p.value ? (
|
|
520
|
+
p.value ? (L(), S("div", {
|
|
524
521
|
key: 0,
|
|
525
522
|
ref_key: "innerPanesDivider",
|
|
526
|
-
ref:
|
|
527
|
-
class: "
|
|
523
|
+
ref: s,
|
|
524
|
+
class: "split-pane-resize-divider right",
|
|
528
525
|
tabindex: "0",
|
|
529
|
-
title:
|
|
530
|
-
onMousedown:
|
|
531
|
-
(...H) =>
|
|
532
|
-
}, [...
|
|
533
|
-
|
|
526
|
+
title: l(q).t("actions.drag_to_resize"),
|
|
527
|
+
onMousedown: w[1] || (w[1] = //@ts-ignore
|
|
528
|
+
(...H) => l(h) && l(h)(...H))
|
|
529
|
+
}, [...w[3] || (w[3] = [
|
|
530
|
+
y("div", { class: "split-pane-drag-handle" }, null, -1)
|
|
534
531
|
])], 40, lt)) : F("", !0),
|
|
535
|
-
re(
|
|
532
|
+
re(y("div", {
|
|
536
533
|
ref_key: "paneRightRef",
|
|
537
534
|
ref: v,
|
|
538
535
|
"aria-hidden": B.value ? void 0 : "true",
|
|
539
|
-
class: N(["
|
|
540
|
-
|
|
536
|
+
class: N(["split-pane-right", [
|
|
537
|
+
{ "has-toolbar": !!n.toolbar },
|
|
538
|
+
{ "show-resize-border": l(C) },
|
|
539
|
+
{ "is-dragging-inner-panes": l(T) },
|
|
540
|
+
{ "is-dragging-pane": l(k) || l(T) }
|
|
541
|
+
]]),
|
|
542
|
+
"data-testid": "split-pane-right",
|
|
541
543
|
tabindex: B.value ? 0 : -1
|
|
542
544
|
}, [
|
|
543
|
-
J(
|
|
545
|
+
J(x.$slots, "pane-right", {}, void 0, !0)
|
|
544
546
|
], 10, rt), [
|
|
545
547
|
[ue, B.value]
|
|
546
548
|
])
|
|
@@ -551,7 +553,7 @@ const Ge = { class: "kong-ui-public-split-pane-vertical-navigation" }, qe = { cl
|
|
|
551
553
|
])
|
|
552
554
|
], 2));
|
|
553
555
|
}
|
|
554
|
-
}), pt = /* @__PURE__ */
|
|
556
|
+
}), pt = /* @__PURE__ */ Pe(ut, [["__scopeId", "data-v-9f64fc6c"]]);
|
|
555
557
|
export {
|
|
556
558
|
pt as SplitPane
|
|
557
559
|
};
|
package/dist/split-pane.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
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,s){oe()?e.onMounted(t,s):i?t():e.nextTick(t)}function se(t,i,s){return e.watch(t,i,{...s,immediate:!0})}const N=ee?window:void 0;function y(t){var i;const s=e.toValue(t);return(i=s==null?void 0:s.$el)!=null?i:s}function _(...t){const i=[],s=()=>{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(s(),!(n!=null&&n.length)||!(d!=null&&d.length)||!(u!=null&&u.length))return;const o=ie(p)?{...p}:p;i.push(...n.flatMap(r=>d.flatMap(h=>u.map(m=>l(r,h,m,o)))))},{flush:"post"}),a=()=>{f(),s()};return M(s),a}function re(){const t=e.shallowRef(!1),i=e.getCurrentInstance();return i&&e.onMounted(()=>{t.value=!0},i),t}function q(t){const i=re();return e.computed(()=>(i.value,!!t()))}function ce(t,i,s={}){const{window:l=N,...c}=s;let f;const a=q(()=>l&&"MutationObserver"in l),n=()=>{f&&(f.disconnect(),f=void 0)},d=e.computed(()=>{const r=e.toValue(t),h=T(r).map(y).filter(te);return new Set(h)}),u=e.watch(d,r=>{n(),a.value&&r.size&&(f=new MutationObserver(i),r.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,s={}){const{window:l=N,document:c=l==null?void 0:l.document,flush:f="sync"}=s;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,r=>{r.map(m=>[...m.removedNodes]).flat().some(m=>m===p||m.contains(p))&&i(r)},{window:l,childList:!0,subtree:!0});n(o)}},{flush:f}),u=()=>{d(),n()};return M(u),u}function fe(t,i,s={}){const{window:l=N,...c}=s;let f;const a=q(()=>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(r=>y(r)):[y(o)]}),u=e.watch(d,o=>{if(n(),a.value&&l){f=new ResizeObserver(i);for(const r of o)r&&f.observe(r,c)}},{immediate:!0,flush:"post"}),p=()=>{n(),u()};return M(p),{isSupported:a,stop:p}}function K(t,i={}){const{delayEnter:s=0,delayLeave:l=0,triggerOnRemoval:c=!1,window:f=N}=i,a=e.shallowRef(!1);let n;const d=u=>{const p=u?s: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},s={}){const{window:l=N,box:c="content-box"}=s,f=e.computed(()=>{var o,r;return(r=(o=y(t))==null?void 0:o.namespaceURI)==null?void 0:r.includes("svg")}),a=e.shallowRef(i.width),n=e.shallowRef(i.height),{stop:d}=fe(t,([o])=>{const r=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(r){const h=T(r);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},s);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),s=(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=s.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),r=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"?r(100):r()},m=()=>{var w;if(!s.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"){r(100);return}r()},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||!s.value||!c.value)return;const b=s.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),r()},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(),r(),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(r=>({v7b446340:p.value}));const{i18n:i}=Z(),s=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=r=>{l.value||c(),!r.active&&r.to&&s.push(r.to)};return e.onMounted(async()=>{await e.nextTick(),requestAnimationFrame(()=>{d.value=!0})}),(r,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":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 s=t.__vccOpts||t;for(const[l,c]of i)s[l]=c;return s},ke=J(ve,[["__scopeId","data-v-466e293a"]]),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=>({v42f7c9d6:l.value,v276400e4:c.value,v3a700e9e:f.value}));const i=e.useSlots(),s=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(()=>s("left")),c=e.computed(()=>s("center")),f=e.computed(()=>s("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"),r=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=K(o),R=K(r),{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:r,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",[{"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-81227951"]]);x.SplitPane=Ne,Object.defineProperty(x,Symbol.toStringTag,{value:"Module"})});
|
|
1
|
+
(function(k,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):(k=typeof globalThis<"u"?globalThis:k||self,e(k["kong-ui-public-split-pane"]={},k.Vue,k.KongIcons,k.VueRouter,k["kong-ui-public-i18n"]))})(this,function(k,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,ae=t=>ne.call(t)==="[object Object]",ie=()=>{};function T(t){return Array.isArray(t)?t:[t]}function oe(t){return e.getCurrentInstance()}function se(t,a=!0,r){oe()?e.onMounted(t,r):a?t():e.nextTick(t)}function le(t,a,r){return e.watch(t,a,{...r,immediate:!0})}const N=ee?window:void 0;function y(t){var a;const r=e.toValue(t);return(a=r==null?void 0:r.$el)!=null?a:r}function _(...t){const a=[],r=()=>{a.forEach(n=>n()),a.length=0},s=(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=le(()=>{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=ae(p)?{...p}:p;a.push(...n.flatMap(l=>d.flatMap(g=>u.map(m=>s(l,g,m,o)))))},{flush:"post"}),i=()=>{f(),r()};return M(r),i}function re(){const t=e.shallowRef(!1),a=e.getCurrentInstance();return a&&e.onMounted(()=>{t.value=!0},a),t}function K(t){const a=re();return e.computed(()=>(a.value,!!t()))}function ce(t,a,r={}){const{window:s=N,...c}=r;let f;const i=K(()=>s&&"MutationObserver"in s),n=()=>{f&&(f.disconnect(),f=void 0)},d=e.computed(()=>{const l=e.toValue(t),g=T(l).map(y).filter(te);return new Set(g)}),u=e.watch(d,l=>{n(),i.value&&l.size&&(f=new MutationObserver(a),l.forEach(g=>f.observe(g,c)))},{immediate:!0,flush:"post"}),p=()=>f==null?void 0:f.takeRecords(),o=()=>{u(),n()};return M(o),{isSupported:i,stop:o,takeRecords:p}}function de(t,a,r={}){const{window:s=N,document:c=s==null?void 0:s.document,flush:f="sync"}=r;if(!s||!c)return ie;let i;const n=p=>{i==null||i(),i=p},d=e.watchEffect(()=>{const p=y(t);if(p){const{stop:o}=ce(c,l=>{l.map(m=>[...m.removedNodes]).flat().some(m=>m===p||m.contains(p))&&a(l)},{window:s,childList:!0,subtree:!0});n(o)}},{flush:f}),u=()=>{d(),n()};return M(u),u}function fe(t,a,r={}){const{window:s=N,...c}=r;let f;const i=K(()=>s&&"ResizeObserver"in s),n=()=>{f&&(f.disconnect(),f=void 0)},d=e.computed(()=>{const o=e.toValue(t);return Array.isArray(o)?o.map(l=>y(l)):[y(o)]}),u=e.watch(d,o=>{if(n(),i.value&&s){f=new ResizeObserver(a);for(const l of o)l&&f.observe(l,c)}},{immediate:!0,flush:"post"}),p=()=>{n(),u()};return M(p),{isSupported:i,stop:p}}function q(t,a={}){const{delayEnter:r=0,delayLeave:s=0,triggerOnRemoval:c=!1,window:f=N}=a,i=e.shallowRef(!1);let n;const d=u=>{const p=u?r:s;n&&(clearTimeout(n),n=void 0),p?n=setTimeout(()=>i.value=u,p):i.value=u};return f&&(_(t,"mouseenter",()=>d(!0),{passive:!0}),_(t,"mouseleave",()=>d(!1),{passive:!0}),c&&de(e.computed(()=>y(t)),()=>d(!1))),i}function ue(t,a={width:0,height:0},r={}){const{window:s=N,box:c="content-box"}=r,f=e.computed(()=>{var o,l;return(l=(o=y(t))==null?void 0:o.namespaceURI)==null?void 0:l.includes("svg")}),i=e.shallowRef(a.width),n=e.shallowRef(a.height),{stop:d}=fe(t,([o])=>{const l=c==="border-box"?o.borderBoxSize:c==="content-box"?o.contentBoxSize:o.devicePixelContentBoxSize;if(s&&f.value){const g=y(t);if(g){const m=g.getBoundingClientRect();i.value=m.width,n.value=m.height}}else if(l){const g=T(l);i.value=g.reduce((m,{inlineSize:P})=>m+P,0),n.value=g.reduce((m,{blockSize:P})=>m+P,0)}else i.value=o.contentRect.width,n.value=o.contentRect.height},r);se(()=>{const o=y(t);o&&(i.value="offsetWidth"in o?o.offsetWidth:a.width,n.value="offsetHeight"in o?o.offsetHeight:a.height)});const u=e.watch(()=>y(t),o=>{i.value=o?a.width:0,n.value=o?a.height:0});function p(){d(),u()}return{width:i,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 a=(t==null?void 0:t.verticalNavRef)||e.ref(null),r=(t==null?void 0:t.innerPanesContainerRef)||e.ref(null),s=(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),i=h=>{var b,w,x,C,R;switch(h){case"verticalNav":return((b=a.value)==null?void 0:b.offsetWidth)||0;case"innerPanesContainer":return((w=r.value)==null?void 0:w.offsetWidth)||0;case"paneLeft":return((x=s.value)==null?void 0:x.offsetWidth)||0;case"paneCenter":return((C=c.value)==null?void 0:C.offsetWidth)||0;case"paneRight":return((R=f.value)==null?void 0:R.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),l=h=>{if(c.value){if(h){c.value.style.width=`${h}%`,B.value=i("paneCenter");return}else(typeof n.value!="number"||!isFinite(n.value))&&(n.value=38);c.value.style.width=`${n.value}%`,B.value=i("paneCenter")}},g=()=>{var h;c.value&&((h=f.value)==null?void 0:h.style.display)==="none"?l(100):l()},m=()=>{var x;if(!r.value||!c.value)return;const h=100,b=i("innerPanesContainer")-i("verticalNav")-i("paneLeft")-h,w=n.value/100*i("innerPanesContainer");if(w<h?n.value=h/i("innerPanesContainer")*100:w>b&&(n.value=b/i("innerPanesContainer")*100),c.value&&f.value&&((x=f.value)==null?void 0:x.style.display)==="none"){l(100);return}l()},P=h=>{!c.value||h.button!==0||(L.value=!0,d.value=h.clientX,u.value=c.value.offsetWidth||0,document.body.style.userSelect="none")},v=h=>{if(!L.value||!r.value||!c.value)return;const b=r.value.offsetWidth,w=h.clientX-d.value,C=(u.value+w)/b*100,R=100/b*100,S=(b-100)/b*100;n.value=Math.min(Math.max(R,C),S),l()},W=()=>{L.value=!1,document.body.style.userSelect=""},D=h=>{!s.value||!$.value||h.button!==0||(z.value=!0,p.value=h.clientX,o.value=s.value.offsetWidth||0,document.body.style.userSelect="none")},O=h=>{if(!z.value||!s.value)return;let b=o.value+(h.clientX-p.value);const w=Number(Y.replace(/px$/i,"")),x=Number(A.replace(/px$/i,""));b<w&&(b=w),b>x&&(b=x),s.value.style.width=`${b}px`,p.value=h.clientX,o.value=b,B.value=i("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(),l(),requestAnimationFrame(()=>{B.value=i("paneCenter")}))}),_(document,"mousemove",h=>{L.value&&v(h),z.value&&O(h)}),_(document,"mouseup",()=>{L.value&&W(),z.value&&E()}),{isDraggingPaneLeft:e.readonly(z),isDraggingInnerPanes:e.readonly(L),startDraggingInnerPanes:P,refreshInnerPaneSizes:g,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 he={class:"kong-ui-public-split-pane-vertical-navigation"},ge={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(l=>({v01870e39:p.value}));const{i18n:a}=Z(),r=Q.useRouter(),{paneLeftExpanded:s,togglePaneLeft:c,isDraggingPaneLeft:f,isDraggingInnerPanes:i}=G(),n=e.ref(!1),d=e.ref(!1),u=e.computed(()=>n.value||f.value||i.value),p=e.computed(()=>`${t.paneLeftWidth-8}px`),o=l=>{s.value||c(),!l.active&&l.to&&r.push(l.to)};return e.onMounted(async()=>{await e.nextTick(),await new Promise(l=>setTimeout(l,500)),d.value=!0}),(l,g)=>{const m=e.resolveComponent("KButton"),P=e.resolveComponent("KTooltip");return e.openBlock(),e.createElementBlock("div",he,[e.createElementVNode("nav",ge,[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(s),"disable-animation":!d.value||e.unref(f)||e.unref(i)}]),onTransitionend:g[0]||(g[0]=e.withModifiers(v=>n.value=!1,["self"])),onTransitionstart:g[1]||(g[1]=e.withModifiers(v=>n.value=!0,["self"]))},[(e.openBlock(),e.createBlock(P,{key:String(e.unref(s)),"kpop-attributes":e.unref(s)?void 0:{offset:"10px"},label:u.value?void 0:e.unref(s)?e.unref(a).t("actions.collapse_panel"):e.unref(a).t("actions.expand_panel"),placement:e.unref(s)?"left":"right"},{default:e.withCtx(()=>[e.createVNode(m,{appearance:"none","aria-controls":"left-pane","aria-expanded":e.unref(s),"aria-label":e.unref(s)?e.unref(a).t("actions.collapse_panel"):e.unref(a).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(s)?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,a)=>{const r=t.__vccOpts||t;for(const[s,c]of a)r[s]=c;return r},Ce=J(ve,[["__scopeId","data-v-acbeb50e"]]),Re={class:"split-pane-container"},we={class:"split-pane-container-inner"},xe={class:"panes"},ke=["aria-hidden","tabindex"],ye=["title"],Pe={class:"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(C=>({v11b75b14:s.value,v44843aa2:c.value,v280ae19a:f.value}));const a=e.useSlots(),r=C=>C==="left"?t.paneLeft.maxWidth!==void 0?t.paneLeft.maxWidth:A:C==="center"?t.resizable?"none":t.paneCenter.maxWidth!==void 0?t.paneCenter.maxWidth:F:C==="right"?t.resizable?"none":t.paneRight.maxWidth!==void 0?t.paneRight.maxWidth:j:"none",s=e.computed(()=>r("left")),c=e.computed(()=>r("center")),f=e.computed(()=>r("right")),i=e.useTemplateRef("verticalNavRef"),n=e.useTemplateRef("innerPanesContainerRef"),d=e.useTemplateRef("paneLeftRef"),u=e.useTemplateRef("paneCenterRef"),p=e.useTemplateRef("paneRightRef"),o=e.useTemplateRef("paneLeftDivider"),l=e.useTemplateRef("innerPanesDivider"),{startDraggingInnerPanes:g,startDraggingPaneLeft:m,refreshInnerPaneSizes:P,paneLeftExpanded:v,isDraggingPaneLeft:W,isDraggingInnerPanes:D}=G({verticalNavRef:i,innerPanesContainerRef:n,paneLeftRef:d,paneCenterRef:u,paneRightRef:p}),{i18n:O}=Z(),E=e.computed(()=>!!a["pane-left"]&&t.paneLeft.visible!==!1&&v.value),I=e.computed(()=>!!a["pane-center"]&&t.paneCenter.visible!==!1),V=e.computed(()=>!!a["pane-right"]&&t.paneRight.visible!==!1),h=e.computed(()=>t.resizable&&t.showResizeHandle&&!!a["pane-center"]&&t.paneCenter.visible!==!1&&!!a["pane-right"]&&t.paneRight.visible!==!1),b=q(o),w=q(l),{width:x}=ue(d);return e.watch(()=>t.paneRight.visible,async()=>{t.resizable&&(await e.nextTick(),P())},{flush:"post"}),(C,R)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["kong-ui-public-split-pane",{"has-navigation":t.showNavigation}])},[e.createElementVNode("div",Re,[t.showNavigation?(e.openBlock(),e.createBlock(Ce,{key:0,ref_key:"verticalNavRef",ref:i,items:t.navigationItems,"pane-left-visible":t.paneLeft.visible!==!1,"pane-left-width":e.unref(x)},null,8,["items","pane-left-visible","pane-left-width"])):e.createCommentVNode("",!0),e.createElementVNode("div",we,[e.createElementVNode("div",xe,[e.createElementVNode("div",{ref_key:"paneLeftRef",ref:d,"aria-hidden":E.value?void 0:"true",class:e.normalizeClass(["split-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":"split-pane-left",tabindex:E.value?0:-1},[e.renderSlot(C.$slots,"pane-left",{},void 0,!0)],10,ke),E.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"paneLeftDivider",ref:o,class:"split-pane-resize-divider left",tabindex:"0",title:e.unref(O).t("actions.drag_to_resize"),onMousedown:R[0]||(R[0]=(...S)=>e.unref(m)&&e.unref(m)(...S))},[...R[2]||(R[2]=[e.createElementVNode("div",{class:"split-pane-drag-handle"},null,-1)])],40,ye)):e.createCommentVNode("",!0),e.createElementVNode("div",Pe,[a.toolbar?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["split-pane-toolbar-container",{"has-resize-divider-left":E.value}]),"data-testid":"split-pane-toolbar"},[e.renderSlot(C.$slots,"toolbar",{},void 0,!0)],2)):e.createCommentVNode("",!0),e.createElementVNode("div",{ref_key:"innerPanesContainerRef",ref:n,class:"split-pane-inner-panes"},[e.withDirectives(e.createElementVNode("div",{ref_key:"paneCenterRef",ref:u,"aria-hidden":I.value?void 0:"true",class:e.normalizeClass(["split-pane-center",[{"has-resize-divider-left":E.value},{"has-resize-divider-right":h.value},{"is-dragging-pane":e.unref(W)||e.unref(D)}]]),"data-testid":"split-pane-center",tabindex:I.value?0:-1},[e.renderSlot(C.$slots,"pane-center",{},void 0,!0)],10,Le),[[e.vShow,I.value]]),h.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"innerPanesDivider",ref:l,class:"split-pane-resize-divider right",tabindex:"0",title:e.unref(O).t("actions.drag_to_resize"),onMousedown:R[1]||(R[1]=(...S)=>e.unref(g)&&e.unref(g)(...S))},[...R[3]||(R[3]=[e.createElementVNode("div",{class:"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(["split-pane-right",[{"has-toolbar":!!a.toolbar},{"show-resize-border":e.unref(w)},{"is-dragging-inner-panes":e.unref(D)},{"is-dragging-pane":e.unref(W)||e.unref(D)}]]),"data-testid":"split-pane-right",tabindex:V.value?0:-1},[e.renderSlot(C.$slots,"pane-right",{},void 0,!0)],10,Ee),[[e.vShow,V.value]])],512)])])])])],2))}}),[["__scopeId","data-v-9f64fc6c"]]);k.SplitPane=Ne,Object.defineProperty(k,Symbol.toStringTag,{value:"Module"})});
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.kong-ui-public-split-pane-vertical-navigation[data-v-
|
|
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-9f64fc6c],[data-v-9f64fc6c] *{box-sizing:border-box}.kong-ui-public-split-pane[data-v-9f64fc6c]{height:100%}.kong-ui-public-split-pane.has-navigation[data-v-9f64fc6c]{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 .split-pane-container-inner[data-v-9f64fc6c]{padding-top:6px;padding-top:var(--kui-space-30, 6px)}.kong-ui-public-split-pane .split-pane-container[data-v-9f64fc6c]{display:flex;flex-direction:row;height:100%;width:100%}.kong-ui-public-split-pane .split-pane-container-inner[data-v-9f64fc6c]{display:flex;flex-direction:column;width:100%}.kong-ui-public-split-pane .split-pane-container-inner-content[data-v-9f64fc6c]{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 .split-pane-inner-panes[data-v-9f64fc6c]{display:flex;height:100%;width:100%}.kong-ui-public-split-pane .panes[data-v-9f64fc6c]{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 .split-pane-left[data-v-9f64fc6c],.kong-ui-public-split-pane .split-pane-center[data-v-9f64fc6c],.kong-ui-public-split-pane .split-pane-right[data-v-9f64fc6c]{overflow-x:hidden;overflow-y:auto;position:relative;scrollbar-width:thin}.kong-ui-public-split-pane .split-pane-left.has-toolbar[data-v-9f64fc6c],.kong-ui-public-split-pane .split-pane-center.has-toolbar[data-v-9f64fc6c],.kong-ui-public-split-pane .split-pane-right.has-toolbar[data-v-9f64fc6c]{max-height:calc(100vh - 44px)}.kong-ui-public-split-pane .split-pane-left.is-dragging-pane[data-v-9f64fc6c],.kong-ui-public-split-pane .split-pane-center.is-dragging-pane[data-v-9f64fc6c],.kong-ui-public-split-pane .split-pane-right.is-dragging-pane[data-v-9f64fc6c]{pointer-events:none;transition:none}.kong-ui-public-split-pane .split-pane-left[data-v-9f64fc6c]{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 .split-pane-left.expanded[data-v-9f64fc6c]{border-right-color:#e0e4ea;border-right-color:var(--kui-color-border, #e0e4ea);max-width:var(--v11b75b14);pointer-events:auto}.kong-ui-public-split-pane .split-pane-left.is-dragging-pane-left[data-v-9f64fc6c],.kong-ui-public-split-pane .split-pane-left.expanded.show-resize-border[data-v-9f64fc6c],.kong-ui-public-split-pane .split-pane-left.show-resize-border[data-v-9f64fc6c]{border-right-color:#0044f4;border-right-color:var(--kui-color-border-primary, #0044f4)}.kong-ui-public-split-pane .split-pane-center[data-v-9f64fc6c]{max-width:var(--v44843aa2);min-width:300px;width:300px}.kong-ui-public-split-pane .split-pane-center.has-resize-divider-left[data-v-9f64fc6c]{margin-left:-3px}.kong-ui-public-split-pane .split-pane-center.has-resize-divider-right[data-v-9f64fc6c]{margin-right:-3px}.kong-ui-public-split-pane .split-pane-right[data-v-9f64fc6c]{border-left:1px solid #e0e4ea;border-left:var(--kui-border-width-10, 1px) solid var(--kui-color-border, #e0e4ea);flex:1;max-width:var(--v280ae19a);min-width:300px;transition:border-color .1s ease-in-out}.kong-ui-public-split-pane .split-pane-right.is-dragging-inner-panes[data-v-9f64fc6c],.kong-ui-public-split-pane .split-pane-right.show-resize-border[data-v-9f64fc6c]{border-left-color:#0044f4;border-left-color:var(--kui-color-border-primary, #0044f4)}.kong-ui-public-split-pane .split-pane-toolbar-container.has-resize-divider-left[data-v-9f64fc6c]{margin-left:-3px}.kong-ui-public-split-pane .split-pane-resize-divider[data-v-9f64fc6c]{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 .split-pane-resize-divider.left[data-v-9f64fc6c]{margin-left:0}.kong-ui-public-split-pane .split-pane-resize-divider.right[data-v-9f64fc6c]{right:-3px}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SplitPane.vue.d.ts","sourceRoot":"","sources":["../../../src/components/SplitPane.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SplitPane.vue.d.ts","sourceRoot":"","sources":["../../../src/components/SplitPane.vue"],"names":[],"mappings":"AAiZA,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;AAqSF,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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VerticalNavigation.vue.d.ts","sourceRoot":"","sources":["../../../src/components/VerticalNavigation.vue"],"names":[],"mappings":"
|
|
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/package.json
CHANGED