@kong-ui-public/page-layout 0.2.26-pr.3280.cf72fada0.0 → 0.2.27
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/page-layout.umd.js +1 -1
- package/package.json +2 -2
package/dist/page-layout.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(m,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("vue-router"),require("@kong-ui-public/i18n"),require("@kong/icons")):typeof define=="function"&&define.amd?define(["exports","vue","vue-router","@kong-ui-public/i18n","@kong/icons"],t):(m=typeof globalThis<"u"?globalThis:m||self,t(m["kong-ui-public-page-layout"]={},m.Vue,m.VueRouter,m["kong-ui-public-i18n"],m.KongIcons))})(this,function(m,t,_,S,T){"use strict";const K={back_button:"Go back",favorite_button:{save_shortcut:"Save page to shortcuts",remove_shortcut:"Remove page from shortcuts"},tabs:{more_button:{label:"More",aria_label:"More tabs"}}};function x(){const e=S.createI18n("en-us",K);return{i18n:e,i18nT:S.i18nTComponent(e)}}const V={useI18n:x},E="16px",L="16px";function P(e,a){return t.getCurrentScope()?(t.onScopeDispose(e,a),!0):!1}const R=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const M=R?window:void 0;function N(e){var a;const n=t.toValue(e);return(a=n==null?void 0:n.$el)!==null&&a!==void 0?a:n}function z(){const e=t.shallowRef(!1),a=t.getCurrentInstance();return a&&t.onMounted(()=>{e.value=!0},a),e}function F(e){const a=z();return t.computed(()=>(a.value,!!e()))}function O(e,a,n={}){const{window:s=M,...f}=n;let r;const b=F(()=>s&&"ResizeObserver"in s),k=()=>{r&&(r.disconnect(),r=void 0)},l=t.watch(t.computed(()=>{const d=t.toValue(e);return Array.isArray(d)?d.map(u=>N(u)):[N(d)]}),d=>{if(k(),b.value&&s){r=new ResizeObserver(a);for(const u of d)u&&r.observe(u,f)}},{immediate:!0,flush:"post"}),c=()=>{k(),l()};return P(c),{isSupported:b,stop:c}}const A={ref:"page-layout-tabs",class:"page-layout-tabs","data-testid":"page-layout-tabs"},j={key:0},W=["aria-label"],G={class:"overflowing-items-count"},q={key:0,class:"layout-loader-container"},U=t.defineComponent({__name:"PageLayoutTabs",props:{tabs:{default:()=>[]}},setup(e){t.useCssVars(p=>({db98251e:t.unref(r)}));const{i18n:{t:a}}=V.useI18n(),n=_.useRouter(),s=t.inject("app:navigateTo",null),f=p=>{if(typeof p.to!="string"){n.push(p.to);return}if(typeof s!="function"){window.location.href=p.to;return}s(p.to)},r=L,b=t.useTemplateRef("page-layout-tabs"),k=t.useTemplateRef("page-layout-tabs-list"),l=t.ref(e.tabs.length),c=t.ref(!1),d=t.computed(()=>e.tabs.slice(0,l.value)),u=t.computed(()=>e.tabs.slice(l.value)),g=async()=>{var w,
|
|
1
|
+
(function(m,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("vue-router"),require("@kong-ui-public/i18n"),require("@kong/icons")):typeof define=="function"&&define.amd?define(["exports","vue","vue-router","@kong-ui-public/i18n","@kong/icons"],t):(m=typeof globalThis<"u"?globalThis:m||self,t(m["kong-ui-public-page-layout"]={},m.Vue,m.VueRouter,m["kong-ui-public-i18n"],m.KongIcons))})(this,function(m,t,_,S,T){"use strict";const K={back_button:"Go back",favorite_button:{save_shortcut:"Save page to shortcuts",remove_shortcut:"Remove page from shortcuts"},tabs:{more_button:{label:"More",aria_label:"More tabs"}}};function x(){const e=S.createI18n("en-us",K);return{i18n:e,i18nT:S.i18nTComponent(e)}}const V={useI18n:x},E="16px",L="16px";function P(e,a){return t.getCurrentScope()?(t.onScopeDispose(e,a),!0):!1}const R=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const M=R?window:void 0;function N(e){var a;const n=t.toValue(e);return(a=n==null?void 0:n.$el)!==null&&a!==void 0?a:n}function z(){const e=t.shallowRef(!1),a=t.getCurrentInstance();return a&&t.onMounted(()=>{e.value=!0},a),e}function F(e){const a=z();return t.computed(()=>(a.value,!!e()))}function O(e,a,n={}){const{window:s=M,...f}=n;let r;const b=F(()=>s&&"ResizeObserver"in s),k=()=>{r&&(r.disconnect(),r=void 0)},l=t.watch(t.computed(()=>{const d=t.toValue(e);return Array.isArray(d)?d.map(u=>N(u)):[N(d)]}),d=>{if(k(),b.value&&s){r=new ResizeObserver(a);for(const u of d)u&&r.observe(u,f)}},{immediate:!0,flush:"post"}),c=()=>{k(),l()};return P(c),{isSupported:b,stop:c}}const A={ref:"page-layout-tabs",class:"page-layout-tabs","data-testid":"page-layout-tabs"},j={key:0},W=["aria-label"],G={class:"overflowing-items-count"},q={key:0,class:"layout-loader-container"},U=t.defineComponent({__name:"PageLayoutTabs",props:{tabs:{default:()=>[]}},setup(e){t.useCssVars(p=>({db98251e:t.unref(r)}));const{i18n:{t:a}}=V.useI18n(),n=_.useRouter(),s=t.inject("app:navigateTo",null),f=p=>{if(typeof p.to!="string"){n.push(p.to);return}if(typeof s!="function"){window.location.href=p.to;return}s(p.to)},r=L,b=t.useTemplateRef("page-layout-tabs"),k=t.useTemplateRef("page-layout-tabs-list"),l=t.ref(e.tabs.length),c=t.ref(!1),d=t.computed(()=>e.tabs.slice(0,l.value)),u=t.computed(()=>e.tabs.slice(l.value)),g=async()=>{var B,w,o;if(!b.value||!k.value)return;c.value=!1,l.value=e.tabs.length,await t.nextTick();const p=((B=b.value)==null?void 0:B.getBoundingClientRect().width)-parseInt(r)*2;let i=(w=k.value)==null?void 0:w.getBoundingClientRect().width;if(!p||!i){c.value=!0;return}const C=50;for(;i+C>p&&l.value>1;)l.value--,await t.nextTick(),i=((o=k.value)==null?void 0:o.getBoundingClientRect().width)||0;c.value=!0};let y=null;const h=()=>{y&&clearTimeout(y),y=setTimeout(()=>{g()},150)};return t.onMounted(()=>{g(),O(b,h)}),t.onBeforeUnmount(()=>{y&&clearTimeout(y)}),t.watch(()=>e.tabs,()=>{g()},{deep:!0}),(p,i)=>{const C=t.resolveComponent("KDropdownItem"),B=t.resolveComponent("KDropdown"),w=t.resolveComponent("KSkeletonBox");return t.openBlock(),t.createElementBlock("nav",A,[t.createElementVNode("ul",{ref:"page-layout-tabs-list",class:t.normalizeClass({"layout-computing":!c.value})},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(d.value,o=>(t.openBlock(),t.createElementBlock("li",{key:`${o.key}-tab`},[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(typeof o.to=="string"?"a":"router-link"),t.mergeProps({ref_for:!0},typeof o.to=="string"?{href:o.to}:{to:o.to},{"aria-current":o.active?"page":void 0,class:["tab-link",{active:o.active}],"data-testid":o.dataTestId?o.dataTestId:`page-layout-tab-${o.key}`,tabindex:"0",onClick:t.withModifiers($=>f(o),["prevent"]),onKeydown:[t.withKeys(t.withModifiers($=>f(o),["prevent"]),["enter"]),t.withKeys(t.withModifiers($=>f(o),["prevent"]),["space"])]}),{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(o.label),1)]),_:2},1040,["aria-current","class","data-testid","onClick","onKeydown"]))]))),128)),e.tabs.length>l.value?(t.openBlock(),t.createElementBlock("li",j,[t.createVNode(B,{"kpop-attributes":{placement:"bottom-end",popoverElementAttributes:{"data-testid":"tabs-overflow-dropdown-popover"}}},{items:t.withCtx(()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(u.value,o=>(t.openBlock(),t.createBlock(C,{key:`${o.key}-dropdown-item`,"aria-current":o.active?"page":void 0,"data-testid":o.dataTestId?o.dataTestId:`page-layout-tab-${o.key}`,item:{label:o.label,value:o.key,to:o.to},selected:o.active},null,8,["aria-current","data-testid","item","selected"]))),128))]),default:t.withCtx(()=>[t.createElementVNode("button",{"aria-label":t.unref(a)("tabs.more_button.aria_label"),class:t.normalizeClass(["tab-link overflow-dropdown-trigger",{active:u.value.find(o=>o.active)}]),"data-testid":"tabs-overflow-dropdown-button"},[t.createTextVNode(t.toDisplayString(t.unref(a)("tabs.more_button.label"))+" ",1),t.createElementVNode("span",G,t.toDisplayString(e.tabs.length-l.value),1)],10,W)]),_:1})])):t.createCommentVNode("",!0)],2),c.value?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock("div",q,[(t.openBlock(),t.createElementBlock(t.Fragment,null,t.renderList(3,o=>t.createVNode(w,{key:`layout-loader-${o}`,height:"1",width:"5"})),64))]))],512)}}}),I=(e,a)=>{const n=e.__vccOpts||e;for(const[s,f]of a)n[s]=f;return n},Z=I(U,[["__scopeId","data-v-b3139545"]]),D=Symbol("nested-page-layout-detection"),H={class:"kong-ui-public-page-layout","data-testid":"kong-ui-public-page-layout"},J={key:0,class:"page-layout-header","data-testid":"page-layout-header"},Q={class:"page-header-container"},X={class:"page-header-start"},Y={class:"title-container"},v={key:1,class:"page-layout-title","data-testid":"page-layout-title"},tt={key:2,class:"favorite-button-container"},et=["aria-label"],ot={key:3,class:"title-after-container"},nt={key:0,class:"page-header-actions-container"},at=I(t.defineComponent({__name:"PageLayout",props:{breadcrumbs:{default:()=>[]},title:{},backTo:{},tabs:{default:()=>[]},pageShortcutData:{}},setup(e){const a=t.inject("app:navigateTo",null),n=t.inject("app:pageShortcutsContext",null),{i18n:{t:s}}=V.useI18n(),f=_.useRouter(),r=t.computed(()=>!!(e.tabs&&e.tabs.length)),b=t.computed(()=>typeof e.backTo=="string"),k=t.computed(()=>!!e.pageShortcutData&&!!e.pageShortcutData.entityType&&!!e.pageShortcutData.label),l=t.computed(()=>k.value&&!!n&&"onFavoriteToggle"in n&&typeof n.onFavoriteToggle=="function"),c=t.computed(()=>!!n&&"isFavorite"in n&&n.isFavorite===!0),d=async()=>{if(e.backTo){if(typeof e.backTo=="object"){f.push(e.backTo);return}if(typeof a!="function"){window.location.href=e.backTo;return}await a(e.backTo)}},u=t.ref(0),g=t.computed(()=>u.value>0);t.provide(D,()=>(u.value++,()=>{u.value--}));const y=t.inject(D,null),h=t.ref(null);typeof y=="function"&&(h.value=y());const p=()=>{n.onFavoriteToggle()};return t.onUnmounted(()=>{var i;(i=h.value)==null||i.call(h)}),t.watch(()=>e.pageShortcutData,async i=>{await t.nextTick(),!g.value&&k.value&&n&&"onEntityPageVisit"in n&&typeof n.onEntityPageVisit=="function"&&n.onEntityPageVisit(i)},{immediate:!0,deep:!0}),(i,C)=>{const B=t.resolveComponent("KBreadcrumbs"),w=t.resolveComponent("router-view");return t.openBlock(),t.createElementBlock("div",H,[g.value?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock("div",J,[t.createElementVNode("div",Q,[t.createElementVNode("div",X,[e.breadcrumbs&&e.breadcrumbs.length?(t.openBlock(),t.createBlock(B,{key:0,class:"header-breadcrumbs","data-testid":"page-layout-breadcrumbs","item-max-width":"25ch",items:e.breadcrumbs},null,8,["items"])):t.createCommentVNode("",!0),t.createElementVNode("div",Y,[e.backTo?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(b.value?"a":"router-link"),t.mergeProps({key:0},b.value?{href:e.backTo}:{to:e.backTo},{"aria-label":t.unref(s)("back_button"),class:"navigate-back","data-testid":"page-layout-navigate-back",tabindex:"0",onClick:t.withModifiers(d,["prevent"]),onKeydown:[t.withKeys(t.withModifiers(d,["prevent"]),["enter"]),t.withKeys(t.withModifiers(d,["prevent"]),["space"])]}),{default:t.withCtx(()=>[t.createVNode(t.unref(T.ArrowTopLeftIcon),{decorative:"",size:t.unref(E)},null,8,["size"])]),_:1},16,["aria-label","onKeydown"])):t.createCommentVNode("",!0),e.title?(t.openBlock(),t.createElementBlock("h1",v,t.toDisplayString(e.title),1)):t.createCommentVNode("",!0),l.value?(t.openBlock(),t.createElementBlock("div",tt,[t.createElementVNode("button",{"aria-label":c.value?t.unref(s)("favorite_button.remove_shortcut"):t.unref(s)("favorite_button.save_shortcut"),class:t.normalizeClass(["favorite-button",{active:c.value}]),"data-testid":"page-layout-favorite-button",type:"button",onClick:p},[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(c.value?t.unref(T.StarFillIcon):t.unref(T.StarIcon)),{decorative:"",size:t.unref(E)},null,8,["size"]))],10,et)])):t.createCommentVNode("",!0),i.$slots["title-after"]?(t.openBlock(),t.createElementBlock("div",ot,[t.renderSlot(i.$slots,"title-after",{},void 0,!0)])):t.createCommentVNode("",!0)])]),i.$slots.actions?(t.openBlock(),t.createElementBlock("div",nt,[t.renderSlot(i.$slots,"actions",{},void 0,!0)])):t.createCommentVNode("",!0)]),r.value?(t.openBlock(),t.createBlock(Z,{key:0,tabs:e.tabs},null,8,["tabs"])):t.createCommentVNode("",!0)])),t.createElementVNode("div",{class:t.normalizeClass(["page-layout-content",{"has-nested-page-layout":g.value}])},[r.value?(t.openBlock(),t.createBlock(w,{key:0})):t.renderSlot(i.$slots,"default",{key:1},void 0,!0)],2)])}}}),[["__scopeId","data-v-6827b0a6"]]);m.PageLayout=at,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kong-ui-public/page-layout",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.27",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/page-layout.umd.js",
|
|
6
6
|
"module": "./dist/page-layout.es.js",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"@kong-ui-public/i18n": "^2.4.6"
|
|
54
54
|
},
|
|
55
55
|
"dependencies": {
|
|
56
|
-
"@vueuse/core": "^14.
|
|
56
|
+
"@vueuse/core": "^14.3.0"
|
|
57
57
|
},
|
|
58
58
|
"scripts": {
|
|
59
59
|
"dev": "cross-env USE_SANDBOX=true vite",
|