vue3-justified-layout/dist/Vue3JustifiedLayout.umd.js

vue3-justified-layout

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("vue")):"function"==typeof define&&define.amd?define(["vue"],e):(t="undefined"!=typeof globalThis?globalThis:t||self).Vue3JustifiedLayout=e(t.Vue)}(this,(function(t){"use strict";var e=Object.defineProperty,i=Object.defineProperties,o=Object.getOwnPropertyDescriptors,a=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,s=Object.prototype.propertyIsEnumerable,r=(t,i,o)=>i in t?e(t,i,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[i]=o,h=(t,e)=>{for(var i in e||(e={}))n.call(e,i)&&r(t,i,e[i]);if(a)for(var i of a(e))s.call(e,i)&&r(t,i,e[i]);return t};function c(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var l={exports:{}};
/*!
   * Copyright 2019 SmugMug, Inc.
   * Licensed under the terms of the MIT license. Please see LICENSE file in the project root for terms.
   * @license
   */(l.exports=function(t){this.top=t.top,this.left=t.left,this.width=t.width,this.spacing=t.spacing,this.targetRowHeight=t.targetRowHeight,this.targetRowHeightTolerance=t.targetRowHeightTolerance,this.minAspectRatio=this.width/t.targetRowHeight*(1-t.targetRowHeightTolerance),this.maxAspectRatio=this.width/t.targetRowHeight*(1+t.targetRowHeightTolerance),this.edgeCaseMinRowHeight=t.edgeCaseMinRowHeight,this.edgeCaseMaxRowHeight=t.edgeCaseMaxRowHeight,this.widowLayoutStyle=t.widowLayoutStyle,this.isBreakoutRow=t.isBreakoutRow,this.items=[],this.height=0}).prototype={addItem:function(t){var e,i,o,a=this.items.concat(t),n=this.width-(a.length-1)*this.spacing,s=a.reduce((function(t,e){return t+e.aspectRatio}),0),r=n/this.targetRowHeight;return this.isBreakoutRow&&0===this.items.length&&t.aspectRatio>=1?(this.items.push(t),this.completeLayout(n/t.aspectRatio,"justify"),!0):s<this.minAspectRatio?(this.items.push(Object.assign({},t)),!0):s>this.maxAspectRatio?0===this.items.length?(this.items.push(Object.assign({},t)),this.completeLayout(n/s,"justify"),!0):(e=this.width-(this.items.length-1)*this.spacing,i=this.items.reduce((function(t,e){return t+e.aspectRatio}),0),o=e/this.targetRowHeight,Math.abs(s-r)>Math.abs(i-o)?(this.completeLayout(e/i,"justify"),!1):(this.items.push(Object.assign({},t)),this.completeLayout(n/s,"justify"),!0)):(this.items.push(Object.assign({},t)),this.completeLayout(n/s,"justify"),!0)},isLayoutComplete:function(){return this.height>0},completeLayout:function(t,e){var i,o,a,n,s,r=this.left,h=this.width-(this.items.length-1)*this.spacing;(void 0===e||["justify","center","left"].indexOf(e)<0)&&(e="left"),t!==(o=Math.max(this.edgeCaseMinRowHeight,Math.min(t,this.edgeCaseMaxRowHeight)))?(this.height=o,i=h/o/(h/t)):(this.height=t,i=1),this.items.forEach((function(t){t.top=this.top,t.width=t.aspectRatio*this.height*i,t.height=this.height,t.left=r,r+=t.width+this.spacing}),this),"justify"===e?(r-=this.spacing+this.left,a=(r-this.width)/this.items.length,n=this.items.map((function(t,e){return Math.round((e+1)*a)})),1===this.items.length?this.items[0].width-=Math.round(a):this.items.forEach((function(t,e){e>0?(t.left-=n[e-1],t.width-=n[e]-n[e-1]):t.width-=n[e]}))):"center"===e&&(s=(this.width-r)/2,this.items.forEach((function(t){t.left+=s+this.spacing}),this))},forceComplete:function(t,e){"number"==typeof e?this.completeLayout(e,this.widowLayoutStyle):this.completeLayout(this.targetRowHeight,this.widowLayoutStyle)},getItems:function(){return this.items}};var g=l.exports;
/*!
   * Copyright 2019 SmugMug, Inc.
   * Licensed under the terms of the MIT license. Please see LICENSE file in the project root for terms.
   * @license
   */function u(t,e){var i;return!1!==t.fullWidthBreakoutRowCadence&&(e._rows.length+1)%t.fullWidthBreakoutRowCadence==0&&(i=!0),new g({top:e._containerHeight,left:t.containerPadding.left,width:t.containerWidth-t.containerPadding.left-t.containerPadding.right,spacing:t.boxSpacing.horizontal,targetRowHeight:t.targetRowHeight,targetRowHeightTolerance:t.targetRowHeightTolerance,edgeCaseMinRowHeight:.5*t.targetRowHeight,edgeCaseMaxRowHeight:2*t.targetRowHeight,rightToLeft:!1,isBreakoutRow:i,widowLayoutStyle:t.widowLayoutStyle})}function d(t,e,i){return e._rows.push(i),e._layoutItems=e._layoutItems.concat(i.getItems()),e._containerHeight+=i.height+t.boxSpacing.vertical,i.items}const p=c((function(t,e){var i={},o={},a={containerWidth:1060,containerPadding:10,boxSpacing:10,targetRowHeight:320,targetRowHeightTolerance:.25,maxNumRows:Number.POSITIVE_INFINITY,forceAspectRatio:!1,showWidows:!0,fullWidthBreakoutRowCadence:!1,widowLayoutStyle:"left"},n={},s={};return e=e||{},i=Object.assign(a,e),n.top=isNaN(parseFloat(i.containerPadding.top))?i.containerPadding:i.containerPadding.top,n.right=isNaN(parseFloat(i.containerPadding.right))?i.containerPadding:i.containerPadding.right,n.bottom=isNaN(parseFloat(i.containerPadding.bottom))?i.containerPadding:i.containerPadding.bottom,n.left=isNaN(parseFloat(i.containerPadding.left))?i.containerPadding:i.containerPadding.left,s.horizontal=isNaN(parseFloat(i.boxSpacing.horizontal))?i.boxSpacing:i.boxSpacing.horizontal,s.vertical=isNaN(parseFloat(i.boxSpacing.vertical))?i.boxSpacing:i.boxSpacing.vertical,i.containerPadding=n,i.boxSpacing=s,o._layoutItems=[],o._awakeItems=[],o._inViewportItems=[],o._leadingOrphans=[],o._trailingOrphans=[],o._containerHeight=i.containerPadding.top,o._rows=[],o._orphans=[],i._widowCount=0,function(t,e,i){var o,a,n,s=[];return t.forceAspectRatio&&i.forEach((function(e){e.forcedAspectRatio=!0,e.aspectRatio=t.forceAspectRatio})),i.some((function(i,n){if(isNaN(i.aspectRatio))throw new Error("Item "+n+" has an invalid aspect ratio");if(a||(a=u(t,e)),o=a.addItem(i),a.isLayoutComplete()){if(s=s.concat(d(t,e,a)),e._rows.length>=t.maxNumRows)return a=null,!0;if(a=u(t,e),!o&&(o=a.addItem(i),a.isLayoutComplete())){if(s=s.concat(d(t,e,a)),e._rows.length>=t.maxNumRows)return a=null,!0;a=u(t,e)}}})),a&&a.getItems().length&&t.showWidows&&(e._rows.length?(n=e._rows[e._rows.length-1].isBreakoutRow?e._rows[e._rows.length-1].targetRowHeight:e._rows[e._rows.length-1].height,a.forceComplete(!1,n)):a.forceComplete(!1),s=s.concat(d(t,e,a)),t._widowCount=a.getItems().length),e._containerHeight=e._containerHeight-t.boxSpacing.vertical,e._containerHeight=e._containerHeight+t.containerPadding.bottom,{containerHeight:e._containerHeight,widowCount:t._widowCount,boxes:e._layoutItems}}(i,o,t.map((function(t){return t.width&&t.height?{aspectRatio:t.width/t.height}:{aspectRatio:t}})))}));var f;return t.defineComponent((f=h({},{name:"Vue3JustifiedLayout"}),i(f,o({__name:"JustifiedLayout",props:t.mergeModels({options:{type:Object,default:()=>{}}},{list:{type:Array,default:[]},listModifiers:{}}),emits:["update:list"],setup(e){const i=e,o=t.useModel(e,"list"),a=t.computed((()=>{if(0===t.unref(o).length)return;const e=h({containerWidth:t.unref(r)},i.options);return p(t.unref(o),e)})),n=t.computed((()=>{var e;if(t.unref(a))return null==(e=a.value)?void 0:e.boxes.map(((t,e)=>({item:o.value[e]?o.value[e]:{},style:{height:`${t.height}px`,width:`${t.width}px`,top:`${t.top}px`,left:`${t.left}px`,position:"absolute"}})))})),s=t.computed((()=>{var e;return t.unref(a)?{position:"relative",height:`${null==(e=a.value)?void 0:e.containerHeight}px`}:{}})),r=t.ref(0),c=t.ref();return t.onMounted((()=>{var t;r.value=null==(t=c.value)?void 0:t.clientWidth})),(e,i)=>(t.openBlock(),t.createElementBlock("div",{class:"jl-container relative wh-full max-w-100% transition-all transition-ease",ref_key:"layoutRef",ref:c,style:t.normalizeStyle(t.unref(s))},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(t.unref(n),((i,o)=>(t.openBlock(),t.createElementBlock("div",{class:"jl-item max-w-100%",key:o,style:t.normalizeStyle(i.style)},[t.renderSlot(e.$slots,"default",{item:i.item,style:t.normalizeStyle(i.style),index:o})],4)))),128))],4))}}))))}));