@kong-ui-public/sandbox-layout 2.0.18 → 2.0.19

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.
@@ -1,16 +1,16 @@
1
- import { defineComponent as k, inject as K, resolveComponent as y, openBlock as r, createElementBlock as l, unref as _, Fragment as T, renderList as B, createVNode as d, withCtx as c, createTextVNode as N, toDisplayString as v, createCommentVNode as u, computed as f, createBlock as L, resolveDynamicComponent as z, normalizeStyle as I, pushScopeId as w, popScopeId as q, createElementVNode as s, useCssVars as M, provide as O, renderSlot as C } from "vue";
2
- const V = "kong-ui-sandbox-layout-links", E = {
1
+ import { defineComponent as k, inject as M, resolveComponent as y, openBlock as r, createElementBlock as l, unref as _, Fragment as T, renderList as B, createVNode as d, withCtx as c, createTextVNode as N, toDisplayString as v, createCommentVNode as u, computed as f, createBlock as L, resolveDynamicComponent as I, normalizeStyle as z, pushScopeId as w, popScopeId as q, createElementVNode as s, useCssVars as K, provide as O, renderSlot as C } from "vue";
2
+ const V = "kong-ui-sandbox-layout-links", Z = {
3
3
  key: 0,
4
4
  class: "kong-ui-sandbox-navigation"
5
- }, Z = /* @__PURE__ */ k({
5
+ }, E = /* @__PURE__ */ k({
6
6
  __name: "SandboxNavigation",
7
7
  emits: ["router-link-click"],
8
8
  setup(e, { emit: t }) {
9
- const i = t, o = K(V, []);
9
+ const i = t, o = M(V, []);
10
10
  return (a, n) => {
11
11
  const m = y("router-link");
12
12
  return r(), l("nav", null, [
13
- _(o).length ? (r(), l("ul", E, [
13
+ _(o).length ? (r(), l("ul", Z, [
14
14
  (r(!0), l(T, null, B(_(o), (p) => (r(), l("li", {
15
15
  key: p.name,
16
16
  class: "sandbox-link"
@@ -34,18 +34,18 @@ const V = "kong-ui-sandbox-layout-links", E = {
34
34
  for (const [o, a] of t)
35
35
  i[o] = a;
36
36
  return i;
37
- }, S = /* @__PURE__ */ $(Z, [["__scopeId", "data-v-2cb154ed"]]), b = "24px", H = (e, t) => {
37
+ }, x = /* @__PURE__ */ $(E, [["__scopeId", "data-v-2cb154ed"]]), b = "24px", H = (e, t) => {
38
38
  const i = e.__vccOpts || e;
39
39
  for (const [o, a] of t)
40
40
  i[o] = a;
41
41
  return i;
42
- }, A = (e) => (w("data-v-39ea1f55"), e = e(), q(), e), D = ["aria-hidden"], U = {
42
+ }, A = (e) => (w("data-v-96f00821"), e = e(), q(), e), D = ["aria-hidden"], U = {
43
43
  key: 0,
44
44
  "data-testid": "kui-icon-svg-title"
45
45
  }, W = /* @__PURE__ */ A(() => /* @__PURE__ */ s("path", {
46
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
47
  fill: "currentColor"
48
- }, null, -1)), Y = /* @__PURE__ */ k({
48
+ }, null, -1)), R = /* @__PURE__ */ k({
49
49
  __name: "CogIcon",
50
50
  props: {
51
51
  /** The accessibility text provided to screen readers */
@@ -114,11 +114,11 @@ const V = "kong-ui-sandbox-layout-links", E = {
114
114
  lineHeight: "0",
115
115
  width: i.value
116
116
  }));
117
- return (a, n) => (r(), L(z(e.as), {
117
+ return (a, n) => (r(), L(I(e.as), {
118
118
  "aria-hidden": e.decorative ? "true" : void 0,
119
119
  class: "kui-icon cog-icon",
120
120
  "data-testid": "kui-icon-wrapper-cog-icon",
121
- style: I(o.value)
121
+ style: z(o.value)
122
122
  }, {
123
123
  default: c(() => [
124
124
  (r(), l("svg", {
@@ -138,13 +138,13 @@ const V = "kong-ui-sandbox-layout-links", E = {
138
138
  _: 1
139
139
  }, 8, ["aria-hidden", "style"]));
140
140
  }
141
- }), G = /* @__PURE__ */ H(Y, [["__scopeId", "data-v-39ea1f55"]]), J = (e) => (w("data-v-a4957138"), e = e(), q(), e), R = ["aria-hidden"], X = {
141
+ }), Y = /* @__PURE__ */ H(R, [["__scopeId", "data-v-96f00821"]]), j = (e) => (w("data-v-4095972c"), e = e(), q(), e), F = ["aria-hidden"], G = {
142
142
  key: 0,
143
143
  "data-testid": "kui-icon-svg-title"
144
- }, j = /* @__PURE__ */ J(() => /* @__PURE__ */ s("path", {
144
+ }, J = /* @__PURE__ */ j(() => /* @__PURE__ */ s("path", {
145
145
  d: "M3 18V16H21V18H3ZM3 13V11H21V13H3ZM3 8V6H21V8H3Z",
146
146
  fill: "currentColor"
147
- }, null, -1)), F = /* @__PURE__ */ k({
147
+ }, null, -1)), X = /* @__PURE__ */ k({
148
148
  __name: "MenuIcon",
149
149
  props: {
150
150
  /** The accessibility text provided to screen readers */
@@ -213,11 +213,11 @@ const V = "kong-ui-sandbox-layout-links", E = {
213
213
  lineHeight: "0",
214
214
  width: i.value
215
215
  }));
216
- return (a, n) => (r(), L(z(e.as), {
216
+ return (a, n) => (r(), L(I(e.as), {
217
217
  "aria-hidden": e.decorative ? "true" : void 0,
218
218
  class: "kui-icon menu-icon",
219
219
  "data-testid": "kui-icon-wrapper-menu-icon",
220
- style: I(o.value)
220
+ style: z(o.value)
221
221
  }, {
222
222
  default: c(() => [
223
223
  (r(), l("svg", {
@@ -230,14 +230,14 @@ const V = "kong-ui-sandbox-layout-links", E = {
230
230
  width: "100%",
231
231
  xmlns: "http://www.w3.org/2000/svg"
232
232
  }, [
233
- e.title ? (r(), l("title", X, v(e.title), 1)) : u("", !0),
234
- j
235
- ], 8, R))
233
+ e.title ? (r(), l("title", G, v(e.title), 1)) : u("", !0),
234
+ J
235
+ ], 8, F))
236
236
  ]),
237
237
  _: 1
238
238
  }, 8, ["aria-hidden", "style"]));
239
239
  }
240
- }), Q = /* @__PURE__ */ H(F, [["__scopeId", "data-v-a4957138"]]), x = "24px", P = { class: "kong-ui-sandbox-layout" }, ee = { class: "header" }, te = { class: "header-left" }, ie = { class: "mobile-nav-container" }, oe = { class: "toggle-mobile-nav" }, ne = {
240
+ }), P = /* @__PURE__ */ H(X, [["__scopeId", "data-v-4095972c"]]), S = "24px", Q = { class: "kong-ui-sandbox-layout" }, ee = { class: "header" }, te = { class: "header-left" }, ie = { class: "mobile-nav-container" }, oe = { class: "toggle-mobile-nav" }, ne = {
241
241
  key: 0,
242
242
  class: "mobile-title"
243
243
  }, re = { class: "header-right" }, se = {
@@ -264,7 +264,7 @@ const V = "kong-ui-sandbox-layout-links", E = {
264
264
  }
265
265
  },
266
266
  setup(e) {
267
- M((o) => ({
267
+ K((o) => ({
268
268
  "616fb022": i.value
269
269
  }));
270
270
  const t = e;
@@ -272,7 +272,7 @@ const V = "kong-ui-sandbox-layout-links", E = {
272
272
  const i = f(() => `${t.controlsMinWidth}px`);
273
273
  return (o, a) => {
274
274
  const n = y("KSlideout"), m = y("KToggle"), p = y("router-link");
275
- return r(), l("div", P, [
275
+ return r(), l("div", Q, [
276
276
  s("header", ee, [
277
277
  s("div", te, [
278
278
  s("div", ie, [
@@ -280,9 +280,9 @@ const V = "kong-ui-sandbox-layout-links", E = {
280
280
  default: c(({ isToggled: h, toggle: g }) => [
281
281
  s("div", null, [
282
282
  s("div", oe, [
283
- d(_(Q), {
283
+ d(_(P), {
284
284
  role: "button",
285
- size: _(x),
285
+ size: _(S),
286
286
  title: "Toggle menu",
287
287
  onClick: g
288
288
  }, null, 8, ["size", "onClick"])
@@ -294,7 +294,7 @@ const V = "kong-ui-sandbox-layout-links", E = {
294
294
  onClose: g
295
295
  }, {
296
296
  default: c(() => [
297
- d(S, { onRouterLinkClick: g }, null, 8, ["onRouterLinkClick"])
297
+ d(x, { onRouterLinkClick: g }, null, 8, ["onRouterLinkClick"])
298
298
  ]),
299
299
  _: 2
300
300
  }, 1032, ["is-visible", "onClose"])
@@ -321,9 +321,9 @@ const V = "kong-ui-sandbox-layout-links", E = {
321
321
  default: c(({ isToggled: h, toggle: g }) => [
322
322
  s("div", null, [
323
323
  s("div", le, [
324
- d(_(G), {
324
+ d(_(Y), {
325
325
  role: "button",
326
- size: _(x),
326
+ size: _(S),
327
327
  title: "Toggle controls",
328
328
  onClick: g
329
329
  }, null, 8, ["size", "onClick"])
@@ -348,7 +348,7 @@ const V = "kong-ui-sandbox-layout-links", E = {
348
348
  ]),
349
349
  s("div", ae, [
350
350
  s("div", de, [
351
- d(S)
351
+ d(x)
352
352
  ]),
353
353
  s("div", ce, [
354
354
  e.title ? (r(), l("h1", ue, v(e.title), 1)) : u("", !0),
@@ -1 +1 @@
1
- (function(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s["kong-ui-public-sandbox-layout"]={},s.Vue))})(this,function(s,e){"use strict";const g="kong-ui-sandbox-layout-links",h={key:0,class:"kong-ui-sandbox-navigation"},C=e.defineComponent({__name:"SandboxNavigation",emits:["router-link-click"],setup(t,{emit:o}){const n=o,i=e.inject(g,[]);return(l,r)=>{const p=e.resolveComponent("router-link");return e.openBlock(),e.createElementBlock("nav",null,[e.unref(i).length?(e.openBlock(),e.createElementBlock("ul",h,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(i),a=>(e.openBlock(),e.createElementBlock("li",{key:a.name,class:"sandbox-link"},[e.createVNode(p,{to:a.to,onClick:m=>n("router-link-click",a)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(a.name),1)]),_:2},1032,["to","onClick"])]))),128))])):e.createCommentVNode("",!0)])}}}),f=(t,o)=>{const n=t.__vccOpts||t;for(const[i,l]of o)n[i]=l;return n},_=f(C,[["__scopeId","data-v-2cb154ed"]]),d="24px",k=(t,o)=>{const n=t.__vccOpts||t;for(const[i,l]of o)n[i]=l;return n},y=t=>(e.pushScopeId("data-v-39ea1f55"),t=t(),e.popScopeId(),t),N=["aria-hidden"],b={key:0,"data-testid":"kui-icon-svg-title"},S=y(()=>e.createElementVNode("path",{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",fill:"currentColor"},null,-1)),x=e.defineComponent({__name:"CogIcon",props:{title:{type:String,required:!1,default:""},color:{type:String,required:!1,default:"currentColor"},display:{type:String,required:!1,default:"block"},decorative:{type:Boolean,required:!1,default:!1},size:{type:[Number,String],required:!1,default:d,validator:t=>{if(typeof t=="number"&&t>0)return!0;if(typeof t=="string"){const o=String(t).replace(/px/gi,""),n=Number(o);if(n&&!isNaN(n)&&Number.isInteger(n)&&n>0)return!0}return!1}},as:{type:String,required:!1,default:"span"}},setup(t){const o=t,n=e.computed(()=>{if(typeof o.size=="number"&&o.size>0)return`${o.size}px`;if(typeof o.size=="string"){const l=String(o.size).replace(/px/gi,""),r=Number(l);if(r&&!isNaN(r)&&Number.isInteger(r)&&r>0)return`${r}px`}return d}),i=e.computed(()=>({boxSizing:"border-box",color:o.color,display:o.display,height:n.value,lineHeight:"0",width:n.value}));return(l,r)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.as),{"aria-hidden":t.decorative?"true":void 0,class:"kui-icon cog-icon","data-testid":"kui-icon-wrapper-cog-icon",style:e.normalizeStyle(i.value)},{default:e.withCtx(()=>[(e.openBlock(),e.createElementBlock("svg",{"aria-hidden":t.decorative?"true":void 0,"data-testid":"kui-icon-svg-cog-icon",fill:"none",height:"100%",role:"img",viewBox:"0 0 24 24",width:"100%",xmlns:"http://www.w3.org/2000/svg"},[t.title?(e.openBlock(),e.createElementBlock("title",b,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),S],8,N))]),_:1},8,["aria-hidden","style"]))}}),V=k(x,[["__scopeId","data-v-39ea1f55"]]),B=t=>(e.pushScopeId("data-v-a4957138"),t=t(),e.popScopeId(),t),E=["aria-hidden"],w={key:0,"data-testid":"kui-icon-svg-title"},L=B(()=>e.createElementVNode("path",{d:"M3 18V16H21V18H3ZM3 13V11H21V13H3ZM3 8V6H21V8H3Z",fill:"currentColor"},null,-1)),z=e.defineComponent({__name:"MenuIcon",props:{title:{type:String,required:!1,default:""},color:{type:String,required:!1,default:"currentColor"},display:{type:String,required:!1,default:"block"},decorative:{type:Boolean,required:!1,default:!1},size:{type:[Number,String],required:!1,default:d,validator:t=>{if(typeof t=="number"&&t>0)return!0;if(typeof t=="string"){const o=String(t).replace(/px/gi,""),n=Number(o);if(n&&!isNaN(n)&&Number.isInteger(n)&&n>0)return!0}return!1}},as:{type:String,required:!1,default:"span"}},setup(t){const o=t,n=e.computed(()=>{if(typeof o.size=="number"&&o.size>0)return`${o.size}px`;if(typeof o.size=="string"){const l=String(o.size).replace(/px/gi,""),r=Number(l);if(r&&!isNaN(r)&&Number.isInteger(r)&&r>0)return`${r}px`}return d}),i=e.computed(()=>({boxSizing:"border-box",color:o.color,display:o.display,height:n.value,lineHeight:"0",width:n.value}));return(l,r)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.as),{"aria-hidden":t.decorative?"true":void 0,class:"kui-icon menu-icon","data-testid":"kui-icon-wrapper-menu-icon",style:e.normalizeStyle(i.value)},{default:e.withCtx(()=>[(e.openBlock(),e.createElementBlock("svg",{"aria-hidden":t.decorative?"true":void 0,"data-testid":"kui-icon-svg-menu-icon",fill:"none",height:"100%",role:"img",viewBox:"0 0 24 24",width:"100%",xmlns:"http://www.w3.org/2000/svg"},[t.title?(e.openBlock(),e.createElementBlock("title",w,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),L],8,E))]),_:1},8,["aria-hidden","style"]))}}),I=k(z,[["__scopeId","data-v-a4957138"]]),u="24px",q={class:"kong-ui-sandbox-layout"},T={class:"header"},$={class:"header-left"},H={class:"mobile-nav-container"},K={class:"toggle-mobile-nav"},M={key:0,class:"mobile-title"},D={class:"header-right"},O={key:0,class:"mobile-controls-container"},Z={class:"toggle-mobile-controls"},j={class:"layout"},A={class:"desktop-nav-container"},U={class:"sandbox-container"},W={key:0},Y={key:0,class:"sandbox-controls"},G=f(e.defineComponent({__name:"SandboxLayout",props:{title:{type:String,default:""},links:{type:Array,required:!1,default:()=>[]},controlsMinWidth:{type:Number,default:240}},setup(t){e.useCssVars(i=>({"616fb022":n.value}));const o=t;e.provide(g,o.links);const n=e.computed(()=>`${o.controlsMinWidth}px`);return(i,l)=>{const r=e.resolveComponent("KSlideout"),p=e.resolveComponent("KToggle"),a=e.resolveComponent("router-link");return e.openBlock(),e.createElementBlock("div",q,[e.createElementVNode("header",T,[e.createElementVNode("div",$,[e.createElementVNode("div",H,[e.createVNode(p,null,{default:e.withCtx(({isToggled:m,toggle:c})=>[e.createElementVNode("div",null,[e.createElementVNode("div",K,[e.createVNode(e.unref(I),{role:"button",size:e.unref(u),title:"Toggle menu",onClick:c},null,8,["size","onClick"])]),e.createVNode(r,{"close-button-alignment":"end","is-visible":m.value,title:"Main Menu",onClose:c},{default:e.withCtx(()=>[e.createVNode(_,{onRouterLinkClick:c},null,8,["onRouterLinkClick"])]),_:2},1032,["is-visible","onClose"])])]),_:1}),t.title?(e.openBlock(),e.createElementBlock("h1",M,[e.createVNode(a,{class:"home-link",to:{name:"home"}},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.title),1)]),_:1})])):e.createCommentVNode("",!0)])]),e.createElementVNode("div",D,[i.$slots.controls?(e.openBlock(),e.createElementBlock("div",O,[e.createVNode(p,null,{default:e.withCtx(({isToggled:m,toggle:c})=>[e.createElementVNode("div",null,[e.createElementVNode("div",Z,[e.createVNode(e.unref(V),{role:"button",size:e.unref(u),title:"Toggle controls",onClick:c},null,8,["size","onClick"])]),e.createVNode(r,{"close-button-alignment":"end","is-visible":m.value,title:"Controls",onClose:c},{default:e.withCtx(()=>[e.renderSlot(i.$slots,"controls",{},void 0,!0)]),_:2},1032,["is-visible","onClose"])])]),_:3})])):e.createCommentVNode("",!0)])]),e.createElementVNode("div",j,[e.createElementVNode("div",A,[e.createVNode(_)]),e.createElementVNode("div",U,[t.title?(e.openBlock(),e.createElementBlock("h1",W,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),e.renderSlot(i.$slots,"default",{},void 0,!0)]),i.$slots.controls?(e.openBlock(),e.createElementBlock("div",Y,[e.renderSlot(i.$slots,"controls",{},void 0,!0)])):e.createCommentVNode("",!0)])])}}}),[["__scopeId","data-v-0331e848"]]);s.SandboxLayout=G,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});
1
+ (function(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s["kong-ui-public-sandbox-layout"]={},s.Vue))})(this,function(s,e){"use strict";const g="kong-ui-sandbox-layout-links",h={key:0,class:"kong-ui-sandbox-navigation"},C=e.defineComponent({__name:"SandboxNavigation",emits:["router-link-click"],setup(t,{emit:o}){const n=o,i=e.inject(g,[]);return(l,r)=>{const p=e.resolveComponent("router-link");return e.openBlock(),e.createElementBlock("nav",null,[e.unref(i).length?(e.openBlock(),e.createElementBlock("ul",h,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(i),c=>(e.openBlock(),e.createElementBlock("li",{key:c.name,class:"sandbox-link"},[e.createVNode(p,{to:c.to,onClick:m=>n("router-link-click",c)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(c.name),1)]),_:2},1032,["to","onClick"])]))),128))])):e.createCommentVNode("",!0)])}}}),f=(t,o)=>{const n=t.__vccOpts||t;for(const[i,l]of o)n[i]=l;return n},_=f(C,[["__scopeId","data-v-2cb154ed"]]),d="24px",k=(t,o)=>{const n=t.__vccOpts||t;for(const[i,l]of o)n[i]=l;return n},y=t=>(e.pushScopeId("data-v-96f00821"),t=t(),e.popScopeId(),t),N=["aria-hidden"],b={key:0,"data-testid":"kui-icon-svg-title"},S=y(()=>e.createElementVNode("path",{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",fill:"currentColor"},null,-1)),x=e.defineComponent({__name:"CogIcon",props:{title:{type:String,required:!1,default:""},color:{type:String,required:!1,default:"currentColor"},display:{type:String,required:!1,default:"block"},decorative:{type:Boolean,required:!1,default:!1},size:{type:[Number,String],required:!1,default:d,validator:t=>{if(typeof t=="number"&&t>0)return!0;if(typeof t=="string"){const o=String(t).replace(/px/gi,""),n=Number(o);if(n&&!isNaN(n)&&Number.isInteger(n)&&n>0)return!0}return!1}},as:{type:String,required:!1,default:"span"}},setup(t){const o=t,n=e.computed(()=>{if(typeof o.size=="number"&&o.size>0)return`${o.size}px`;if(typeof o.size=="string"){const l=String(o.size).replace(/px/gi,""),r=Number(l);if(r&&!isNaN(r)&&Number.isInteger(r)&&r>0)return`${r}px`}return d}),i=e.computed(()=>({boxSizing:"border-box",color:o.color,display:o.display,height:n.value,lineHeight:"0",width:n.value}));return(l,r)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.as),{"aria-hidden":t.decorative?"true":void 0,class:"kui-icon cog-icon","data-testid":"kui-icon-wrapper-cog-icon",style:e.normalizeStyle(i.value)},{default:e.withCtx(()=>[(e.openBlock(),e.createElementBlock("svg",{"aria-hidden":t.decorative?"true":void 0,"data-testid":"kui-icon-svg-cog-icon",fill:"none",height:"100%",role:"img",viewBox:"0 0 24 24",width:"100%",xmlns:"http://www.w3.org/2000/svg"},[t.title?(e.openBlock(),e.createElementBlock("title",b,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),S],8,N))]),_:1},8,["aria-hidden","style"]))}}),V=k(x,[["__scopeId","data-v-96f00821"]]),B=t=>(e.pushScopeId("data-v-4095972c"),t=t(),e.popScopeId(),t),E=["aria-hidden"],L={key:0,"data-testid":"kui-icon-svg-title"},w=B(()=>e.createElementVNode("path",{d:"M3 18V16H21V18H3ZM3 13V11H21V13H3ZM3 8V6H21V8H3Z",fill:"currentColor"},null,-1)),I=e.defineComponent({__name:"MenuIcon",props:{title:{type:String,required:!1,default:""},color:{type:String,required:!1,default:"currentColor"},display:{type:String,required:!1,default:"block"},decorative:{type:Boolean,required:!1,default:!1},size:{type:[Number,String],required:!1,default:d,validator:t=>{if(typeof t=="number"&&t>0)return!0;if(typeof t=="string"){const o=String(t).replace(/px/gi,""),n=Number(o);if(n&&!isNaN(n)&&Number.isInteger(n)&&n>0)return!0}return!1}},as:{type:String,required:!1,default:"span"}},setup(t){const o=t,n=e.computed(()=>{if(typeof o.size=="number"&&o.size>0)return`${o.size}px`;if(typeof o.size=="string"){const l=String(o.size).replace(/px/gi,""),r=Number(l);if(r&&!isNaN(r)&&Number.isInteger(r)&&r>0)return`${r}px`}return d}),i=e.computed(()=>({boxSizing:"border-box",color:o.color,display:o.display,height:n.value,lineHeight:"0",width:n.value}));return(l,r)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.as),{"aria-hidden":t.decorative?"true":void 0,class:"kui-icon menu-icon","data-testid":"kui-icon-wrapper-menu-icon",style:e.normalizeStyle(i.value)},{default:e.withCtx(()=>[(e.openBlock(),e.createElementBlock("svg",{"aria-hidden":t.decorative?"true":void 0,"data-testid":"kui-icon-svg-menu-icon",fill:"none",height:"100%",role:"img",viewBox:"0 0 24 24",width:"100%",xmlns:"http://www.w3.org/2000/svg"},[t.title?(e.openBlock(),e.createElementBlock("title",L,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),w],8,E))]),_:1},8,["aria-hidden","style"]))}}),z=k(I,[["__scopeId","data-v-4095972c"]]),u="24px",q={class:"kong-ui-sandbox-layout"},T={class:"header"},$={class:"header-left"},H={class:"mobile-nav-container"},M={class:"toggle-mobile-nav"},D={key:0,class:"mobile-title"},K={class:"header-right"},O={key:0,class:"mobile-controls-container"},Z={class:"toggle-mobile-controls"},j={class:"layout"},A={class:"desktop-nav-container"},U={class:"sandbox-container"},W={key:0},R={key:0,class:"sandbox-controls"},Y=f(e.defineComponent({__name:"SandboxLayout",props:{title:{type:String,default:""},links:{type:Array,required:!1,default:()=>[]},controlsMinWidth:{type:Number,default:240}},setup(t){e.useCssVars(i=>({"616fb022":n.value}));const o=t;e.provide(g,o.links);const n=e.computed(()=>`${o.controlsMinWidth}px`);return(i,l)=>{const r=e.resolveComponent("KSlideout"),p=e.resolveComponent("KToggle"),c=e.resolveComponent("router-link");return e.openBlock(),e.createElementBlock("div",q,[e.createElementVNode("header",T,[e.createElementVNode("div",$,[e.createElementVNode("div",H,[e.createVNode(p,null,{default:e.withCtx(({isToggled:m,toggle:a})=>[e.createElementVNode("div",null,[e.createElementVNode("div",M,[e.createVNode(e.unref(z),{role:"button",size:e.unref(u),title:"Toggle menu",onClick:a},null,8,["size","onClick"])]),e.createVNode(r,{"close-button-alignment":"end","is-visible":m.value,title:"Main Menu",onClose:a},{default:e.withCtx(()=>[e.createVNode(_,{onRouterLinkClick:a},null,8,["onRouterLinkClick"])]),_:2},1032,["is-visible","onClose"])])]),_:1}),t.title?(e.openBlock(),e.createElementBlock("h1",D,[e.createVNode(c,{class:"home-link",to:{name:"home"}},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.title),1)]),_:1})])):e.createCommentVNode("",!0)])]),e.createElementVNode("div",K,[i.$slots.controls?(e.openBlock(),e.createElementBlock("div",O,[e.createVNode(p,null,{default:e.withCtx(({isToggled:m,toggle:a})=>[e.createElementVNode("div",null,[e.createElementVNode("div",Z,[e.createVNode(e.unref(V),{role:"button",size:e.unref(u),title:"Toggle controls",onClick:a},null,8,["size","onClick"])]),e.createVNode(r,{"close-button-alignment":"end","is-visible":m.value,title:"Controls",onClose:a},{default:e.withCtx(()=>[e.renderSlot(i.$slots,"controls",{},void 0,!0)]),_:2},1032,["is-visible","onClose"])])]),_:3})])):e.createCommentVNode("",!0)])]),e.createElementVNode("div",j,[e.createElementVNode("div",A,[e.createVNode(_)]),e.createElementVNode("div",U,[t.title?(e.openBlock(),e.createElementBlock("h1",W,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),e.renderSlot(i.$slots,"default",{},void 0,!0)]),i.$slots.controls?(e.openBlock(),e.createElementBlock("div",R,[e.renderSlot(i.$slots,"controls",{},void 0,!0)])):e.createCommentVNode("",!0)])])}}}),[["__scopeId","data-v-0331e848"]]);s.SandboxLayout=Y,Object.defineProperty(s,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.0.18",
3
+ "version": "2.0.19",
4
4
  "type": "module",
5
5
  "main": "./dist/sandbox-layout.umd.js",
6
6
  "module": "./dist/sandbox-layout.es.js",
@@ -21,7 +21,7 @@
21
21
  "access": "public"
22
22
  },
23
23
  "devDependencies": {
24
- "@kong/design-tokens": "1.12.3",
24
+ "@kong/design-tokens": "1.12.4",
25
25
  "@kong/kongponents": "9.0.0-alpha.73",
26
26
  "vue": "^3.3.13",
27
27
  "vue-router": "^4.2.5"
@@ -48,7 +48,7 @@
48
48
  "vue": "^3.3.13"
49
49
  },
50
50
  "dependencies": {
51
- "@kong/icons": "^1.8.8"
51
+ "@kong/icons": "^1.8.10"
52
52
  },
53
53
  "scripts": {
54
54
  "dev": "cross-env USE_SANDBOX=true vite",