maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
1 lines • 4.6 kB
JavaScript
import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.ChmETRGw.js";import{n as directive}from"./vLazyImg.CXViJbU1.js";import{n as directive$1}from"./vFullscreenImg.C03MSd5c.js";import{Fragment,computed,createCommentVNode,createElementBlock,createElementVNode,createVNode,defineComponent,normalizeClass,normalizeStyle,onBeforeMount,openBlock,renderList,toDisplayString,unref,withDirectives}from"vue";import{MazNoImage}from"@maz-ui/icons/lazy/MazNoImage";import '../assets/MazGallery.DMolLXB6.css';var _hoisted_1={class:`m-gallery__wrapper maz-flex maz-flex-1`};var _hoisted_2=[`alt`];var _hoisted_3={key:0,class:`m-gallery__remaining-layer`};var MazGallery_default=_plugin_vue_export_helper_default(defineComponent({__name:`MazGallery`,props:{images:{default:()=>[]},displayedCount:{default:5},remaining:{type:Boolean,default:!0},height:{type:[Number,String,Boolean],default:`100%`},width:{type:[Number,String,Boolean],default:`100%`},radius:{type:Boolean,default:!0},zoom:{type:Boolean,default:!0},hasEmptyLayer:{type:Boolean,default:!0},lazy:{type:Boolean,default:!0},blur:{type:Boolean,default:!0},scale:{type:Boolean,default:!0},separatorColor:{default:`transparent`},backgroundColor:{default:()=>void 0}},setup(__props){onBeforeMount(()=>{__props.displayedCount>5&&console.warn(`[MazUI](m-gallery) The maximum of "displayed-count" is 5`)});let sizeStyle=computed(()=>({...__props.width===!1?{}:{flex:`0 0 ${typeof __props.width}`==`number`?`${__props.width}px`:__props.width,width:typeof __props.width==`number`?`${__props.width}px`:__props.width},...__props.height===!1?{}:{height:typeof __props.height==`number`?`${__props.height}px`:`${__props.height}`,minHeight:typeof __props.height==`number`?`${__props.height}px`:`${__props.height}`}}));let imagesCount=computed(()=>__props.displayedCount<=5?__props.displayedCount:5);let numberImagesRemaining=computed(()=>__props.images.length-(__props.images.length<imagesCount.value?__props.images.length:imagesCount.value));let imagesNormalized=computed(()=>__props.images.map(image=>typeof image==`object`?{...image,thumbnail:image.thumbnail??image.src}:{src:image,thumbnail:image,alt:void 0}));let imagesShown=computed(()=>imagesNormalized.value.slice(0,imagesCount.value));let imagesHidden=computed(()=>imagesNormalized.value.slice(imagesCount.value,__props.images.length));function shouldHaveRemainingLayer(index){return __props.remaining?(numberImagesRemaining.value&&index+1)===imagesShown.value.length:!1}return(_ctx,_cache)=>__props.images.length>0||__props.hasEmptyLayer?(openBlock(),createElementBlock(`div`,{key:0,class:normalizeClass([`m-gallery m-reset-css`,{"--radius":__props.radius,"--has-background-color":!!__props.backgroundColor}]),style:normalizeStyle([sizeStyle.value,{"--gallery-separator-color":__props.separatorColor,"--gallery-background-color":__props.backgroundColor}])},[createElementVNode(`section`,_hoisted_1,[(openBlock(!0),createElementBlock(Fragment,null,renderList(imagesShown.value,(image,i)=>(openBlock(),createElementBlock(`figure`,{key:i,class:normalizeClass([`m-gallery__item !maz-my-0 maz-flex maz-flex-center`,[`m-gallery__item--${i+1}`]])},[withDirectives(createElementVNode(`img`,{class:`m-gallery__item__image maz-flex-1`,src:`data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7`,alt:image.alt,loading:`lazy`},null,8,_hoisted_2),[[unref(directive),{src:image.thumbnail,disabled:!__props.lazy},`bg-image`],[unref(directive$1),{src:image.src,alt:image.alt,disabled:!__props.zoom||shouldHaveRemainingLayer(i),blurOnHover:__props.blur,scaleOnHover:__props.scale}]]),shouldHaveRemainingLayer(i)?withDirectives((openBlock(),createElementBlock(`div`,_hoisted_3,[createElementVNode(`span`,null,`+`+toDisplayString(numberImagesRemaining.value),1)])),[[unref(directive$1),{src:image.src,alt:image.alt,disabled:!__props.zoom,blurOnHover:!1,scaleOnHover:__props.scale}]]):createCommentVNode(``,!0)],2))),128)),__props.hasEmptyLayer&&__props.images.length===0?(openBlock(),createElementBlock(`div`,{key:0,class:normalizeClass([`m-gallery__empty-layer`,{"maz-rounded-xl":__props.radius}]),style:normalizeStyle([sizeStyle.value])},[createVNode(unref(MazNoImage),{class:`maz-size-8`})],6)):createCommentVNode(``,!0)]),(openBlock(!0),createElementBlock(Fragment,null,renderList(imagesHidden.value,(image,i)=>withDirectives((openBlock(),createElementBlock(`div`,{key:i,class:`m-gallery__hidden`})),[[unref(directive$1),{src:image.src,disabled:!__props.zoom}]])),128))],6)):createCommentVNode(``,!0)}}),[[`__scopeId`,`data-v-11cd1618`]]);export{MazGallery_default as t};