v-layouts/dist/v-layouts.umd.cjs

Web page layout collection for Vue3

(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".layout-admin-classic{display:grid;overflow:hidden;box-sizing:border-box;align-items:stretch;transition:all .2s}.layout-admin-classic .admin-header{grid-area:header}.layout-admin-classic .admin-aside{grid-area:aside;overflow:auto}.layout-admin-classic .admin-breadcrumb{grid-area:breadcrumb}.layout-admin-classic .admin-main{grid-area:main;overflow:auto}.layout-admin-classic .admin-footer{grid-area:footer}.layout-content-press{display:grid;overflow:hidden;box-sizing:border-box;align-items:stretch;transition:all .2s}.layout-content-press .content-header{grid-area:header}.layout-content-press .content-primary-aside{grid-area:primary-aside;overflow:auto}.layout-content-press .content-secondary-aside{grid-area:secondary-aside;overflow:auto}.layout-content-press .content-breadcrumb{grid-area:breadcrumb}.layout-content-press .content-main{grid-area:main;overflow:auto}.layout-content-press .content-footer{grid-area:footer}.panel-group{display:grid}.panel-group .panel-item{display:flex;flex-direction:column;overflow:hidden;border-radius:.5rem;transition:background-color .2s}.panel-group .panel-item--collapsed{background-color:#f9f9f9}.panel-group .panel-item--collapsed .panel-switcher svg{transform:rotate(180deg)}.panel-group .panel-item__header{display:flex;align-items:center;justify-content:space-between}.panel-group .panel-item__body{flex-grow:1;overflow:auto}.panel-group .panel-item .panel-switcher{display:flex;padding:0 1rem;cursor:pointer;color:#666}.panel-group .panel-item .panel-switcher,.panel-group .panel-item .panel-switcher svg{transition:all .2s}.panel-group .panel-item .panel-switcher--disabled{cursor:default;color:#ddd}")),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
(function(p,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(p=typeof globalThis<"u"?globalThis:p||self,e(p.VLayouts={},p.Vue))})(this,function(p,e){"use strict";const[N,V,H,I,$,_,B]=["header","aside","primary-aside","secondary-aside","breadcrumb","main","footer"],R="left";function u(t,a="px"){return typeof t=="number"?`${t}${a}`:t}function b(t,a){return C(t).map(a||(n=>n)).join(" ")}function h(t,a){return t?a:void 0}function C(t){return t.filter(a=>a)}function E(t){return{width:{type:[String,Number],default:"100vw"},height:{type:[String,Number],default:"100vh"},headerHeight:{type:[String,Number],default:60},footerHeight:{type:[String,Number],default:60},mainClass:{type:[String,Object,Array],default:""},...t}}function A(t){return{hasHeader:t.header,hasAside:t.aside,hasPrimaryAside:t.primaryAside,hasSecondaryAside:t.secondaryAside,hasBreadcrumb:t.breadcrumb,hasFooter:t.footer}}function D(){return E({breadcrumbHeight:{type:[String,Number],default:60},asideWidth:{type:[String,Number],default:260},asidePosition:{type:String,default:"left"},asideFullHeight:{type:Boolean,default:!1}})}function O(t,a){const n=e.computed(()=>["admin-main",t.mainClass]),c=o=>t.asidePosition===R?o:o.reverse();return{mainClasses:n,getContainerStyles:()=>{const{hasAside:o,hasHeader:s,hasBreadcrumb:d,hasFooter:i}=A(a),r=c([h(o,u(t.asideWidth)),"auto"]),f=[h(s,u(t.headerHeight)),h(d,u(t.breadcrumbHeight)),"auto",h(i,u(t.footerHeight))],g=h(o,t.asideFullHeight?V:N),l=h(o,V),y=[[l,_]];d&&y.unshift([l,$]),s&&y.unshift([g,N]),i&&y.push([l,B]);const S=w=>`"${C(c(w)).join(" ")}"`;return{width:u(t.width),height:u(t.height),"grid-template-columns":b(r),"grid-template-rows":b(f),"grid-template-areas":b(y,S)}}}}const j=e.defineComponent({name:"LayoutAdminClassic",props:D(),setup(t,{slots:a}){const{mainClasses:n,getContainerStyles:c}=O(t,a);return()=>{var r;const{hasAside:m,hasHeader:o,hasBreadcrumb:s,hasFooter:d}=A(a),i=c();return e.createVNode("div",{class:"layout-admin-classic",style:i},[o&&e.createVNode("div",{class:"admin-header"},[a.header()]),m&&e.createVNode("div",{class:"admin-aside"},[a.aside()]),s&&e.createVNode("div",{class:"admin-breadcrumb"},[a.breadcrumb()]),e.createVNode("div",{class:n.value},[(r=a.default)==null?void 0:r.call(a)]),d&&e.createVNode("div",{class:"admin-footer"},[a.footer()])])}}});function F(){return E({primaryAsideWidth:{type:[String,Number],default:260},secondaryAsideWidth:{type:[String,Number],default:260},mainPosition:{type:String,default:"center"}})}function L(t,a){const n=e.computed(()=>["content-main",t.mainClass]),c=o=>{const s=["left","center","right"],d=s.includes(o)?o:"center";return s.findIndex(i=>i===d)};return{mainClasses:n,getContainerStyles:()=>{const{hasHeader:o,hasPrimaryAside:s,hasSecondaryAside:d,hasFooter:i}=A(a),r=c(t.mainPosition),f=[h(s,u(t.primaryAsideWidth)),h(d,u(t.secondaryAsideWidth))];f.splice(r,0,"auto");const g=C(f).length,l=[h(o,u(t.headerHeight)),"auto",h(i,u(t.footerHeight))],y=Array(g).fill(N),S=Array(g).fill(B),w=[h(s,H),h(d,I)];w.splice(r,0,_);const P=[w];o&&P.unshift(y),i&&P.push(S);const Y=K=>`"${C(K).join(" ")}"`;return{width:u(t.width),height:u(t.height),"grid-template-columns":b(f),"grid-template-rows":b(l),"grid-template-areas":b(P,Y)}}}}const M=e.defineComponent({name:"LayoutContentPress",props:F(),setup(t,{slots:a}){const{mainClasses:n,getContainerStyles:c}=L(t,a);return()=>{var r;const{hasHeader:m,hasFooter:o,hasPrimaryAside:s,hasSecondaryAside:d}=A(a),i=c();return e.createVNode("div",{class:"layout-content-press",style:i},[m&&e.createVNode("div",{class:"content-header"},[a.header()]),s&&e.createVNode("div",{class:"content-primary-aside"},[a.primaryAside()]),d&&e.createVNode("div",{class:"content-secondary-aside"},[a.secondaryAside()]),e.createVNode("div",{class:n.value},[(r=a.default)==null?void 0:r.call(a)]),o&&e.createVNode("div",{class:"content-footer"},[a.footer()])])}}}),k=Symbol("panel-group");function T(t,a){const n=e.ref([]);let c=0;const m=e.computed(()=>n.value.filter(i=>!i.collapse)),o=e.computed(()=>({width:u(t.width),height:u(t.height),"grid-template-rows":n.value.map(i=>i.collapse?"auto":"1fr").join(" "),"row-gap":u(t.gap)})),s=e.computed({get:()=>m.value.map(i=>i.name),set(i){if(!Array.isArray(i)||!i.length)return;const r=t.accordion?i[0]:i;n.value.forEach(f=>{f.collapse=!r.includes(f.name)})}}),d=i=>{const r=++c,f=!!(t.accordion&&!t.modelValue&&n.value.length);n.value.push({id:r,name:i,collapse:f});const g=e.computed(()=>n.value.find(l=>l.id===r));return{panel:g,switcherDisabled:e.computed(()=>m.value.length===1&&!g.value.collapse),destroy:()=>n.value=n.value.filter(l=>l.id!==r),setCollapse:l=>{const y=n.value.find(S=>S.id===r);t.accordion&&n.value.forEach(S=>{S.collapse=!0}),y&&(y.collapse=l),a("update:modelValue",s.value)}}};return e.watchEffect(()=>{s.value=t.modelValue}),{panels:n,activePanels:s,groupStyles:o,createPanel:d}}const W={__name:"PanelGroup",props:{modelValue:{type:Array,default:void 0},width:{type:[String,Number],default:"auto"},height:{type:[String,Number],default:"100%"},gap:{type:[String,Number],default:"1rem"},accordion:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(t,{emit:a}){const n=t,c=a,{groupStyles:m,createPanel:o}=T(n,c);return e.provide(k,{createPanel:o}),(s,d)=>(e.openBlock(),e.createElementBlock("div",{class:"panel-group",style:e.normalizeStyle(e.unref(m))},[e.renderSlot(s.$slots,"default")],4))}},z=[e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",fill:"currentColor",class:"bi bi-caret-down-fill",viewBox:"0 0 16 16"},[e.createElementVNode("path",{d:"M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"})],-1)],x={__name:"PanelSwitcher",props:{collapse:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},emits:["change"],setup(t,{emit:a}){const n=t,c=a;function m(){n.disabled||c("change",!n.collapse)}return(o,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["panel-switcher",{"panel-switcher--disabled":n.disabled}]),onClick:m},z,2))}},G={key:0,class:"panel-item__header"},q={key:1,class:"panel-item__body"},U={__name:"PanelItem",props:{name:{type:String,default:""},switcher:{type:Boolean,default:!0},switcherClass:{type:String,default:""},destroyOnCollapse:{type:Boolean,default:!1}},emits:["change"],setup(t,{emit:a}){const n=t,c=a,{createPanel:m}=e.inject(k),{panel:o,switcherDisabled:s,destroy:d,setCollapse:i}=m(n.name),r=e.computed(()=>n.destroyOnCollapse?!o.value.collapse:!0),f=e.computed(()=>n.destroyOnCollapse?!0:!o.value.collapse);function g(l){i(l),c("change",l)}return e.onUnmounted(()=>d()),(l,y)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["panel-item",{"panel-item--collapsed":e.unref(o).collapse}])},[l.$slots.header?(e.openBlock(),e.createElementBlock("div",G,[e.renderSlot(l.$slots,"header",{collapse:e.unref(o).collapse}),t.switcher?(e.openBlock(),e.createBlock(x,{key:0,collapse:e.unref(o).collapse,class:e.normalizeClass(t.switcherClass),disabled:e.unref(s),onChange:g},null,8,["collapse","class","disabled"])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),r.value?e.withDirectives((e.openBlock(),e.createElementBlock("div",q,[e.renderSlot(l.$slots,"default",{collapse:e.unref(o).collapse})],512)),[[e.vShow,f.value]]):e.createCommentVNode("",!0)],2))}};p.LayoutAdminClassic=j,p.LayoutContentPress=M,p.PanelGroup=W,p.PanelItem=U,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});