@kong-ui-public/sandbox-layout 2.1.22 → 2.1.24
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/sandbox-layout.es.js +80 -284
- package/dist/sandbox-layout.umd.js +1 -1
- package/package.json +3 -3
|
@@ -1,254 +1,50 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
|
|
1
|
+
import { defineComponent as y, inject as N, resolveComponent as k, openBlock as s, createElementBlock as l, unref as u, Fragment as T, renderList as $, createVNode as e, withCtx as d, createTextVNode as x, toDisplayString as p, createCommentVNode as _, useCssVars as K, provide as L, computed as O, createElementVNode as o, renderSlot as b } from "vue";
|
|
2
|
+
import { MenuIcon as E, CogIcon as V } from "@kong/icons";
|
|
3
|
+
const S = "kong-ui-sandbox-layout-links", z = {
|
|
3
4
|
key: 0,
|
|
4
5
|
class: "kong-ui-sandbox-navigation"
|
|
5
|
-
},
|
|
6
|
+
}, A = /* @__PURE__ */ y({
|
|
6
7
|
__name: "SandboxNavigation",
|
|
7
8
|
emits: ["router-link-click"],
|
|
8
|
-
setup(
|
|
9
|
-
const
|
|
10
|
-
return (
|
|
11
|
-
const
|
|
12
|
-
return
|
|
13
|
-
|
|
14
|
-
(
|
|
15
|
-
key:
|
|
9
|
+
setup(n, { emit: i }) {
|
|
10
|
+
const c = i, t = N(S, []);
|
|
11
|
+
return (h, g) => {
|
|
12
|
+
const v = k("router-link");
|
|
13
|
+
return s(), l("nav", null, [
|
|
14
|
+
u(t).length ? (s(), l("ul", z, [
|
|
15
|
+
(s(!0), l(T, null, $(u(t), (a) => (s(), l("li", {
|
|
16
|
+
key: a.name,
|
|
16
17
|
class: "sandbox-link"
|
|
17
18
|
}, [
|
|
18
|
-
|
|
19
|
-
to:
|
|
20
|
-
onClick: (m) =>
|
|
19
|
+
e(v, {
|
|
20
|
+
to: a.to,
|
|
21
|
+
onClick: (m) => c("router-link-click", a)
|
|
21
22
|
}, {
|
|
22
|
-
default:
|
|
23
|
-
|
|
23
|
+
default: d(() => [
|
|
24
|
+
x(p(a.name), 1)
|
|
24
25
|
]),
|
|
25
26
|
_: 2
|
|
26
27
|
}, 1032, ["to", "onClick"])
|
|
27
28
|
]))), 128))
|
|
28
|
-
])) :
|
|
29
|
+
])) : _("", !0)
|
|
29
30
|
]);
|
|
30
31
|
};
|
|
31
32
|
}
|
|
32
|
-
}),
|
|
33
|
-
const
|
|
34
|
-
for (const [
|
|
35
|
-
|
|
36
|
-
return
|
|
37
|
-
},
|
|
38
|
-
const o = e.__vccOpts || e;
|
|
39
|
-
for (const [i, a] of t)
|
|
40
|
-
o[i] = a;
|
|
41
|
-
return o;
|
|
42
|
-
}, A = (e) => (w("data-v-e80f0e9c"), e = e(), $(), e), D = ["aria-hidden"], U = {
|
|
43
|
-
key: 0,
|
|
44
|
-
"data-testid": "kui-icon-svg-title"
|
|
45
|
-
}, W = /* @__PURE__ */ A(() => /* @__PURE__ */ s("path", {
|
|
46
|
-
d: "M9.2502 22L8.8502 18.8C8.63353 18.7167 8.42936 18.6167 8.2377 18.5C8.04603 18.3833 7.85853 18.2583 7.6752 18.125L4.7002 19.375L1.9502 14.625L4.5252 12.675C4.50853 12.5583 4.5002 12.4458 4.5002 12.3375V11.6625C4.5002 11.5542 4.50853 11.4417 4.5252 11.325L1.9502 9.375L4.7002 4.625L7.6752 5.875C7.85853 5.74167 8.0502 5.61667 8.2502 5.5C8.4502 5.38333 8.6502 5.28333 8.8502 5.2L9.2502 2H14.7502L15.1502 5.2C15.3669 5.28333 15.571 5.38333 15.7627 5.5C15.9544 5.61667 16.1419 5.74167 16.3252 5.875L19.3002 4.625L22.0502 9.375L19.4752 11.325C19.4919 11.4417 19.5002 11.5542 19.5002 11.6625V12.3375C19.5002 12.4458 19.4835 12.5583 19.4502 12.675L22.0252 14.625L19.2752 19.375L16.3252 18.125C16.1419 18.2583 15.9502 18.3833 15.7502 18.5C15.5502 18.6167 15.3502 18.7167 15.1502 18.8L14.7502 22H9.2502ZM12.0502 15.5C13.0169 15.5 13.8419 15.1583 14.5252 14.475C15.2085 13.7917 15.5502 12.9667 15.5502 12C15.5502 11.0333 15.2085 10.2083 14.5252 9.525C13.8419 8.84167 13.0169 8.5 12.0502 8.5C11.0669 8.5 10.2377 8.84167 9.5627 9.525C8.8877 10.2083 8.5502 11.0333 8.5502 12C8.5502 12.9667 8.8877 13.7917 9.5627 14.475C10.2377 15.1583 11.0669 15.5 12.0502 15.5Z",
|
|
47
|
-
fill: "currentColor"
|
|
48
|
-
}, null, -1)), R = /* @__PURE__ */ b({
|
|
49
|
-
__name: "CogIcon",
|
|
50
|
-
props: {
|
|
51
|
-
/** The accessibility text provided to screen readers */
|
|
52
|
-
title: {
|
|
53
|
-
type: String,
|
|
54
|
-
required: !1,
|
|
55
|
-
default: ""
|
|
56
|
-
},
|
|
57
|
-
/** The icon color. Defaults to `currentColor` which inherits text color from the parent element */
|
|
58
|
-
color: {
|
|
59
|
-
type: String,
|
|
60
|
-
required: !1,
|
|
61
|
-
default: "currentColor"
|
|
62
|
-
},
|
|
63
|
-
/** The CSS display property for the icon. Defaults to `block` */
|
|
64
|
-
display: {
|
|
65
|
-
type: String,
|
|
66
|
-
required: !1,
|
|
67
|
-
default: "block"
|
|
68
|
-
},
|
|
69
|
-
/** Whether the icon is just eye-candy or is meaningful to the page (should screen-readers ignore the icon?) */
|
|
70
|
-
decorative: {
|
|
71
|
-
type: Boolean,
|
|
72
|
-
required: !1,
|
|
73
|
-
default: !1
|
|
74
|
-
},
|
|
75
|
-
/** The icon size */
|
|
76
|
-
size: {
|
|
77
|
-
type: [Number, String],
|
|
78
|
-
required: !1,
|
|
79
|
-
default: k,
|
|
80
|
-
// if setting to the imported const fails, just pass a number of 24 as the default.
|
|
81
|
-
validator: (e) => {
|
|
82
|
-
if (typeof e == "number" && e > 0)
|
|
83
|
-
return !0;
|
|
84
|
-
if (typeof e == "string") {
|
|
85
|
-
const t = String(e).replace(/px/gi, ""), o = Number(t);
|
|
86
|
-
if (o && !isNaN(o) && Number.isInteger(o) && o > 0)
|
|
87
|
-
return !0;
|
|
88
|
-
}
|
|
89
|
-
return !1;
|
|
90
|
-
}
|
|
91
|
-
},
|
|
92
|
-
/** The HTML tag to utilize for the icon's wrapper element. Defaults to `span` */
|
|
93
|
-
as: {
|
|
94
|
-
type: String,
|
|
95
|
-
required: !1,
|
|
96
|
-
default: "span"
|
|
97
|
-
}
|
|
98
|
-
},
|
|
99
|
-
setup(e) {
|
|
100
|
-
const t = e, o = f(() => {
|
|
101
|
-
if (typeof t.size == "number" && t.size > 0)
|
|
102
|
-
return `${t.size}px`;
|
|
103
|
-
if (typeof t.size == "string") {
|
|
104
|
-
const a = String(t.size).replace(/px/gi, ""), n = Number(a);
|
|
105
|
-
if (n && !isNaN(n) && Number.isInteger(n) && n > 0)
|
|
106
|
-
return `${n}px`;
|
|
107
|
-
}
|
|
108
|
-
return k;
|
|
109
|
-
}), i = f(() => ({
|
|
110
|
-
boxSizing: "border-box",
|
|
111
|
-
color: t.color,
|
|
112
|
-
display: t.display,
|
|
113
|
-
flexShrink: "0",
|
|
114
|
-
height: o.value,
|
|
115
|
-
lineHeight: "0",
|
|
116
|
-
width: o.value
|
|
117
|
-
}));
|
|
118
|
-
return (a, n) => (r(), L(I(e.as), {
|
|
119
|
-
"aria-hidden": e.decorative ? "true" : void 0,
|
|
120
|
-
class: "kui-icon cog-icon",
|
|
121
|
-
"data-testid": "kui-icon-wrapper-cog-icon",
|
|
122
|
-
style: z(i.value)
|
|
123
|
-
}, {
|
|
124
|
-
default: c(() => [
|
|
125
|
-
(r(), l("svg", {
|
|
126
|
-
"aria-hidden": e.decorative ? "true" : void 0,
|
|
127
|
-
"data-testid": "kui-icon-svg-cog-icon",
|
|
128
|
-
fill: "none",
|
|
129
|
-
height: "100%",
|
|
130
|
-
role: "img",
|
|
131
|
-
viewBox: "0 0 24 24",
|
|
132
|
-
width: "100%",
|
|
133
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
134
|
-
}, [
|
|
135
|
-
e.title ? (r(), l("title", U, v(e.title), 1)) : u("", !0),
|
|
136
|
-
W
|
|
137
|
-
], 8, D))
|
|
138
|
-
]),
|
|
139
|
-
_: 1
|
|
140
|
-
}, 8, ["aria-hidden", "style"]));
|
|
141
|
-
}
|
|
142
|
-
}), Y = /* @__PURE__ */ H(R, [["__scopeId", "data-v-e80f0e9c"]]), j = (e) => (w("data-v-16359cdd"), e = e(), $(), e), F = ["aria-hidden"], G = {
|
|
143
|
-
key: 0,
|
|
144
|
-
"data-testid": "kui-icon-svg-title"
|
|
145
|
-
}, J = /* @__PURE__ */ j(() => /* @__PURE__ */ s("path", {
|
|
146
|
-
d: "M3 18V16H21V18H3ZM3 13V11H21V13H3ZM3 8V6H21V8H3Z",
|
|
147
|
-
fill: "currentColor"
|
|
148
|
-
}, null, -1)), X = /* @__PURE__ */ b({
|
|
149
|
-
__name: "MenuIcon",
|
|
150
|
-
props: {
|
|
151
|
-
/** The accessibility text provided to screen readers */
|
|
152
|
-
title: {
|
|
153
|
-
type: String,
|
|
154
|
-
required: !1,
|
|
155
|
-
default: ""
|
|
156
|
-
},
|
|
157
|
-
/** The icon color. Defaults to `currentColor` which inherits text color from the parent element */
|
|
158
|
-
color: {
|
|
159
|
-
type: String,
|
|
160
|
-
required: !1,
|
|
161
|
-
default: "currentColor"
|
|
162
|
-
},
|
|
163
|
-
/** The CSS display property for the icon. Defaults to `block` */
|
|
164
|
-
display: {
|
|
165
|
-
type: String,
|
|
166
|
-
required: !1,
|
|
167
|
-
default: "block"
|
|
168
|
-
},
|
|
169
|
-
/** Whether the icon is just eye-candy or is meaningful to the page (should screen-readers ignore the icon?) */
|
|
170
|
-
decorative: {
|
|
171
|
-
type: Boolean,
|
|
172
|
-
required: !1,
|
|
173
|
-
default: !1
|
|
174
|
-
},
|
|
175
|
-
/** The icon size */
|
|
176
|
-
size: {
|
|
177
|
-
type: [Number, String],
|
|
178
|
-
required: !1,
|
|
179
|
-
default: k,
|
|
180
|
-
// if setting to the imported const fails, just pass a number of 24 as the default.
|
|
181
|
-
validator: (e) => {
|
|
182
|
-
if (typeof e == "number" && e > 0)
|
|
183
|
-
return !0;
|
|
184
|
-
if (typeof e == "string") {
|
|
185
|
-
const t = String(e).replace(/px/gi, ""), o = Number(t);
|
|
186
|
-
if (o && !isNaN(o) && Number.isInteger(o) && o > 0)
|
|
187
|
-
return !0;
|
|
188
|
-
}
|
|
189
|
-
return !1;
|
|
190
|
-
}
|
|
191
|
-
},
|
|
192
|
-
/** The HTML tag to utilize for the icon's wrapper element. Defaults to `span` */
|
|
193
|
-
as: {
|
|
194
|
-
type: String,
|
|
195
|
-
required: !1,
|
|
196
|
-
default: "span"
|
|
197
|
-
}
|
|
198
|
-
},
|
|
199
|
-
setup(e) {
|
|
200
|
-
const t = e, o = f(() => {
|
|
201
|
-
if (typeof t.size == "number" && t.size > 0)
|
|
202
|
-
return `${t.size}px`;
|
|
203
|
-
if (typeof t.size == "string") {
|
|
204
|
-
const a = String(t.size).replace(/px/gi, ""), n = Number(a);
|
|
205
|
-
if (n && !isNaN(n) && Number.isInteger(n) && n > 0)
|
|
206
|
-
return `${n}px`;
|
|
207
|
-
}
|
|
208
|
-
return k;
|
|
209
|
-
}), i = f(() => ({
|
|
210
|
-
boxSizing: "border-box",
|
|
211
|
-
color: t.color,
|
|
212
|
-
display: t.display,
|
|
213
|
-
flexShrink: "0",
|
|
214
|
-
height: o.value,
|
|
215
|
-
lineHeight: "0",
|
|
216
|
-
width: o.value
|
|
217
|
-
}));
|
|
218
|
-
return (a, n) => (r(), L(I(e.as), {
|
|
219
|
-
"aria-hidden": e.decorative ? "true" : void 0,
|
|
220
|
-
class: "kui-icon menu-icon",
|
|
221
|
-
"data-testid": "kui-icon-wrapper-menu-icon",
|
|
222
|
-
style: z(i.value)
|
|
223
|
-
}, {
|
|
224
|
-
default: c(() => [
|
|
225
|
-
(r(), l("svg", {
|
|
226
|
-
"aria-hidden": e.decorative ? "true" : void 0,
|
|
227
|
-
"data-testid": "kui-icon-svg-menu-icon",
|
|
228
|
-
fill: "none",
|
|
229
|
-
height: "100%",
|
|
230
|
-
role: "img",
|
|
231
|
-
viewBox: "0 0 24 24",
|
|
232
|
-
width: "100%",
|
|
233
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
234
|
-
}, [
|
|
235
|
-
e.title ? (r(), l("title", G, v(e.title), 1)) : u("", !0),
|
|
236
|
-
J
|
|
237
|
-
], 8, F))
|
|
238
|
-
]),
|
|
239
|
-
_: 1
|
|
240
|
-
}, 8, ["aria-hidden", "style"]));
|
|
241
|
-
}
|
|
242
|
-
}), P = /* @__PURE__ */ H(X, [["__scopeId", "data-v-16359cdd"]]), S = "24px", Q = { class: "kong-ui-sandbox-layout" }, ee = { class: "header" }, te = { class: "header-left" }, oe = { class: "mobile-nav-container" }, ie = { class: "toggle-mobile-nav" }, ne = {
|
|
33
|
+
}), I = (n, i) => {
|
|
34
|
+
const c = n.__vccOpts || n;
|
|
35
|
+
for (const [t, h] of i)
|
|
36
|
+
c[t] = h;
|
|
37
|
+
return c;
|
|
38
|
+
}, f = /* @__PURE__ */ I(A, [["__scopeId", "data-v-2cb154ed"]]), C = "24px", B = { class: "kong-ui-sandbox-layout" }, M = { class: "header" }, U = { class: "header-left" }, W = { class: "mobile-nav-container" }, D = { class: "toggle-mobile-nav" }, R = {
|
|
243
39
|
key: 0,
|
|
244
40
|
class: "mobile-title"
|
|
245
|
-
},
|
|
41
|
+
}, Y = { class: "header-right" }, j = {
|
|
246
42
|
key: 0,
|
|
247
43
|
class: "mobile-controls-container"
|
|
248
|
-
},
|
|
44
|
+
}, q = { class: "toggle-mobile-controls" }, w = { class: "layout" }, F = { class: "desktop-nav-container" }, G = { class: "sandbox-container" }, J = { key: 0 }, X = {
|
|
249
45
|
key: 0,
|
|
250
46
|
class: "sandbox-controls"
|
|
251
|
-
},
|
|
47
|
+
}, Z = /* @__PURE__ */ y({
|
|
252
48
|
__name: "SandboxLayout",
|
|
253
49
|
props: {
|
|
254
50
|
title: {
|
|
@@ -265,37 +61,37 @@ const q = "kong-ui-sandbox-layout-links", Z = {
|
|
|
265
61
|
default: 240
|
|
266
62
|
}
|
|
267
63
|
},
|
|
268
|
-
setup(
|
|
269
|
-
|
|
270
|
-
bfdbd112:
|
|
64
|
+
setup(n) {
|
|
65
|
+
K((t) => ({
|
|
66
|
+
bfdbd112: c.value
|
|
271
67
|
}));
|
|
272
|
-
const
|
|
273
|
-
|
|
274
|
-
const
|
|
275
|
-
return (
|
|
276
|
-
const
|
|
277
|
-
return
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
default:
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
68
|
+
const i = n;
|
|
69
|
+
L(S, i.links);
|
|
70
|
+
const c = O(() => `${i.controlsMinWidth}px`);
|
|
71
|
+
return (t, h) => {
|
|
72
|
+
const g = k("KSlideout"), v = k("KToggle"), a = k("router-link");
|
|
73
|
+
return s(), l("div", B, [
|
|
74
|
+
o("header", M, [
|
|
75
|
+
o("div", U, [
|
|
76
|
+
o("div", W, [
|
|
77
|
+
e(v, null, {
|
|
78
|
+
default: d(({ isToggled: m, toggle: r }) => [
|
|
79
|
+
o("div", null, [
|
|
80
|
+
o("div", D, [
|
|
81
|
+
e(u(E), {
|
|
286
82
|
role: "button",
|
|
287
|
-
size:
|
|
83
|
+
size: u(C),
|
|
288
84
|
title: "Toggle menu",
|
|
289
|
-
onClick:
|
|
85
|
+
onClick: r
|
|
290
86
|
}, null, 8, ["size", "onClick"])
|
|
291
87
|
]),
|
|
292
|
-
|
|
88
|
+
e(g, {
|
|
293
89
|
title: "Main Menu",
|
|
294
90
|
visible: m.value,
|
|
295
|
-
onClose:
|
|
91
|
+
onClose: r
|
|
296
92
|
}, {
|
|
297
|
-
default:
|
|
298
|
-
|
|
93
|
+
default: d(() => [
|
|
94
|
+
e(f, { onRouterLinkClick: r }, null, 8, ["onRouterLinkClick"])
|
|
299
95
|
]),
|
|
300
96
|
_: 2
|
|
301
97
|
}, 1032, ["visible", "onClose"])
|
|
@@ -303,39 +99,39 @@ const q = "kong-ui-sandbox-layout-links", Z = {
|
|
|
303
99
|
]),
|
|
304
100
|
_: 1
|
|
305
101
|
}),
|
|
306
|
-
|
|
307
|
-
|
|
102
|
+
n.title ? (s(), l("h1", R, [
|
|
103
|
+
e(a, {
|
|
308
104
|
class: "home-link",
|
|
309
105
|
to: { name: "home" }
|
|
310
106
|
}, {
|
|
311
|
-
default:
|
|
312
|
-
|
|
107
|
+
default: d(() => [
|
|
108
|
+
x(p(n.title), 1)
|
|
313
109
|
]),
|
|
314
110
|
_: 1
|
|
315
111
|
})
|
|
316
|
-
])) :
|
|
112
|
+
])) : _("", !0)
|
|
317
113
|
])
|
|
318
114
|
]),
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
default:
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
115
|
+
o("div", Y, [
|
|
116
|
+
t.$slots.controls ? (s(), l("div", j, [
|
|
117
|
+
e(v, null, {
|
|
118
|
+
default: d(({ isToggled: m, toggle: r }) => [
|
|
119
|
+
o("div", null, [
|
|
120
|
+
o("div", q, [
|
|
121
|
+
e(u(V), {
|
|
326
122
|
role: "button",
|
|
327
|
-
size:
|
|
123
|
+
size: u(C),
|
|
328
124
|
title: "Toggle controls",
|
|
329
|
-
onClick:
|
|
125
|
+
onClick: r
|
|
330
126
|
}, null, 8, ["size", "onClick"])
|
|
331
127
|
]),
|
|
332
|
-
|
|
128
|
+
e(g, {
|
|
333
129
|
title: "Controls",
|
|
334
130
|
visible: m.value,
|
|
335
|
-
onClose:
|
|
131
|
+
onClose: r
|
|
336
132
|
}, {
|
|
337
|
-
default:
|
|
338
|
-
|
|
133
|
+
default: d(() => [
|
|
134
|
+
b(t.$slots, "controls", {}, void 0, !0)
|
|
339
135
|
]),
|
|
340
136
|
_: 2
|
|
341
137
|
}, 1032, ["visible", "onClose"])
|
|
@@ -343,25 +139,25 @@ const q = "kong-ui-sandbox-layout-links", Z = {
|
|
|
343
139
|
]),
|
|
344
140
|
_: 3
|
|
345
141
|
})
|
|
346
|
-
])) :
|
|
142
|
+
])) : _("", !0)
|
|
347
143
|
])
|
|
348
144
|
]),
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
145
|
+
o("div", w, [
|
|
146
|
+
o("div", F, [
|
|
147
|
+
e(f)
|
|
352
148
|
]),
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
149
|
+
o("div", G, [
|
|
150
|
+
n.title ? (s(), l("h1", J, p(n.title), 1)) : _("", !0),
|
|
151
|
+
b(t.$slots, "default", {}, void 0, !0)
|
|
356
152
|
]),
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
])) :
|
|
153
|
+
t.$slots.controls ? (s(), l("div", X, [
|
|
154
|
+
b(t.$slots, "controls", {}, void 0, !0)
|
|
155
|
+
])) : _("", !0)
|
|
360
156
|
])
|
|
361
157
|
]);
|
|
362
158
|
};
|
|
363
159
|
}
|
|
364
|
-
}),
|
|
160
|
+
}), Q = /* @__PURE__ */ I(Z, [["__scopeId", "data-v-030efc6d"]]);
|
|
365
161
|
export {
|
|
366
|
-
|
|
162
|
+
Q as SandboxLayout
|
|
367
163
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(n,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@kong/icons")):typeof define=="function"&&define.amd?define(["exports","vue","@kong/icons"],e):(n=typeof globalThis<"u"?globalThis:n||self,e(n["kong-ui-public-sandbox-layout"]={},n.Vue,n.KongIcons))})(this,function(n,e,m){"use strict";const k="kong-ui-sandbox-layout-links",N={key:0,class:"kong-ui-sandbox-navigation"},g=e.defineComponent({__name:"SandboxNavigation",emits:["router-link-click"],setup(o,{emit:l}){const s=l,t=e.inject(k,[]);return(d,_)=>{const r=e.resolveComponent("router-link");return e.openBlock(),e.createElementBlock("nav",null,[e.unref(t).length?(e.openBlock(),e.createElementBlock("ul",N,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(t),c=>(e.openBlock(),e.createElementBlock("li",{key:c.name,class:"sandbox-link"},[e.createVNode(r,{to:c.to,onClick:a=>s("router-link-click",c)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(c.name),1)]),_:2},1032,["to","onClick"])]))),128))])):e.createCommentVNode("",!0)])}}}),p=(o,l)=>{const s=o.__vccOpts||o;for(const[t,d]of l)s[t]=d;return s},f=p(g,[["__scopeId","data-v-2cb154ed"]]),h="24px",C={class:"kong-ui-sandbox-layout"},V={class:"header"},b={class:"header-left"},y={class:"mobile-nav-container"},x={class:"toggle-mobile-nav"},E={key:0,class:"mobile-title"},B={class:"header-right"},S={key:0,class:"mobile-controls-container"},u={class:"toggle-mobile-controls"},T={class:"layout"},I={class:"desktop-nav-container"},K={class:"sandbox-container"},L={key:0},$={key:0,class:"sandbox-controls"},O=p(e.defineComponent({__name:"SandboxLayout",props:{title:{type:String,default:""},links:{type:Array,required:!1,default:()=>[]},controlsMinWidth:{type:Number,default:240}},setup(o){e.useCssVars(t=>({bfdbd112:s.value}));const l=o;e.provide(k,l.links);const s=e.computed(()=>`${l.controlsMinWidth}px`);return(t,d)=>{const _=e.resolveComponent("KSlideout"),r=e.resolveComponent("KToggle"),c=e.resolveComponent("router-link");return e.openBlock(),e.createElementBlock("div",C,[e.createElementVNode("header",V,[e.createElementVNode("div",b,[e.createElementVNode("div",y,[e.createVNode(r,null,{default:e.withCtx(({isToggled:a,toggle:i})=>[e.createElementVNode("div",null,[e.createElementVNode("div",x,[e.createVNode(e.unref(m.MenuIcon),{role:"button",size:e.unref(h),title:"Toggle menu",onClick:i},null,8,["size","onClick"])]),e.createVNode(_,{title:"Main Menu",visible:a.value,onClose:i},{default:e.withCtx(()=>[e.createVNode(f,{onRouterLinkClick:i},null,8,["onRouterLinkClick"])]),_:2},1032,["visible","onClose"])])]),_:1}),o.title?(e.openBlock(),e.createElementBlock("h1",E,[e.createVNode(c,{class:"home-link",to:{name:"home"}},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.title),1)]),_:1})])):e.createCommentVNode("",!0)])]),e.createElementVNode("div",B,[t.$slots.controls?(e.openBlock(),e.createElementBlock("div",S,[e.createVNode(r,null,{default:e.withCtx(({isToggled:a,toggle:i})=>[e.createElementVNode("div",null,[e.createElementVNode("div",u,[e.createVNode(e.unref(m.CogIcon),{role:"button",size:e.unref(h),title:"Toggle controls",onClick:i},null,8,["size","onClick"])]),e.createVNode(_,{title:"Controls",visible:a.value,onClose:i},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"controls",{},void 0,!0)]),_:2},1032,["visible","onClose"])])]),_:3})])):e.createCommentVNode("",!0)])]),e.createElementVNode("div",T,[e.createElementVNode("div",I,[e.createVNode(f)]),e.createElementVNode("div",K,[o.title?(e.openBlock(),e.createElementBlock("h1",L,e.toDisplayString(o.title),1)):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"default",{},void 0,!0)]),t.$slots.controls?(e.openBlock(),e.createElementBlock("div",$,[e.renderSlot(t.$slots,"controls",{},void 0,!0)])):e.createCommentVNode("",!0)])])}}}),[["__scopeId","data-v-030efc6d"]]);n.SandboxLayout=O,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kong-ui-public/sandbox-layout",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.24",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/sandbox-layout.umd.js",
|
|
6
6
|
"module": "./dist/sandbox-layout.es.js",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
},
|
|
23
23
|
"devDependencies": {
|
|
24
24
|
"@kong/design-tokens": "1.17.2",
|
|
25
|
-
"@kong/kongponents": "9.
|
|
25
|
+
"@kong/kongponents": "9.5.5",
|
|
26
26
|
"vue": "^3.4.31",
|
|
27
27
|
"vue-router": "^4.4.0"
|
|
28
28
|
},
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"errorLimit": "200KB"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
|
-
"@kong/kongponents": "^9.
|
|
47
|
+
"@kong/kongponents": "^9.5.5",
|
|
48
48
|
"vue": ">= 3.3.13 < 4"
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|