@kong-ui-public/sandbox-layout 2.1.75-pr.2114.d6a8378f0.0 → 2.1.75

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.
@@ -0,0 +1,163 @@
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 b, createCommentVNode as _, useCssVars as K, provide as L, computed as O, createElementVNode as o, renderSlot as p } from "vue";
2
+ import { MenuIcon as E, CogIcon as V } from "@kong/icons";
3
+ const S = "kong-ui-sandbox-layout-links", z = {
4
+ key: 0,
5
+ class: "kong-ui-sandbox-navigation"
6
+ }, A = /* @__PURE__ */ y({
7
+ __name: "SandboxNavigation",
8
+ emits: ["router-link-click"],
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,
17
+ class: "sandbox-link"
18
+ }, [
19
+ e(v, {
20
+ to: a.to,
21
+ onClick: (m) => c("router-link-click", a)
22
+ }, {
23
+ default: d(() => [
24
+ x(b(a.name), 1)
25
+ ]),
26
+ _: 2
27
+ }, 1032, ["to", "onClick"])
28
+ ]))), 128))
29
+ ])) : _("", !0)
30
+ ]);
31
+ };
32
+ }
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 = {
39
+ key: 0,
40
+ class: "mobile-title"
41
+ }, Y = { class: "header-right" }, j = {
42
+ key: 0,
43
+ class: "mobile-controls-container"
44
+ }, q = { class: "toggle-mobile-controls" }, w = { class: "layout" }, F = { class: "desktop-nav-container" }, G = { class: "sandbox-container" }, J = { key: 0 }, X = {
45
+ key: 0,
46
+ class: "sandbox-controls"
47
+ }, Z = /* @__PURE__ */ y({
48
+ __name: "SandboxLayout",
49
+ props: {
50
+ title: {
51
+ type: String,
52
+ default: ""
53
+ },
54
+ links: {
55
+ type: Array,
56
+ required: !1,
57
+ default: () => []
58
+ },
59
+ controlsMinWidth: {
60
+ type: Number,
61
+ default: 240
62
+ }
63
+ },
64
+ setup(n) {
65
+ K((t) => ({
66
+ "1cac07d6": c.value
67
+ }));
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), {
82
+ role: "button",
83
+ size: u(C),
84
+ title: "Toggle menu",
85
+ onClick: r
86
+ }, null, 8, ["size", "onClick"])
87
+ ]),
88
+ e(g, {
89
+ title: "Main Menu",
90
+ visible: m.value,
91
+ onClose: r
92
+ }, {
93
+ default: d(() => [
94
+ e(f, { onRouterLinkClick: r }, null, 8, ["onRouterLinkClick"])
95
+ ]),
96
+ _: 2
97
+ }, 1032, ["visible", "onClose"])
98
+ ])
99
+ ]),
100
+ _: 1
101
+ }),
102
+ n.title ? (s(), l("h1", R, [
103
+ e(a, {
104
+ class: "home-link",
105
+ to: { name: "home" }
106
+ }, {
107
+ default: d(() => [
108
+ x(b(n.title), 1)
109
+ ]),
110
+ _: 1
111
+ })
112
+ ])) : _("", !0)
113
+ ])
114
+ ]),
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), {
122
+ role: "button",
123
+ size: u(C),
124
+ title: "Toggle controls",
125
+ onClick: r
126
+ }, null, 8, ["size", "onClick"])
127
+ ]),
128
+ e(g, {
129
+ title: "Controls",
130
+ visible: m.value,
131
+ onClose: r
132
+ }, {
133
+ default: d(() => [
134
+ p(t.$slots, "controls", {}, void 0, !0)
135
+ ]),
136
+ _: 2
137
+ }, 1032, ["visible", "onClose"])
138
+ ])
139
+ ]),
140
+ _: 3
141
+ })
142
+ ])) : _("", !0)
143
+ ])
144
+ ]),
145
+ o("div", w, [
146
+ o("div", F, [
147
+ e(f)
148
+ ]),
149
+ o("div", G, [
150
+ n.title ? (s(), l("h1", J, b(n.title), 1)) : _("", !0),
151
+ p(t.$slots, "default", {}, void 0, !0)
152
+ ]),
153
+ t.$slots.controls ? (s(), l("div", X, [
154
+ p(t.$slots, "controls", {}, void 0, !0)
155
+ ])) : _("", !0)
156
+ ])
157
+ ]);
158
+ };
159
+ }
160
+ }), Q = /* @__PURE__ */ I(Z, [["__scopeId", "data-v-7e25069f"]]);
161
+ export {
162
+ Q as SandboxLayout
163
+ };
@@ -0,0 +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,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 c=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),s=>(e.openBlock(),e.createElementBlock("li",{key:s.name,class:"sandbox-link"},[e.createVNode(r,{to:s.to,onClick:a=>c("router-link-click",s)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(s.name),1)]),_:2},1032,["to","onClick"])]))),128))])):e.createCommentVNode("",!0)])}}}),p=(o,l)=>{const c=o.__vccOpts||o;for(const[t,d]of l)c[t]=d;return c},h=p(g,[["__scopeId","data-v-2cb154ed"]]),f="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=>({"1cac07d6":c.value}));const l=o;e.provide(k,l.links);const c=e.computed(()=>`${l.controlsMinWidth}px`);return(t,d)=>{const _=e.resolveComponent("KSlideout"),r=e.resolveComponent("KToggle"),s=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(f),title:"Toggle menu",onClick:i},null,8,["size","onClick"])]),e.createVNode(_,{title:"Main Menu",visible:a.value,onClose:i},{default:e.withCtx(()=>[e.createVNode(h,{onRouterLinkClick:i},null,8,["onRouterLinkClick"])]),_:2},1032,["visible","onClose"])])]),_:1}),o.title?(e.openBlock(),e.createElementBlock("h1",E,[e.createVNode(s,{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(f),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(h)]),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-7e25069f"]]);n.SandboxLayout=O,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
package/dist/style.css ADDED
@@ -0,0 +1 @@
1
+ .kong-ui-sandbox-navigation[data-v-2cb154ed]{list-style:none;margin:0;padding:0}.kong-ui-sandbox-navigation .sandbox-link[data-v-2cb154ed]{margin-bottom:8px}.kong-ui-sandbox-navigation .sandbox-link[data-v-2cb154ed]:last-of-type{margin-bottom:0}.kong-ui-sandbox-navigation .sandbox-link a[data-v-2cb154ed]{background:#eee;border-radius:4px;color:#0044f4;display:block;font-weight:600;overflow:hidden;padding:8px 16px;text-decoration:none;text-overflow:ellipsis;transition:all .2s ease-in-out;white-space:nowrap}.kong-ui-sandbox-navigation .sandbox-link a[data-v-2cb154ed]:hover{background:#ccc;color:#002099}.kong-ui-sandbox-navigation .sandbox-link a.router-link-exact-active[data-v-2cb154ed],.kong-ui-sandbox-navigation .sandbox-link a.active[data-v-2cb154ed],.kong-ui-sandbox-navigation .sandbox-link a.router-link-exact-active[data-v-2cb154ed]:hover,.kong-ui-sandbox-navigation .sandbox-link a.active[data-v-2cb154ed]:hover{background:#0044f4;color:#fff}html,body{margin:0;padding:0}.kong-ui-sandbox-layout .header[data-v-7e25069f]{align-items:center;border-bottom:1px solid #e0e4ea;display:flex;justify-content:space-between;width:100%}@media (min-width: 1280px){.kong-ui-sandbox-layout .header[data-v-7e25069f]{display:none}}.kong-ui-sandbox-layout .header .header-left[data-v-7e25069f],.kong-ui-sandbox-layout .header .header-right[data-v-7e25069f]{align-items:center;display:flex;gap:20px;padding:20px;width:100%}.kong-ui-sandbox-layout .header .header-right[data-v-7e25069f]{justify-content:flex-end}.kong-ui-sandbox-layout .header h1[data-v-7e25069f]{font-size:18px;margin:0;white-space:nowrap}@media (min-width: 768px){.kong-ui-sandbox-layout .header h1[data-v-7e25069f]{font-size:24px}}.kong-ui-sandbox-layout .layout[data-v-7e25069f]{display:flex;gap:20px;padding:20px}.kong-ui-sandbox-layout .mobile-nav-container[data-v-7e25069f]{align-items:center;display:flex;gap:20px}@media (min-width: 1280px){.kong-ui-sandbox-layout .mobile-nav-container[data-v-7e25069f],.kong-ui-sandbox-layout .mobile-controls-container[data-v-7e25069f],.kong-ui-sandbox-layout .mobile-title[data-v-7e25069f]{display:none}}.kong-ui-sandbox-layout .sandbox-controls[data-v-7e25069f],.kong-ui-sandbox-layout .desktop-nav-container[data-v-7e25069f]{display:none}@media (min-width: 1280px){.kong-ui-sandbox-layout .sandbox-controls[data-v-7e25069f],.kong-ui-sandbox-layout .desktop-nav-container[data-v-7e25069f]{display:block}}.kong-ui-sandbox-layout .desktop-nav-container[data-v-7e25069f]{min-width:240px}.kong-ui-sandbox-layout .sandbox-container[data-v-7e25069f]{min-height:50vh;width:100%}@media (min-width: 1280px){.kong-ui-sandbox-layout .sandbox-container[data-v-7e25069f]{border:1px solid #e0e4ea;border-radius:6px;padding:20px}}.kong-ui-sandbox-layout .sandbox-container h1[data-v-7e25069f]{margin:0 0 20px}.kong-ui-sandbox-layout .sandbox-controls[data-v-7e25069f]{min-width:var(--1cac07d6)}@media (min-width: 1280px){.kong-ui-sandbox-layout .sandbox-controls[data-v-7e25069f]{border:1px solid #e0e4ea;border-radius:6px;padding:20px}}.kong-ui-sandbox-layout .home-link[data-v-7e25069f],.kong-ui-sandbox-layout .home-link[data-v-7e25069f]:visited{color:#0044f4;text-decoration:none}.kong-ui-sandbox-layout .toggle-mobile-nav[data-v-7e25069f],.kong-ui-sandbox-layout .toggle-mobile-controls[data-v-7e25069f]{color:#0044f4;cursor:pointer;transition:color .2s ease-in-out}.kong-ui-sandbox-layout .toggle-mobile-nav[data-v-7e25069f]:hover,.kong-ui-sandbox-layout .toggle-mobile-controls[data-v-7e25069f]:hover{color:#0030cc}.kong-ui-sandbox-layout[data-v-7e25069f] .k-slideout,.kong-ui-sandbox-layout[data-v-7e25069f] .k-card-body{font-size:16px}
@@ -0,0 +1,53 @@
1
+ import type { PropType } from 'vue';
2
+ import type { SandboxNavigationItem } from '../types';
3
+ declare function __VLS_template(): {
4
+ slots: {
5
+ controls?(_: {}): any;
6
+ controls?(_: {}): any;
7
+ default?(_: {}): any;
8
+ };
9
+ refs: {};
10
+ attrs: Partial<{}>;
11
+ };
12
+ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
13
+ declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
14
+ title: {
15
+ type: StringConstructor;
16
+ default: string;
17
+ };
18
+ links: {
19
+ type: PropType<SandboxNavigationItem[]>;
20
+ required: false;
21
+ default: () => never[];
22
+ };
23
+ controlsMinWidth: {
24
+ type: NumberConstructor;
25
+ default: number;
26
+ };
27
+ }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
28
+ title: {
29
+ type: StringConstructor;
30
+ default: string;
31
+ };
32
+ links: {
33
+ type: PropType<SandboxNavigationItem[]>;
34
+ required: false;
35
+ default: () => never[];
36
+ };
37
+ controlsMinWidth: {
38
+ type: NumberConstructor;
39
+ default: number;
40
+ };
41
+ }>> & Readonly<{}>, {
42
+ title: string;
43
+ links: SandboxNavigationItem[];
44
+ controlsMinWidth: number;
45
+ }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
46
+ declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
47
+ export default _default;
48
+ type __VLS_WithTemplateSlots<T, S> = T & {
49
+ new (): {
50
+ $slots: S;
51
+ };
52
+ };
53
+ //# sourceMappingURL=SandboxLayout.vue.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SandboxLayout.vue.d.ts","sourceRoot":"","sources":["../../../src/components/SandboxLayout.vue"],"names":[],"mappings":"AAiPA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAA;AACnC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAA;AA4CrD,iBAAS,cAAc;;0BA6OQ,GAAG;0BAEH,GAAG;yBADJ,GAAG;;;WAUnB,OAAO,IAA6B;EAEjD;AA2BD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;cAWF,QAAQ,CAAC,qBAAqB,EAAE,CAAC;;;;;;;;;;;;;;cAAjC,QAAQ,CAAC,qBAAqB,EAAE,CAAC;;;;;;;;;;;;4EASlD,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAKpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
@@ -0,0 +1,7 @@
1
+ declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
2
+ "router-link-click": (link: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric) => any;
3
+ }, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
4
+ "onRouter-link-click"?: ((link: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric) => any) | undefined;
5
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
6
+ export default _default;
7
+ //# sourceMappingURL=SandboxNavigation.vue.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SandboxNavigation.vue.d.ts","sourceRoot":"","sources":["../../../src/components/SandboxNavigation.vue"],"names":[],"mappings":";;;;;AAqMA,wBAQG"}
@@ -0,0 +1,2 @@
1
+ export declare const KONG_UI_SANDBOX_LAYOUT_LINKS_INJECTION_KEY = "kong-ui-sandbox-layout-links";
2
+ //# sourceMappingURL=constants.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,0CAA0C,iCAAiC,CAAA"}
@@ -0,0 +1,4 @@
1
+ import SandboxLayout from './components/SandboxLayout.vue';
2
+ export { SandboxLayout };
3
+ export * from './types';
4
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,gCAAgC,CAAA;AAE1D,OAAO,EAAE,aAAa,EAAE,CAAA;AAExB,cAAc,SAAS,CAAA"}
@@ -0,0 +1,2 @@
1
+ export * from './navigation';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAA"}
@@ -0,0 +1,8 @@
1
+ import type { RouteLocationRaw } from 'vue-router';
2
+ export interface SandboxNavigationItem {
3
+ /** The name of the item to display in the navigation, e.g. `My page` */
4
+ name: string;
5
+ /** The router link object, e.g. `{ name: 'my-page' }` */
6
+ to: RouteLocationRaw;
7
+ }
8
+ //# sourceMappingURL=navigation.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../src/types/navigation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAElD,MAAM,WAAW,qBAAqB;IACpC,wEAAwE;IACxE,IAAI,EAAE,MAAM,CAAA;IACZ,yDAAyD;IACzD,EAAE,EAAE,gBAAgB,CAAA;CACrB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kong-ui-public/sandbox-layout",
3
- "version": "2.1.75-pr.2114.d6a8378f0.0",
3
+ "version": "2.1.75",
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.4",
25
- "@kong/kongponents": "9.32.6",
25
+ "@kong/kongponents": "9.34.2",
26
26
  "vue": "^3.5.13",
27
27
  "vue-router": "^4.4.5"
28
28
  },
@@ -47,7 +47,7 @@
47
47
  "vue": ">= 3.3.13 < 4"
48
48
  },
49
49
  "dependencies": {
50
- "@kong/icons": "^1.26.0"
50
+ "@kong/icons": "^1.31.0"
51
51
  },
52
52
  "scripts": {
53
53
  "dev": "cross-env USE_SANDBOX=true vite",