lumosaic 1.1.4

package/README.md

@@ -0,0 +1,212 @@
+# Lumosaic
+
+**Adaptive, data-driven image and video mosaic gallery for Vue 3 and Nuxt 4**
+
+Lumosaic is a lightweight Vue 3 component that automatically arranges photos of any orientation into perfectly aligned rows spanning the full screen width. It intelligently calculates image dimensions and creates a beautiful, responsive gallery layout without relying on external CSS frameworks.
+
+![Preview](https://github.com/volkar/lumosaic/blob/main/preview.jpg?raw=true)
+
+## Live demo
+
+See it in action: [lumosaic.syntheticsymbiosis.com](https://lumosaic.syntheticsymbiosis.com)
+
+## Features
+
+-   **Vue 3 & Nuxt 4 Ready** - Native component for modern reactive applications.
+-   **Intelligent Layout** - Automatically arranges images into perfectly aligned rows.
+-   **Responsive Design** - Adapts to different screen sizes with customizable row heights.
+-   **Auto Dimension Detection** - Automatically retrieves image dimensions from image files (PNG, JPEG, WebP) if missing.
+-   **Event-Driven Architecture** - Emits clean events for seamless integration with lightboxes.
+-   **Highly Configurable** - Extensive props for customization.
+-   **Lightweight** - Clean TypeScript core, zero heavy dependencies.
+
+## Installation
+
+Install the package via npm:
+
+```bash
+npm install lumosaic
+```
+
+## Quick Start
+
+### Vue 3
+
+1. Import the global CSS in your main entry file (e.g., `main.ts`):
+
+```ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import 'lumosaic/dist/style.css' // Import styles
+
+createApp(App).mount('#app')
+```
+
+2. Use the component in your templates:
+
+```ts
+<template>
+  <Lumosaic :images="images" :gap="8" />
+</template>
+
+<script setup lang="ts">
+import { Lumosaic } from 'lumosaic'
+
+const images = [
+    { src: "[https://picsum.photos/800/600?random=1](https://picsum.photos/800/600?random=1)", width: 800, height: 600 },
+    { src: "[https://picsum.photos/600/800?random=2](https://picsum.photos/600/800?random=2)", width: 600, height: 800 },
+    { src: "[https://picsum.photos/800/800?random=3](https://picsum.photos/800/800?random=3)", width: 800, height: 800 }
+]
+</script>
+```
+
+### Nuxt 4
+
+Lumosaic comes with a built-in Nuxt module. Simply add it to your `nuxt.config.ts`. The module automatically registers the component and injects the CSS.
+
+```ts
+export default defineNuxtConfig({
+  modules: [
+    'lumosaic/nuxt'
+  ]
+})
+```
+
+Now you can use `<Lumosaic />` anywhere in your Nuxt app without manually importing it!
+
+## Props (Options)
+
+Customize the gallery by passing props to the `<Lumosaic>` component.
+
+### Row Height Props
+
+|Property   |Type   |Default   |Description   |
+|---|---|---|---|
+|`row-height-sm`   |Number   |`0.25`   |Height/width desired row ratio for mobile devices (screen width < 768px)   |
+|`row-height-md`   |Number   |`0.2`   |Height/width desired row ratio for medium devices (screen width >= 768px and < 1024px)   |
+|`row-height-xl`   |Number   |`0.18`   |Height/width desired row ratio for extra large devices (screen width >= 1024px)   |
+|`row-height`   |Number   |`undefined`   |Generic ratio for all screen sizes (overwrites SM, MD, and XL if provided)   |
+
+### Image Configuration
+
+|Property   |Type   |Default   |Description   |
+|---|---|---|---|
+|`should-retrieve-width-and-height`|Boolean|`false`|If `true`, automatically fetches dimensions from the file when missing|
+|`fallback-image-width`|Number|`1000`|Fallback width in pixels if dimensions cannot be retrieved|
+|`fallback-image-height`|Number|`1000`|Fallback height in pixels if dimensions cannot be retrieved|
+|`max-image-ratio`|Number|`1.6`|Maximum width/height ratio allowed for images|
+|`min-image-ratio`|Number|`0.65`|Minimum width/height ratio allowed for images|
+
+### Layout Props
+
+|Property   |Type   |Default   |Description   |
+|---|---|---|---|
+|`max-rows`|Number|`0`|Maximum number of rows to display. Set to `0` for no limit|
+|`stretch-last-row`|Boolean|`true`|Stretches the last row to fill the container|
+|`shuffle-images`|Boolean|`false`|Shuffles images randomly before rendering|
+|`gap`|Number|`4`|Gap in pixels between images (horizontal and vertical)|
+|`play-button-on-video-cover`|Boolean|`true`|Displays a play icon over video files|
+|`observe-window-width`|Boolean|`true`|Re-renders the gallery layout on window resize|
+
+## Events
+
+The component emits events that allow you to react to user interactions without tightly coupling logic.
+
+`@image-click`
+Fired when an image or video in the gallery is clicked.
+
+**Payload:**
+- `index` (Number): The global index of the clicked item in the `images` array.
+- `images` (Array): The complete array of image objects currently rendered.
+
+## Exposed Methods
+
+You can trigger internal core logic directly by assigning a Template Ref to the component.
+
+```ts
+<template>
+  <Lumosaic ref="myGallery" :images="images" />
+  <button @click="shuffleGallery">Shuffle!</button>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Lumosaic } from 'lumosaic'
+
+const myGallery = ref<InstanceType<typeof Lumosaic> | null>(null)
+
+function shuffleGallery() {
+  myGallery.value?.shuffle()
+}
+</script>
+```
+
+Available exposed methods:
+- `shuffle()`: Instantly shuffles the current grid layout.
+
+## Image Object Interface
+
+The `images` prop expects an array of objects.
+
+### Image Configuration
+
+|Prop   |Type   |Required   |Description   |
+|---|---|---|---|
+|`src`|String|`Yes`|Full-size image or video URL|
+|`preview`|String|`No`|Preview/thumbnail URL (defaults to `src` if omitted)|
+|`width`||`Recommended`|Image width in pixels|
+|`height`||`Recommended`|Image height in pixels|
+|`alt`|String|`No`|Alt text for accessibility|
+|`title`|String|`No`|Title attribute|
+|`exif`|Object|`No`|EXIF object that can be returned stringified with `@image-click` event|
+
+Example:
+
+```ts
+{
+    src: "[https://example.com/full-size.jpg](https://example.com/full-size.jpg)",
+    preview: "[https://example.com/preview.jpg](https://example.com/preview.jpg)",
+    width: 1920,
+    height: 1080,
+    alt: "Beautiful landscape"
+}
+```
+
+## Integration with Obsidium Lightbox
+
+Lumosaic is designed to work perfectly with lightboxes like [Obsidium](https://obsidium.syntheticsymbiosis.com). Since Lumosaic exposes the `@image-click` event, you can keep a single instance of your lightbox at the root of your application and feed data to it from multiple galleries.
+
+```ts
+<template>
+  <div>
+    <Lumosaic :images="vacationImages" @image-click="openLightbox" />
+
+    <Lumosaic :images="workImages" @image-click="openLightbox" />
+
+    <Obsidium ref="lightbox" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const lightbox = ref(null)
+const vacationImages = [ /* ... */ ]
+const workImages = [ /* ... */ ]
+
+// Handle the event emitted by Lumosaic
+function openLightbox(index: number, currentImages: any[]) {
+  // Pass the images and starting index to your lightbox
+  lightbox.value?.open(currentImages, index)
+}
+</script>
+```
+
+## License
+
+Released under the [MIT License](https://www.google.com/search?q=MIT%20LICENSE).
+
+## Links
+
+- [Documentation & Demo](https://lumosaic.syntheticsymbiosis.com/)
+- [GitHub Repository](https://github.com/volkar/lumosaic)

package/dist/components/Lumosaic.vue.d.ts

@@ -0,0 +1,46 @@
+import { LumosaicOptions, LumosaicImage } from './lumosaic';
+
+interface Props extends Partial<LumosaicOptions> {
+    images: Partial<LumosaicImage>[];
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, LumosaicOptions>>, {
+    shuffle: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "image-click": (index: number, images: Partial<LumosaicImage>[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, LumosaicOptions>>> & Readonly<{
+    "onImage-click"?: ((index: number, images: Partial<LumosaicImage>[]) => any) | undefined;
+}>, {
+    rowHeightSm: number;
+    rowHeightMd: number;
+    rowHeightXl: number;
+    shouldRetrieveWidthAndHeight: boolean;
+    fallbackImageWidth: number;
+    fallbackImageHeight: number;
+    maxImageRatio: number;
+    minImageRatio: number;
+    maxRows: number;
+    stretchLastRow: boolean;
+    shuffleImages: boolean;
+    gap: number;
+    playButtonOnVideoCover: boolean;
+    observeWindowWidth: boolean;
+    rowHeight: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/lumosaic.d.ts

@@ -0,0 +1,59 @@
+export interface LumosaicOptions {
+    rowHeightSm: number;
+    rowHeightMd: number;
+    rowHeightXl: number;
+    shouldRetrieveWidthAndHeight: boolean;
+    fallbackImageWidth: number;
+    fallbackImageHeight: number;
+    maxImageRatio: number;
+    minImageRatio: number;
+    maxRows: number;
+    stretchLastRow: boolean;
+    shuffleImages: boolean;
+    gap: number;
+    playButtonOnVideoCover: boolean;
+    observeWindowWidth: boolean;
+    rowHeight?: number;
+}
+export interface LumosaicImage {
+    src: string;
+    preview: string;
+    width: number;
+    height: number;
+    srcWidth?: number;
+    srcHeight?: number;
+    displayWidth?: number;
+    displayHeight?: number;
+    alt?: string;
+    title?: string;
+    exif?: any;
+}
+export interface LumosaicParams {
+    imagesSource: Partial<LumosaicImage>[];
+}
+export declare const defaultLumosaicOptions: LumosaicOptions;
+export declare class Lumosaic {
+    private options;
+    private params;
+    private gallery;
+    private images;
+    private lastRenderedScreenSize;
+    private resizeObserver;
+    private targetRowHeight;
+    constructor(galleryElement: HTMLElement, imagesSource: Partial<LumosaicImage>[]);
+    init(userConfig?: Partial<LumosaicOptions>): Promise<this | void>;
+    replaceImages(images: Partial<LumosaicImage>[]): void;
+    shuffleImages(): void;
+    updateOptions(newOptions: Partial<LumosaicOptions>): void;
+    destroy(): void;
+    private initResizeObserver;
+    private getObservedWidth;
+    private processParams;
+    private normalizeImageData;
+    private getImageSizeFromUrl;
+    private getUint24;
+    private computeRows;
+    private calculateRowLayout;
+    private renderGallery;
+    private mergeOptions;
+}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import { App } from 'vue';
+import { default as Lumosaic } from './components/Lumosaic.vue';
+
+export { Lumosaic };
+declare const _default: {
+    install: (app: App) => void;
+};
+export default _default;

package/dist/lumosaic.cjs.js

@@ -0,0 +1 @@
+"use strict";var b=Object.defineProperty;var W=(g,t,e)=>t in g?b(g,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):g[t]=e;var f=(g,t,e)=>W(g,typeof t!="symbol"?t+"":t,e);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("vue"),v={rowHeightSm:.25,rowHeightMd:.2,rowHeightXl:.18,shouldRetrieveWidthAndHeight:!1,fallbackImageWidth:1e3,fallbackImageHeight:1e3,maxImageRatio:1.6,minImageRatio:.65,maxRows:0,stretchLastRow:!0,shuffleImages:!1,gap:4,playButtonOnVideoCover:!0,observeWindowWidth:!0};class H{constructor(t,e){f(this,"options");f(this,"params");f(this,"gallery");f(this,"images",[]);f(this,"lastRenderedScreenSize",null);f(this,"resizeObserver",null);f(this,"targetRowHeight",0);this.options={...v},this.params={imagesSource:e},this.gallery=t}async init(t={}){return console.log(t),this.mergeOptions(t),this.gallery.classList.add("lumosaic-loading"),await this.processParams(),this.options.shuffleImages?this.shuffleImages():this.renderGallery(),this.lastRenderedScreenSize=this.getObservedWidth(),this.gallery.classList.remove("lumosaic-loading"),this.initResizeObserver(),this}replaceImages(t){this.params.imagesSource=t,this.processParams().then(()=>this.renderGallery())}shuffleImages(){this.images.sort(()=>Math.random()-.5),this.renderGallery()}updateOptions(t){this.mergeOptions(t),this.renderGallery()}destroy(){this.resizeObserver&&this.resizeObserver.disconnect()}initResizeObserver(){this.resizeObserver=new ResizeObserver(()=>{const t=this.getObservedWidth();t&&this.lastRenderedScreenSize!==t&&(this.renderGallery(),this.lastRenderedScreenSize=t)}),this.options.observeWindowWidth?this.resizeObserver.observe(document.body):this.gallery&&this.resizeObserver.observe(this.gallery)}getObservedWidth(){let t=0;return this.options.observeWindowWidth?t=window.innerWidth:this.gallery&&(t=this.gallery.offsetWidth),t&&t>=1024?"xl":t&&t>=768&&t<1024?"md":t&&t<768?"sm":!1}async processParams(){const t=this.params.imagesSource.map(e=>this.normalizeImageData({...e}));this.images=await Promise.all(t)}async normalizeImageData(t){t.src&&!t.preview&&(t.preview=t.src),t.preview&&!t.src&&(t.src=t.preview);const e=t;if(e.src||(e.src=""),e.preview||(e.preview=""),!e.width||!e.height)if(this.options.shouldRetrieveWidthAndHeight&&e.src)try{const o=await this.getImageSizeFromUrl(e.src);e.width=o.width,e.height=o.height}catch(o){console.warn(`Lumosaic: Could not fetch size for ${e.src}`,o),e.width=0,e.height=0}else e.width=0,e.height=0;return e.srcWidth=e.width,e.srcHeight=e.height,e}async getImageSizeFromUrl(t){const e={PNG:2303741511,PNG_END:218765834,JPEG_START:65496,WEBP_RIFF:1380533830,WEBP_WEBP:1464156752,VP8:1448097824,VP8L:1448097868,VP8X:1448097880},o=await fetch(t,{headers:{Range:"bytes=0-65535"}});if(!o.ok)throw new Error(`Failed to fetch: ${o.status}`);const a=await o.arrayBuffer(),s=new DataView(a);if(s.getUint32(0)===e.PNG&&s.getUint32(4)===e.PNG_END)return{width:s.getUint32(16),height:s.getUint32(20),type:"png"};if(s.getUint16(0)===e.JPEG_START){let i=2;for(;i<s.byteLength&&s.getUint8(i)===255;){const r=s.getUint8(i+1),n=s.getUint16(i+2);if(r>=192&&r<=207&&![196,200,204].includes(r))return{height:s.getUint16(i+5),width:s.getUint16(i+7),type:"jpeg"};i+=2+n}}if(s.getUint32(0,!1)===e.WEBP_RIFF&&s.getUint32(8,!1)===e.WEBP_WEBP){let i=12;for(;i<s.byteLength;){const r=s.getUint32(i,!1),n=s.getUint32(i+4,!0);if(r===e.VP8){const h=i+10;return{width:s.getUint16(h+6,!0)&16383,height:s.getUint16(h+8,!0)&16383,type:"webp"}}else if(r===e.VP8L){const h=s.getUint8(i+8),l=s.getUint8(i+9),c=s.getUint8(i+10),w=s.getUint8(i+11),u=1+((l&63)<<8|h),d=1+((w&15)<<10|c<<2|(l&192)>>6);return{width:u,height:d,type:"webp"}}else if(r===e.VP8X){const h=1+this.getUint24(s,i+12,!0),l=1+this.getUint24(s,i+15,!0);return{width:h,height:l,type:"webp"}}i+=8+n+n%2}}return{width:0,height:0,type:"unknown"}}getUint24(t,e,o){return o?t.getUint8(e)|t.getUint8(e+1)<<8|t.getUint8(e+2)<<16:t.getUint8(e)<<16|t.getUint8(e+1)<<8|t.getUint8(e+2)}computeRows(t,e){const o=[];let a=[],s=0;for(const i of t){const n=(i.height>0?i.width/i.height:1)*this.targetRowHeight,h=s+n+a.length*this.options.gap;if(a.length===0||h<e)a.push(i),s+=n;else if(h>e&&h-e<e-s)a.push(i),s+=n;else{if(a.length>0&&(o.push([...a]),this.options.maxRows&&o.length>=this.options.maxRows)){a=[];break}a=[i],s=n}}if(a.length>0)if(this.options.stretchLastRow===!0)if(a.length===1)if(o.length>0){const i=o[o.length-1],r=a[0];i&&r&&i.push(r)}else o.push(a);else if(a.length===2)if(o.length>1){const i=o[o.length-1],r=o[o.length-2],n=a[0],h=a[1];if(i&&r&&n&&h){const l=i.shift();l&&r.push(l),i.push(n,h)}}else o.push(a);else o.push([...a]);else o.push(a);return o}calculateRowLayout(t,e,o=!1){const a=(t.length-1)*this.options.gap,s=e-a,i=t.reduce((n,h)=>n+h.width/h.height,0);let r=s/i;if(o===!0&&this.options.stretchLastRow===!0){if(r>this.targetRowHeight){const n=r/this.targetRowHeight;t=t.map(h=>({...h,width:h.width*n,height:h.height})),r=this.targetRowHeight}}else o===!0&&this.options.stretchLastRow===!1&&r>this.targetRowHeight&&(r=this.targetRowHeight);return t.map(n=>({...n,displayWidth:n.width/n.height*r,displayHeight:r}))}renderGallery(){if(!this.gallery)return;this.images.forEach(s=>{let i=s.srcWidth||0,r=s.srcHeight||0;i===0&&(i=this.options.fallbackImageWidth),r===0&&(r=this.options.fallbackImageHeight),i/r>this.options.maxImageRatio?i=this.options.maxImageRatio*r:i/r<this.options.minImageRatio&&(i=this.options.minImageRatio*r),s.width=i,s.height=r});const t=this.getObservedWidth(),e=this.gallery.offsetWidth;t==="xl"?this.targetRowHeight=this.options.rowHeightXl*e:t==="md"?this.targetRowHeight=this.options.rowHeightMd*e:this.targetRowHeight=this.options.rowHeightSm*e,this.lastRenderedScreenSize=t;const o=this.computeRows(this.images,e),a=document.createDocumentFragment();o.forEach((s,i)=>{const r=i===o.length-1,n=this.calculateRowLayout(s,e,r),h=document.createElement("div");h.className="lumosaic-row",n[0]&&n[0].displayHeight&&(h.style.aspectRatio=(e/n[0].displayHeight).toString()),n.forEach(l=>{const c=document.createElement("div");c.className="lumosaic-item";const u=(l.displayWidth||0)/e*100;c.style.flexBasis=`${u}%`,c.style.flexGrow="0",c.style.flexShrink="1",n.indexOf(l)<n.length-1&&(c.style.marginRight=`${this.options.gap}px`);const d=document.createElement("img");if(d.src=l.preview,l.alt&&(d.alt=l.alt),d.loading="lazy",l.src&&(d.dataset.src=l.src),l.title&&(d.title=l.title),l.exif&&(d.dataset.exif=JSON.stringify(l.exif)),this.options.playButtonOnVideoCover){const m=l.src.toLowerCase();if(m.endsWith(".mp4")||m.endsWith(".webm")||m.endsWith(".mov")||m.endsWith(".avi")||m.endsWith(".wmv")){const y=document.createElement("div");y.className="lumosaic-play-icon",y.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m10.775 15.475l4.6-3.05q.225-.15.225-.425t-.225-.425l-4.6-3.05q-.25-.175-.513-.038T10 8.926v6.15q0 .3.263.438t.512-.038M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12q0-.8.125-1.6T2.5 8.825q.125-.4.513-.537t.737.062q.375.2.538.588t.037.812q-.15.55-.238 1.113T4 12q0 3.35 2.325 5.675T12 20t5.675-2.325T20 12t-2.325-5.675T12 4q-.6 0-1.187.087T9.65 4.35q-.425.125-.8-.025T8.3 3.8t-.013-.762t.563-.513q.75-.275 1.55-.4T12 2q2.075 0 3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22M5.5 7q-.625 0-1.062-.437T4 5.5t.438-1.062T5.5 4t1.063.438T7 5.5t-.437 1.063T5.5 7m6.5 5"/></svg>',c.appendChild(y)}}c.appendChild(d),h.appendChild(c)}),i<o.length-1&&(h.style.marginBottom=`${this.options.gap}px`),a.appendChild(h)}),this.gallery.innerHTML="",this.gallery.appendChild(a)}mergeOptions(t){const e={...t};e.rowHeight!==void 0&&(e.rowHeightSm=e.rowHeight,e.rowHeightMd=e.rowHeight,e.rowHeightXl=e.rowHeight,delete e.rowHeight),Object.keys(e).forEach(o=>{const a=o;e[a]===void 0&&delete e[a]}),this.options={...this.options,...e}}}const R=p.defineComponent({__name:"Lumosaic",props:p.mergeDefaults({images:{},rowHeightSm:{},rowHeightMd:{},rowHeightXl:{},shouldRetrieveWidthAndHeight:{type:Boolean},fallbackImageWidth:{},fallbackImageHeight:{},maxImageRatio:{},minImageRatio:{},maxRows:{},stretchLastRow:{type:Boolean},shuffleImages:{type:Boolean},gap:{},playButtonOnVideoCover:{type:Boolean},observeWindowWidth:{type:Boolean},rowHeight:{}},v),emits:["image-click"],setup(g,{expose:t,emit:e}){const o=g,a=e,s=p.ref(null);let i=null;return p.onMounted(()=>{if(!s.value)return;const{images:r,...n}=o;i=new H(s.value,r),s.value.addEventListener("click",h=>{const c=h.target.closest(".lumosaic-item");if(c&&s.value){const u=Array.from(s.value.querySelectorAll(".lumosaic-item")).indexOf(c);u!==-1&&a("image-click",u,o.images)}}),i.init(n)}),p.onBeforeUnmount(()=>{i&&(i.destroy(),i=null)}),p.watch(()=>o.images,r=>{i&&i.replaceImages(r)},{deep:!0}),p.watch(()=>{const{images:r,...n}=o;return n},r=>{i&&i.updateOptions(r)},{deep:!0}),t({shuffle:()=>{i&&i.shuffleImages()}}),(r,n)=>(p.openBlock(),p.createElementBlock("div",{ref_key:"galleryContainer",ref:s,class:"lumosaic-wrapper"},null,512))}}),I={install:g=>{g.component("Lumosaic",R)}};exports.Lumosaic=R;exports.default=I;

package/dist/lumosaic.es.js

@@ -0,0 +1,300 @@
+var v = Object.defineProperty;
+var b = (g, e, t) => e in g ? v(g, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : g[e] = t;
+var p = (g, e, t) => b(g, typeof e != "symbol" ? e + "" : e, t);
+import { defineComponent as W, ref as H, onMounted as I, onBeforeUnmount as U, watch as y, openBlock as O, createElementBlock as x, mergeDefaults as L } from "vue";
+const R = {
+  rowHeightSm: 0.25,
+  rowHeightMd: 0.2,
+  rowHeightXl: 0.18,
+  shouldRetrieveWidthAndHeight: !1,
+  fallbackImageWidth: 1e3,
+  fallbackImageHeight: 1e3,
+  maxImageRatio: 1.6,
+  minImageRatio: 0.65,
+  maxRows: 0,
+  stretchLastRow: !0,
+  shuffleImages: !1,
+  gap: 4,
+  playButtonOnVideoCover: !0,
+  observeWindowWidth: !0
+};
+class S {
+  constructor(e, t) {
+    p(this, "options");
+    p(this, "params");
+    p(this, "gallery");
+    p(this, "images", []);
+    p(this, "lastRenderedScreenSize", null);
+    p(this, "resizeObserver", null);
+    p(this, "targetRowHeight", 0);
+    this.options = { ...R }, this.params = { imagesSource: t }, this.gallery = e;
+  }
+  // --- Public functions ---
+  async init(e = {}) {
+    return console.log(e), this.mergeOptions(e), this.gallery.classList.add("lumosaic-loading"), await this.processParams(), this.options.shuffleImages ? this.shuffleImages() : this.renderGallery(), this.lastRenderedScreenSize = this.getObservedWidth(), this.gallery.classList.remove("lumosaic-loading"), this.initResizeObserver(), this;
+  }
+  replaceImages(e) {
+    this.params.imagesSource = e, this.processParams().then(() => this.renderGallery());
+  }
+  shuffleImages() {
+    this.images.sort(() => Math.random() - 0.5), this.renderGallery();
+  }
+  updateOptions(e) {
+    this.mergeOptions(e), this.renderGallery();
+  }
+  destroy() {
+    this.resizeObserver && this.resizeObserver.disconnect();
+  }
+  // --- Private functions ---
+  initResizeObserver() {
+    this.resizeObserver = new ResizeObserver(() => {
+      const e = this.getObservedWidth();
+      e && this.lastRenderedScreenSize !== e && (this.renderGallery(), this.lastRenderedScreenSize = e);
+    }), this.options.observeWindowWidth ? this.resizeObserver.observe(document.body) : this.gallery && this.resizeObserver.observe(this.gallery);
+  }
+  getObservedWidth() {
+    let e = 0;
+    return this.options.observeWindowWidth ? e = window.innerWidth : this.gallery && (e = this.gallery.offsetWidth), e && e >= 1024 ? "xl" : e && e >= 768 && e < 1024 ? "md" : e && e < 768 ? "sm" : !1;
+  }
+  async processParams() {
+    const e = this.params.imagesSource.map((t) => this.normalizeImageData({ ...t }));
+    this.images = await Promise.all(e);
+  }
+  async normalizeImageData(e) {
+    e.src && !e.preview && (e.preview = e.src), e.preview && !e.src && (e.src = e.preview);
+    const t = e;
+    if (t.src || (t.src = ""), t.preview || (t.preview = ""), !t.width || !t.height)
+      if (this.options.shouldRetrieveWidthAndHeight && t.src)
+        try {
+          const o = await this.getImageSizeFromUrl(t.src);
+          t.width = o.width, t.height = o.height;
+        } catch (o) {
+          console.warn(`Lumosaic: Could not fetch size for ${t.src}`, o), t.width = 0, t.height = 0;
+        }
+      else
+        t.width = 0, t.height = 0;
+    return t.srcWidth = t.width, t.srcHeight = t.height, t;
+  }
+  async getImageSizeFromUrl(e) {
+    const t = {
+      PNG: 2303741511,
+      PNG_END: 218765834,
+      JPEG_START: 65496,
+      WEBP_RIFF: 1380533830,
+      WEBP_WEBP: 1464156752,
+      VP8: 1448097824,
+      VP8L: 1448097868,
+      VP8X: 1448097880
+    }, o = await fetch(e, { headers: { Range: "bytes=0-65535" } });
+    if (!o.ok) throw new Error(`Failed to fetch: ${o.status}`);
+    const a = await o.arrayBuffer(), s = new DataView(a);
+    if (s.getUint32(0) === t.PNG && s.getUint32(4) === t.PNG_END)
+      return {
+        width: s.getUint32(16),
+        height: s.getUint32(20),
+        type: "png"
+      };
+    if (s.getUint16(0) === t.JPEG_START) {
+      let i = 2;
+      for (; i < s.byteLength && s.getUint8(i) === 255; ) {
+        const r = s.getUint8(i + 1), n = s.getUint16(i + 2);
+        if (r >= 192 && r <= 207 && ![196, 200, 204].includes(r))
+          return {
+            height: s.getUint16(i + 5),
+            width: s.getUint16(i + 7),
+            type: "jpeg"
+          };
+        i += 2 + n;
+      }
+    }
+    if (s.getUint32(0, !1) === t.WEBP_RIFF && s.getUint32(8, !1) === t.WEBP_WEBP) {
+      let i = 12;
+      for (; i < s.byteLength; ) {
+        const r = s.getUint32(i, !1), n = s.getUint32(i + 4, !0);
+        if (r === t.VP8) {
+          const h = i + 10;
+          return {
+            width: s.getUint16(h + 6, !0) & 16383,
+            height: s.getUint16(h + 8, !0) & 16383,
+            type: "webp"
+          };
+        } else if (r === t.VP8L) {
+          const h = s.getUint8(i + 8), l = s.getUint8(i + 9), c = s.getUint8(i + 10), u = s.getUint8(i + 11), f = 1 + ((l & 63) << 8 | h), d = 1 + ((u & 15) << 10 | c << 2 | (l & 192) >> 6);
+          return { width: f, height: d, type: "webp" };
+        } else if (r === t.VP8X) {
+          const h = 1 + this.getUint24(s, i + 12, !0), l = 1 + this.getUint24(s, i + 15, !0);
+          return { width: h, height: l, type: "webp" };
+        }
+        i += 8 + n + n % 2;
+      }
+    }
+    return { width: 0, height: 0, type: "unknown" };
+  }
+  getUint24(e, t, o) {
+    return o ? e.getUint8(t) | e.getUint8(t + 1) << 8 | e.getUint8(t + 2) << 16 : e.getUint8(t) << 16 | e.getUint8(t + 1) << 8 | e.getUint8(t + 2);
+  }
+  computeRows(e, t) {
+    const o = [];
+    let a = [], s = 0;
+    for (const i of e) {
+      const n = (i.height > 0 ? i.width / i.height : 1) * this.targetRowHeight, h = s + n + a.length * this.options.gap;
+      if (a.length === 0 || h < t)
+        a.push(i), s += n;
+      else if (h > t && h - t < t - s)
+        a.push(i), s += n;
+      else {
+        if (a.length > 0 && (o.push([...a]), this.options.maxRows && o.length >= this.options.maxRows)) {
+          a = [];
+          break;
+        }
+        a = [i], s = n;
+      }
+    }
+    if (a.length > 0)
+      if (this.options.stretchLastRow === !0)
+        if (a.length === 1)
+          if (o.length > 0) {
+            const i = o[o.length - 1], r = a[0];
+            i && r && i.push(r);
+          } else
+            o.push(a);
+        else if (a.length === 2)
+          if (o.length > 1) {
+            const i = o[o.length - 1], r = o[o.length - 2], n = a[0], h = a[1];
+            if (i && r && n && h) {
+              const l = i.shift();
+              l && r.push(l), i.push(n, h);
+            }
+          } else
+            o.push(a);
+        else
+          o.push([...a]);
+      else
+        o.push(a);
+    return o;
+  }
+  calculateRowLayout(e, t, o = !1) {
+    const a = (e.length - 1) * this.options.gap, s = t - a, i = e.reduce((n, h) => n + h.width / h.height, 0);
+    let r = s / i;
+    if (o === !0 && this.options.stretchLastRow === !0) {
+      if (r > this.targetRowHeight) {
+        const n = r / this.targetRowHeight;
+        e = e.map((h) => ({
+          ...h,
+          width: h.width * n,
+          height: h.height
+        })), r = this.targetRowHeight;
+      }
+    } else o === !0 && this.options.stretchLastRow === !1 && r > this.targetRowHeight && (r = this.targetRowHeight);
+    return e.map((n) => ({
+      ...n,
+      displayWidth: n.width / n.height * r,
+      displayHeight: r
+    }));
+  }
+  renderGallery() {
+    if (!this.gallery) return;
+    this.images.forEach((s) => {
+      let i = s.srcWidth || 0, r = s.srcHeight || 0;
+      i === 0 && (i = this.options.fallbackImageWidth), r === 0 && (r = this.options.fallbackImageHeight), i / r > this.options.maxImageRatio ? i = this.options.maxImageRatio * r : i / r < this.options.minImageRatio && (i = this.options.minImageRatio * r), s.width = i, s.height = r;
+    });
+    const e = this.getObservedWidth(), t = this.gallery.offsetWidth;
+    e === "xl" ? this.targetRowHeight = this.options.rowHeightXl * t : e === "md" ? this.targetRowHeight = this.options.rowHeightMd * t : this.targetRowHeight = this.options.rowHeightSm * t, this.lastRenderedScreenSize = e;
+    const o = this.computeRows(this.images, t), a = document.createDocumentFragment();
+    o.forEach((s, i) => {
+      const r = i === o.length - 1, n = this.calculateRowLayout(s, t, r), h = document.createElement("div");
+      h.className = "lumosaic-row", n[0] && n[0].displayHeight && (h.style.aspectRatio = (t / n[0].displayHeight).toString()), n.forEach((l) => {
+        const c = document.createElement("div");
+        c.className = "lumosaic-item";
+        const f = (l.displayWidth || 0) / t * 100;
+        c.style.flexBasis = `${f}%`, c.style.flexGrow = "0", c.style.flexShrink = "1", n.indexOf(l) < n.length - 1 && (c.style.marginRight = `${this.options.gap}px`);
+        const d = document.createElement("img");
+        if (d.src = l.preview, l.alt && (d.alt = l.alt), d.loading = "lazy", l.src && (d.dataset.src = l.src), l.title && (d.title = l.title), l.exif && (d.dataset.exif = JSON.stringify(l.exif)), this.options.playButtonOnVideoCover) {
+          const m = l.src.toLowerCase();
+          if (m.endsWith(".mp4") || m.endsWith(".webm") || m.endsWith(".mov") || m.endsWith(".avi") || m.endsWith(".wmv")) {
+            const w = document.createElement("div");
+            w.className = "lumosaic-play-icon", w.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m10.775 15.475l4.6-3.05q.225-.15.225-.425t-.225-.425l-4.6-3.05q-.25-.175-.513-.038T10 8.926v6.15q0 .3.263.438t.512-.038M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12q0-.8.125-1.6T2.5 8.825q.125-.4.513-.537t.737.062q.375.2.538.588t.037.812q-.15.55-.238 1.113T4 12q0 3.35 2.325 5.675T12 20t5.675-2.325T20 12t-2.325-5.675T12 4q-.6 0-1.187.087T9.65 4.35q-.425.125-.8-.025T8.3 3.8t-.013-.762t.563-.513q.75-.275 1.55-.4T12 2q2.075 0 3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22M5.5 7q-.625 0-1.062-.437T4 5.5t.438-1.062T5.5 4t1.063.438T7 5.5t-.437 1.063T5.5 7m6.5 5"/></svg>', c.appendChild(w);
+          }
+        }
+        c.appendChild(d), h.appendChild(c);
+      }), i < o.length - 1 && (h.style.marginBottom = `${this.options.gap}px`), a.appendChild(h);
+    }), this.gallery.innerHTML = "", this.gallery.appendChild(a);
+  }
+  mergeOptions(e) {
+    const t = { ...e };
+    t.rowHeight !== void 0 && (t.rowHeightSm = t.rowHeight, t.rowHeightMd = t.rowHeight, t.rowHeightXl = t.rowHeight, delete t.rowHeight), Object.keys(t).forEach((o) => {
+      const a = o;
+      t[a] === void 0 && delete t[a];
+    }), this.options = { ...this.options, ...t };
+  }
+}
+const T = /* @__PURE__ */ W({
+  __name: "Lumosaic",
+  props: /* @__PURE__ */ L({
+    images: {},
+    rowHeightSm: {},
+    rowHeightMd: {},
+    rowHeightXl: {},
+    shouldRetrieveWidthAndHeight: { type: Boolean },
+    fallbackImageWidth: {},
+    fallbackImageHeight: {},
+    maxImageRatio: {},
+    minImageRatio: {},
+    maxRows: {},
+    stretchLastRow: { type: Boolean },
+    shuffleImages: { type: Boolean },
+    gap: {},
+    playButtonOnVideoCover: { type: Boolean },
+    observeWindowWidth: { type: Boolean },
+    rowHeight: {}
+  }, R),
+  emits: ["image-click"],
+  setup(g, { expose: e, emit: t }) {
+    const o = g, a = t, s = H(null);
+    let i = null;
+    return I(() => {
+      if (!s.value) return;
+      const { images: r, ...n } = o;
+      i = new S(s.value, r), s.value.addEventListener("click", (h) => {
+        const c = h.target.closest(".lumosaic-item");
+        if (c && s.value) {
+          const f = Array.from(s.value.querySelectorAll(".lumosaic-item")).indexOf(c);
+          f !== -1 && a("image-click", f, o.images);
+        }
+      }), i.init(n);
+    }), U(() => {
+      i && (i.destroy(), i = null);
+    }), y(
+      () => o.images,
+      (r) => {
+        i && i.replaceImages(r);
+      },
+      { deep: !0 }
+    ), y(
+      () => {
+        const { images: r, ...n } = o;
+        return n;
+      },
+      (r) => {
+        i && i.updateOptions(r);
+      },
+      { deep: !0 }
+    ), e({
+      shuffle: () => {
+        i && i.shuffleImages();
+      }
+    }), (r, n) => (O(), x("div", {
+      ref_key: "galleryContainer",
+      ref: s,
+      class: "lumosaic-wrapper"
+    }, null, 512));
+  }
+}), P = {
+  install: (g) => {
+    g.component("Lumosaic", T);
+  }
+};
+export {
+  T as Lumosaic,
+  P as default
+};

package/dist/nuxt/module.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('@nuxt/schema').NuxtModule<import('@nuxt/schema').ModuleOptions, import('@nuxt/schema').ModuleOptions, false>;
+export default _default;

package/dist/nuxt-module.cjs.js

@@ -0,0 +1 @@
+"use strict";const s=require("@nuxt/kit"),e=s.defineNuxtModule({meta:{name:"lumosaic-nuxt",configKey:"lumosaic"},setup(t,o){s.addComponent({name:"Lumosaic",export:"Lumosaic",filePath:"lumosaic"}),o.options.css.push("lumosaic/style.css")}});module.exports=e;

package/dist/nuxt-module.d.ts

@@ -0,0 +1,3 @@
+export * from './nuxt/module'
+import Lumosaic from './nuxt/module'
+export default Lumosaic

package/dist/nuxt-module.es.js

@@ -0,0 +1,17 @@
+import { defineNuxtModule as s, addComponent as e } from "@nuxt/kit";
+const m = s({
+  meta: {
+    name: "lumosaic-nuxt",
+    configKey: "lumosaic"
+  },
+  setup(t, o) {
+    e({
+      name: "Lumosaic",
+      export: "Lumosaic",
+      filePath: "lumosaic"
+    }), o.options.css.push("lumosaic/style.css");
+  }
+});
+export {
+  m as default
+};

package/dist/style.css

@@ -0,0 +1 @@
+.lumosaic-wrapper{width:100%}.lumosaic-row{display:flex;width:100%}.lumosaic-item{flex-grow:1;overflow:hidden;position:relative;background-color:#00000017}.lumosaic-item:last-child{margin-right:0}.lumosaic-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}@media (hover: hover){.lumosaic-item:hover img{transform:scale(1.1)}}.lumosaic-play-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;pointer-events:none}.lumosaic-play-icon svg{width:10vw;height:auto}@media (min-width: 768px){.lumosaic-play-icon svg{width:7vw}}@media (min-width: 1024px){.lumosaic-play-icon svg{width:5vw}}.lumosaic-loading:before{position:absolute;content:"";z-index:1;opacity:.3;width:3em;height:3em;top:calc(50% - 1.5em);left:calc(50% - 1.5em);border:.3em dotted #8d9bbb;border-radius:50%;display:inline-block;box-sizing:border-box;animation:lumosaic-rotation 2s linear infinite}@keyframes lumosaic-rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "lumosaic",
+  "version": "1.1.4",
+  "description": "Adaptive photo gallery with intelligent row layout for Vue 3 and Nuxt 4",
+  "author": "Sergey Volkar <volkar.sergey@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/volkar/lumosaic.git"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "nuxt",
+    "nuxt4",
+    "gallery",
+    "mosaic",
+    "masonry",
+    "images",
+    "grid"
+  ],
+  "type": "module",
+  "main": "./dist/lumosaic.umd.js",
+  "module": "./dist/lumosaic.es.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/lumosaic.es.js",
+      "require": "./dist/lumosaic.umd.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./nuxt": {
+      "import": "./dist/nuxt-module.es.js",
+      "require": "./dist/nuxt-module.umd.js"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@nuxt/kit": "^4.4.8",
+    "@nuxt/schema": "^4.4.8",
+    "@types/node": "^25.9.3",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0",
+    "vite-plugin-dts": "^3.8.1",
+    "vue": "^3.4.21",
+    "vue-tsc": "^2.0.0"
+  }
+}