@kong-ui-public/sandbox-layout 2.7.5 → 2.7.6-pr.3868.7857fa56d.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/README.md +16 -0
- package/dist/sandbox-layout.es.js +131 -115
- package/dist/sandbox-layout.umd.js +1 -1
- package/dist/style.css +1 -1
- package/dist/types/components/SandboxLayout.vue.d.ts +11 -0
- package/dist/types/components/SandboxLayout.vue.d.ts.map +1 -1
- package/dist/types/composables/useSandboxTheme.d.ts.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -62,6 +62,22 @@ A string to display as the title
|
|
|
62
62
|
|
|
63
63
|
The minimum width of the `controls` sidebar. A `number` that is converted to pixels. Defaults to `240`
|
|
64
64
|
|
|
65
|
+
#### `applyTheming`
|
|
66
|
+
|
|
67
|
+
- type: `Boolean`
|
|
68
|
+
- required: `false`
|
|
69
|
+
- default: `true`
|
|
70
|
+
|
|
71
|
+
Whether to apply a Kong theme to the sandbox. When enabled, a theme picker (day/night and high contrast) is rendered above the navigation links, in both the desktop sidebar and the mobile menu; the selected theme is applied to the document root via `data-kui-theme` and persisted in `localStorage`.
|
|
72
|
+
|
|
73
|
+
Set to `false` to opt out; no `data-kui-theme` is set and no picker is rendered, so the sandbox renders un-themed, as it did before theming existed.
|
|
74
|
+
|
|
75
|
+
```html
|
|
76
|
+
<SandboxLayout :apply-theming="false" :links="links" title="My sandbox">
|
|
77
|
+
<!-- ... -->
|
|
78
|
+
</SandboxLayout>
|
|
79
|
+
```
|
|
80
|
+
|
|
65
81
|
### Slots
|
|
66
82
|
|
|
67
83
|
#### `default`
|
|
@@ -1,100 +1,105 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { DarkModeIcon as
|
|
3
|
-
const
|
|
1
|
+
import { defineComponent as f, inject as B, resolveComponent as k, openBlock as n, createElementBlock as i, unref as c, Fragment as N, renderList as $, createVNode as s, withCtx as m, createTextVNode as O, toDisplayString as b, createCommentVNode as h, ref as E, computed as K, effectScope as V, watch as w, createElementVNode as t, createBlock as C, normalizeClass as G, resolveDynamicComponent as H, isRef as R, useCssVars as W, provide as X, renderSlot as g } from "vue";
|
|
2
|
+
import { DarkModeIcon as P, LightModeIcon as Y, MenuIcon as F, CogIcon as Z } from "@kong/icons";
|
|
3
|
+
const D = "kong-ui-sandbox-layout-links", z = "kong-ui-sandbox-theme", j = "electric-lime-day", q = [
|
|
4
4
|
{ label: "Day", value: "day" },
|
|
5
5
|
{ label: "Night", value: "night" }
|
|
6
|
-
],
|
|
6
|
+
], J = {
|
|
7
7
|
key: 0,
|
|
8
8
|
class: "kong-ui-sandbox-navigation"
|
|
9
|
-
},
|
|
9
|
+
}, Q = /* @__PURE__ */ f({
|
|
10
10
|
__name: "SandboxNavigation",
|
|
11
11
|
emits: ["router-link-click"],
|
|
12
|
-
setup(
|
|
13
|
-
const r =
|
|
14
|
-
return (
|
|
15
|
-
const
|
|
16
|
-
return
|
|
17
|
-
c(
|
|
18
|
-
(
|
|
12
|
+
setup(e, { emit: a }) {
|
|
13
|
+
const r = a, l = B(D, []);
|
|
14
|
+
return (p, d) => {
|
|
15
|
+
const v = k("router-link");
|
|
16
|
+
return n(), i("nav", null, [
|
|
17
|
+
c(l).length ? (n(), i("ul", J, [
|
|
18
|
+
(n(!0), i(N, null, $(c(l), (u) => (n(), i("li", {
|
|
19
19
|
key: u.name,
|
|
20
20
|
class: "sandbox-link"
|
|
21
21
|
}, [
|
|
22
|
-
s(
|
|
22
|
+
s(v, {
|
|
23
23
|
to: u.to,
|
|
24
24
|
onClick: (o) => r("router-link-click", u)
|
|
25
25
|
}, {
|
|
26
|
-
default:
|
|
27
|
-
|
|
26
|
+
default: m(() => [
|
|
27
|
+
O(b(u.name), 1)
|
|
28
28
|
]),
|
|
29
29
|
_: 2
|
|
30
30
|
}, 1032, ["to", "onClick"])
|
|
31
31
|
]))), 128))
|
|
32
|
-
])) :
|
|
32
|
+
])) : h("", !0)
|
|
33
33
|
]);
|
|
34
34
|
};
|
|
35
35
|
}
|
|
36
|
-
}),
|
|
37
|
-
const r =
|
|
38
|
-
for (const [
|
|
39
|
-
r[
|
|
36
|
+
}), y = (e, a) => {
|
|
37
|
+
const r = e.__vccOpts || e;
|
|
38
|
+
for (const [l, p] of a)
|
|
39
|
+
r[l] = p;
|
|
40
40
|
return r;
|
|
41
|
-
}, S = /* @__PURE__ */
|
|
42
|
-
function
|
|
41
|
+
}, S = /* @__PURE__ */ y(Q, [["__scopeId", "data-v-f885412d"]]), ee = "16px", T = "24px";
|
|
42
|
+
function te(e) {
|
|
43
43
|
return {
|
|
44
|
-
mode:
|
|
45
|
-
highContrast:
|
|
44
|
+
mode: e.includes("night") ? "night" : "day",
|
|
45
|
+
highContrast: e.endsWith("high-contrast")
|
|
46
46
|
};
|
|
47
47
|
}
|
|
48
|
-
function
|
|
49
|
-
return
|
|
48
|
+
function oe(e, a) {
|
|
49
|
+
return a ? `electric-lime-${e}-high-contrast` : `electric-lime-${e}`;
|
|
50
50
|
}
|
|
51
|
-
const
|
|
52
|
-
localStorage.getItem(
|
|
53
|
-
), L =
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
51
|
+
const A = te(
|
|
52
|
+
localStorage.getItem(z) || j
|
|
53
|
+
), L = E(A.mode), M = E(A.highContrast), U = K(() => oe(L.value, M.value));
|
|
54
|
+
let I = !1;
|
|
55
|
+
function ne() {
|
|
56
|
+
I || (I = !0, V(!0).run(() => {
|
|
57
|
+
w(U, (e) => {
|
|
58
|
+
document.documentElement.setAttribute("data-kui-theme", e), localStorage.setItem(z, e);
|
|
59
|
+
}, { immediate: !0 });
|
|
60
|
+
}));
|
|
59
61
|
}
|
|
60
|
-
|
|
62
|
+
function le() {
|
|
63
|
+
return ne(), { theme: U, mode: L, highContrast: M };
|
|
64
|
+
}
|
|
65
|
+
const se = { class: "kong-ui-sandbox-theme-picker" }, ie = { class: "theme-picker-row" }, ae = {
|
|
61
66
|
"aria-label": "Theme",
|
|
62
67
|
class: "theme-picker-group",
|
|
63
68
|
role: "radiogroup"
|
|
64
|
-
},
|
|
69
|
+
}, ce = ["aria-label", "checked", "value", "onChange"], re = { class: "theme-picker-row" }, de = /* @__PURE__ */ f({
|
|
65
70
|
__name: "SandboxThemePicker",
|
|
66
|
-
setup(
|
|
67
|
-
const { mode:
|
|
68
|
-
day:
|
|
69
|
-
night:
|
|
71
|
+
setup(e) {
|
|
72
|
+
const { mode: a, highContrast: r } = le(), l = {
|
|
73
|
+
day: Y,
|
|
74
|
+
night: P
|
|
70
75
|
};
|
|
71
|
-
return (
|
|
72
|
-
const
|
|
73
|
-
return
|
|
74
|
-
|
|
75
|
-
d[1] || (d[1] =
|
|
76
|
-
|
|
77
|
-
(
|
|
76
|
+
return (p, d) => {
|
|
77
|
+
const v = k("KTooltip"), u = k("KInputSwitch");
|
|
78
|
+
return n(), i("div", se, [
|
|
79
|
+
t("div", ie, [
|
|
80
|
+
d[1] || (d[1] = t("span", { class: "theme-picker-label" }, "Theme", -1)),
|
|
81
|
+
t("div", ae, [
|
|
82
|
+
(n(!0), i(N, null, $(c(q), (o) => (n(), C(v, {
|
|
78
83
|
key: o.value,
|
|
79
84
|
placement: "top",
|
|
80
85
|
text: o.label
|
|
81
86
|
}, {
|
|
82
|
-
default:
|
|
83
|
-
|
|
84
|
-
class:
|
|
87
|
+
default: m(() => [
|
|
88
|
+
t("label", {
|
|
89
|
+
class: G(["theme-picker-option", { active: o.value === c(a) }])
|
|
85
90
|
}, [
|
|
86
|
-
|
|
91
|
+
t("input", {
|
|
87
92
|
"aria-label": o.label,
|
|
88
|
-
checked: o.value === c(
|
|
93
|
+
checked: o.value === c(a),
|
|
89
94
|
class: "theme-picker-input",
|
|
90
95
|
name: "sandbox-theme-mode",
|
|
91
96
|
type: "radio",
|
|
92
97
|
value: o.value,
|
|
93
|
-
onChange: (_) =>
|
|
94
|
-
}, null, 40,
|
|
95
|
-
(
|
|
98
|
+
onChange: (_) => a.value = o.value
|
|
99
|
+
}, null, 40, ce),
|
|
100
|
+
(n(), C(H(l[o.value]), {
|
|
96
101
|
decorative: "",
|
|
97
|
-
size: `var(--kui-icon-size-30, ${c(
|
|
102
|
+
size: `var(--kui-icon-size-30, ${c(ee)})`
|
|
98
103
|
}, null, 8, ["size"]))
|
|
99
104
|
], 2)
|
|
100
105
|
]),
|
|
@@ -102,27 +107,33 @@ const oe = { class: "kong-ui-sandbox-theme-picker" }, ne = { class: "theme-picke
|
|
|
102
107
|
}, 1032, ["text"]))), 128))
|
|
103
108
|
])
|
|
104
109
|
]),
|
|
105
|
-
|
|
106
|
-
d[2] || (d[2] =
|
|
110
|
+
t("div", re, [
|
|
111
|
+
d[2] || (d[2] = t("span", { class: "theme-picker-label" }, "High contrast", -1)),
|
|
107
112
|
s(u, {
|
|
108
113
|
modelValue: c(r),
|
|
109
|
-
"onUpdate:modelValue": d[0] || (d[0] = (o) =>
|
|
114
|
+
"onUpdate:modelValue": d[0] || (d[0] = (o) => R(r) ? r.value = o : null),
|
|
110
115
|
"aria-label": "High contrast"
|
|
111
116
|
}, null, 8, ["modelValue"])
|
|
112
117
|
])
|
|
113
118
|
]);
|
|
114
119
|
};
|
|
115
120
|
}
|
|
116
|
-
}), x = /* @__PURE__ */
|
|
121
|
+
}), x = /* @__PURE__ */ y(de, [["__scopeId", "data-v-d7ba3b0d"]]), ue = { class: "kong-ui-sandbox-layout" }, _e = { class: "header" }, he = { class: "header-left" }, me = { class: "mobile-nav-container" }, ve = { class: "toggle-mobile-nav" }, ke = {
|
|
122
|
+
key: 0,
|
|
123
|
+
class: "nav-theme-picker"
|
|
124
|
+
}, pe = {
|
|
117
125
|
key: 0,
|
|
118
126
|
class: "mobile-title"
|
|
119
|
-
},
|
|
127
|
+
}, ge = { class: "header-right" }, be = {
|
|
120
128
|
key: 0,
|
|
121
129
|
class: "mobile-controls-container"
|
|
122
|
-
},
|
|
130
|
+
}, fe = { class: "toggle-mobile-controls" }, ye = { class: "layout" }, Ce = { class: "desktop-nav-container" }, Se = {
|
|
131
|
+
key: 0,
|
|
132
|
+
class: "nav-theme-picker"
|
|
133
|
+
}, Te = { class: "sandbox-container" }, Ie = { key: 0 }, xe = {
|
|
123
134
|
key: 0,
|
|
124
135
|
class: "sandbox-controls"
|
|
125
|
-
},
|
|
136
|
+
}, Ne = /* @__PURE__ */ f({
|
|
126
137
|
__name: "SandboxLayout",
|
|
127
138
|
props: {
|
|
128
139
|
title: {
|
|
@@ -137,28 +148,33 @@ const oe = { class: "kong-ui-sandbox-theme-picker" }, ne = { class: "theme-picke
|
|
|
137
148
|
controlsMinWidth: {
|
|
138
149
|
type: Number,
|
|
139
150
|
default: 240
|
|
151
|
+
},
|
|
152
|
+
/** Whether to apply a Kong theme to the sandbox and render the theme picker in the navigation. Set to `false` to leave the sandbox un-themed. */
|
|
153
|
+
applyTheming: {
|
|
154
|
+
type: Boolean,
|
|
155
|
+
default: !0
|
|
140
156
|
}
|
|
141
157
|
},
|
|
142
|
-
setup(
|
|
143
|
-
|
|
144
|
-
|
|
158
|
+
setup(e) {
|
|
159
|
+
W((l) => ({
|
|
160
|
+
v79c533b7: r.value
|
|
145
161
|
}));
|
|
146
|
-
const
|
|
147
|
-
|
|
148
|
-
const r =
|
|
149
|
-
return (
|
|
150
|
-
const d =
|
|
151
|
-
return
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
s(
|
|
156
|
-
default:
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
s(c(
|
|
162
|
+
const a = e;
|
|
163
|
+
X(D, a.links);
|
|
164
|
+
const r = K(() => `${a.controlsMinWidth}px`);
|
|
165
|
+
return (l, p) => {
|
|
166
|
+
const d = k("KSlideout"), v = k("KToggle"), u = k("router-link");
|
|
167
|
+
return n(), i("div", ue, [
|
|
168
|
+
t("header", _e, [
|
|
169
|
+
t("div", he, [
|
|
170
|
+
t("div", me, [
|
|
171
|
+
s(v, null, {
|
|
172
|
+
default: m(({ isToggled: o, toggle: _ }) => [
|
|
173
|
+
t("div", null, [
|
|
174
|
+
t("div", ve, [
|
|
175
|
+
s(c(F), {
|
|
160
176
|
role: "button",
|
|
161
|
-
size: `var(--kui-icon-size-50, ${c(
|
|
177
|
+
size: `var(--kui-icon-size-50, ${c(T)})`,
|
|
162
178
|
title: "Toggle menu",
|
|
163
179
|
onClick: _
|
|
164
180
|
}, null, 8, ["size", "onClick"])
|
|
@@ -168,10 +184,10 @@ const oe = { class: "kong-ui-sandbox-theme-picker" }, ne = { class: "theme-picke
|
|
|
168
184
|
visible: o.value,
|
|
169
185
|
onClose: _
|
|
170
186
|
}, {
|
|
171
|
-
default:
|
|
172
|
-
e("div",
|
|
187
|
+
default: m(() => [
|
|
188
|
+
e.applyTheming ? (n(), i("div", ke, [
|
|
173
189
|
s(x)
|
|
174
|
-
]),
|
|
190
|
+
])) : h("", !0),
|
|
175
191
|
s(S, { onRouterLinkClick: _ }, null, 8, ["onRouterLinkClick"])
|
|
176
192
|
]),
|
|
177
193
|
_: 2
|
|
@@ -180,28 +196,28 @@ const oe = { class: "kong-ui-sandbox-theme-picker" }, ne = { class: "theme-picke
|
|
|
180
196
|
]),
|
|
181
197
|
_: 1
|
|
182
198
|
}),
|
|
183
|
-
|
|
199
|
+
e.title ? (n(), i("h1", pe, [
|
|
184
200
|
s(u, {
|
|
185
201
|
class: "home-link",
|
|
186
202
|
to: { name: "home" }
|
|
187
203
|
}, {
|
|
188
|
-
default:
|
|
189
|
-
|
|
204
|
+
default: m(() => [
|
|
205
|
+
O(b(e.title), 1)
|
|
190
206
|
]),
|
|
191
207
|
_: 1
|
|
192
208
|
})
|
|
193
|
-
])) :
|
|
209
|
+
])) : h("", !0)
|
|
194
210
|
])
|
|
195
211
|
]),
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
s(
|
|
199
|
-
default:
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
s(c(
|
|
212
|
+
t("div", ge, [
|
|
213
|
+
l.$slots.controls ? (n(), i("div", be, [
|
|
214
|
+
s(v, null, {
|
|
215
|
+
default: m(({ isToggled: o, toggle: _ }) => [
|
|
216
|
+
t("div", null, [
|
|
217
|
+
t("div", fe, [
|
|
218
|
+
s(c(Z), {
|
|
203
219
|
role: "button",
|
|
204
|
-
size: `var(--kui-icon-size-50, ${c(
|
|
220
|
+
size: `var(--kui-icon-size-50, ${c(T)})`,
|
|
205
221
|
title: "Toggle controls",
|
|
206
222
|
onClick: _
|
|
207
223
|
}, null, 8, ["size", "onClick"])
|
|
@@ -211,8 +227,8 @@ const oe = { class: "kong-ui-sandbox-theme-picker" }, ne = { class: "theme-picke
|
|
|
211
227
|
visible: o.value,
|
|
212
228
|
onClose: _
|
|
213
229
|
}, {
|
|
214
|
-
default:
|
|
215
|
-
|
|
230
|
+
default: m(() => [
|
|
231
|
+
g(l.$slots, "controls", {}, void 0, !0)
|
|
216
232
|
]),
|
|
217
233
|
_: 3
|
|
218
234
|
}, 8, ["visible", "onClose"])
|
|
@@ -220,33 +236,33 @@ const oe = { class: "kong-ui-sandbox-theme-picker" }, ne = { class: "theme-picke
|
|
|
220
236
|
]),
|
|
221
237
|
_: 3
|
|
222
238
|
})
|
|
223
|
-
])) :
|
|
239
|
+
])) : h("", !0)
|
|
224
240
|
])
|
|
225
241
|
]),
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
e("div",
|
|
242
|
+
t("div", ye, [
|
|
243
|
+
t("div", Ce, [
|
|
244
|
+
e.applyTheming ? (n(), i("div", Se, [
|
|
229
245
|
s(x)
|
|
230
|
-
]),
|
|
246
|
+
])) : h("", !0),
|
|
231
247
|
s(S)
|
|
232
248
|
]),
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
249
|
+
t("div", Te, [
|
|
250
|
+
e.title ? (n(), i("h1", Ie, b(e.title), 1)) : h("", !0),
|
|
251
|
+
g(l.$slots, "default", {}, void 0, !0)
|
|
236
252
|
]),
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
])) :
|
|
253
|
+
l.$slots.controls ? (n(), i("div", xe, [
|
|
254
|
+
g(l.$slots, "controls", {}, void 0, !0)
|
|
255
|
+
])) : h("", !0)
|
|
240
256
|
])
|
|
241
257
|
]);
|
|
242
258
|
};
|
|
243
259
|
}
|
|
244
|
-
}),
|
|
260
|
+
}), Ee = /* @__PURE__ */ y(Ne, [["__scopeId", "data-v-068d466e"]]);
|
|
245
261
|
export {
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
262
|
+
j as KONG_UI_SANDBOX_DEFAULT_THEME,
|
|
263
|
+
D as KONG_UI_SANDBOX_LAYOUT_LINKS_INJECTION_KEY,
|
|
264
|
+
q as KONG_UI_SANDBOX_THEME_MODE_OPTIONS,
|
|
265
|
+
z as KONG_UI_SANDBOX_THEME_STORAGE_KEY,
|
|
266
|
+
Ee as SandboxLayout,
|
|
251
267
|
x as SandboxThemePicker
|
|
252
268
|
};
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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 h="kong-ui-sandbox-layout-links",k="kong-ui-sandbox-theme",g="electric-lime-day",f=[{label:"Day",value:"day"},{label:"Night",value:"night"}],y={key:0,class:"kong-ui-sandbox-navigation"},B=e.defineComponent({__name:"SandboxNavigation",emits:["router-link-click"],setup(t,{emit:c}){const a=c,l=e.inject(h,[]);return(_,i)=>{const d=e.resolveComponent("router-link");return e.openBlock(),e.createElementBlock("nav",null,[e.unref(l).length?(e.openBlock(),e.createElementBlock("ul",y,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(l),s=>(e.openBlock(),e.createElementBlock("li",{key:s.name,class:"sandbox-link"},[e.createVNode(d,{to:s.to,onClick:o=>a("router-link-click",s)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(s.name),1)]),_:2},1032,["to","onClick"])]))),128))])):e.createCommentVNode("",!0)])}}}),p=(t,c)=>{const a=t.__vccOpts||t;for(const[l,_]of c)a[l]=_;return a},E=p(B,[["__scopeId","data-v-f885412d"]]),I="16px",C="24px";function O(t){return{mode:t.includes("night")?"night":"day",highContrast:t.endsWith("high-contrast")}}function x(t,c){return c?`electric-lime-${t}-high-contrast`:`electric-lime-${t}`}const b=O(localStorage.getItem(k)||g),V=e.ref(b.mode),S=e.ref(b.highContrast),T=e.computed(()=>x(V.value,S.value));let u=!1;function K(){u||(u=!0,e.effectScope(!0).run(()=>{e.watch(T,t=>{document.documentElement.setAttribute("data-kui-theme",t),localStorage.setItem(k,t)},{immediate:!0})}))}function $(){return K(),{theme:T,mode:V,highContrast:S}}const D={class:"kong-ui-sandbox-theme-picker"},A={class:"theme-picker-row"},L={"aria-label":"Theme",class:"theme-picker-group",role:"radiogroup"},M=["aria-label","checked","value","onChange"],U={class:"theme-picker-row"},N=p(e.defineComponent({__name:"SandboxThemePicker",setup(t){const{mode:c,highContrast:a}=$(),l={day:m.LightModeIcon,night:m.DarkModeIcon};return(_,i)=>{const d=e.resolveComponent("KTooltip"),s=e.resolveComponent("KInputSwitch");return e.openBlock(),e.createElementBlock("div",D,[e.createElementVNode("div",A,[i[1]||(i[1]=e.createElementVNode("span",{class:"theme-picker-label"},"Theme",-1)),e.createElementVNode("div",L,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(f),o=>(e.openBlock(),e.createBlock(d,{key:o.value,placement:"top",text:o.label},{default:e.withCtx(()=>[e.createElementVNode("label",{class:e.normalizeClass(["theme-picker-option",{active:o.value===e.unref(c)}])},[e.createElementVNode("input",{"aria-label":o.label,checked:o.value===e.unref(c),class:"theme-picker-input",name:"sandbox-theme-mode",type:"radio",value:o.value,onChange:r=>c.value=o.value},null,40,M),(e.openBlock(),e.createBlock(e.resolveDynamicComponent(l[o.value]),{decorative:"",size:`var(--kui-icon-size-30, ${e.unref(I)})`},null,8,["size"]))],2)]),_:2},1032,["text"]))),128))])]),e.createElementVNode("div",U,[i[2]||(i[2]=e.createElementVNode("span",{class:"theme-picker-label"},"High contrast",-1)),e.createVNode(s,{modelValue:e.unref(a),"onUpdate:modelValue":i[0]||(i[0]=o=>e.isRef(a)?a.value=o:null),"aria-label":"High contrast"},null,8,["modelValue"])])])}}}),[["__scopeId","data-v-d7ba3b0d"]]),w={class:"kong-ui-sandbox-layout"},z={class:"header"},G={class:"header-left"},H={class:"mobile-nav-container"},X={class:"toggle-mobile-nav"},P={key:0,class:"nav-theme-picker"},Y={key:0,class:"mobile-title"},R={class:"header-right"},F={key:0,class:"mobile-controls-container"},W={class:"toggle-mobile-controls"},j={class:"layout"},q={class:"desktop-nav-container"},J={key:0,class:"nav-theme-picker"},Z={class:"sandbox-container"},Q={key:0},v={key:0,class:"sandbox-controls"},ee=p(e.defineComponent({__name:"SandboxLayout",props:{title:{type:String,default:""},links:{type:Array,required:!1,default:()=>[]},controlsMinWidth:{type:Number,default:240},applyTheming:{type:Boolean,default:!0}},setup(t){e.useCssVars(l=>({v79c533b7:a.value}));const c=t;e.provide(h,c.links);const a=e.computed(()=>`${c.controlsMinWidth}px`);return(l,_)=>{const i=e.resolveComponent("KSlideout"),d=e.resolveComponent("KToggle"),s=e.resolveComponent("router-link");return e.openBlock(),e.createElementBlock("div",w,[e.createElementVNode("header",z,[e.createElementVNode("div",G,[e.createElementVNode("div",H,[e.createVNode(d,null,{default:e.withCtx(({isToggled:o,toggle:r})=>[e.createElementVNode("div",null,[e.createElementVNode("div",X,[e.createVNode(e.unref(m.MenuIcon),{role:"button",size:`var(--kui-icon-size-50, ${e.unref(C)})`,title:"Toggle menu",onClick:r},null,8,["size","onClick"])]),e.createVNode(i,{title:"Main Menu",visible:o.value,onClose:r},{default:e.withCtx(()=>[t.applyTheming?(e.openBlock(),e.createElementBlock("div",P,[e.createVNode(N)])):e.createCommentVNode("",!0),e.createVNode(E,{onRouterLinkClick:r},null,8,["onRouterLinkClick"])]),_:2},1032,["visible","onClose"])])]),_:1}),t.title?(e.openBlock(),e.createElementBlock("h1",Y,[e.createVNode(s,{class:"home-link",to:{name:"home"}},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.title),1)]),_:1})])):e.createCommentVNode("",!0)])]),e.createElementVNode("div",R,[l.$slots.controls?(e.openBlock(),e.createElementBlock("div",F,[e.createVNode(d,null,{default:e.withCtx(({isToggled:o,toggle:r})=>[e.createElementVNode("div",null,[e.createElementVNode("div",W,[e.createVNode(e.unref(m.CogIcon),{role:"button",size:`var(--kui-icon-size-50, ${e.unref(C)})`,title:"Toggle controls",onClick:r},null,8,["size","onClick"])]),e.createVNode(i,{title:"Controls",visible:o.value,onClose:r},{default:e.withCtx(()=>[e.renderSlot(l.$slots,"controls",{},void 0,!0)]),_:3},8,["visible","onClose"])])]),_:3})])):e.createCommentVNode("",!0)])]),e.createElementVNode("div",j,[e.createElementVNode("div",q,[t.applyTheming?(e.openBlock(),e.createElementBlock("div",J,[e.createVNode(N)])):e.createCommentVNode("",!0),e.createVNode(E)]),e.createElementVNode("div",Z,[t.title?(e.openBlock(),e.createElementBlock("h1",Q,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),e.renderSlot(l.$slots,"default",{},void 0,!0)]),l.$slots.controls?(e.openBlock(),e.createElementBlock("div",v,[e.renderSlot(l.$slots,"controls",{},void 0,!0)])):e.createCommentVNode("",!0)])])}}}),[["__scopeId","data-v-068d466e"]]);n.KONG_UI_SANDBOX_DEFAULT_THEME=g,n.KONG_UI_SANDBOX_LAYOUT_LINKS_INJECTION_KEY=h,n.KONG_UI_SANDBOX_THEME_MODE_OPTIONS=f,n.KONG_UI_SANDBOX_THEME_STORAGE_KEY=k,n.SandboxLayout=ee,n.SandboxThemePicker=N,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}));
|