masonry-simple 4.2.0 → 4.2.1-dev.0

package/README.md

@@ -9,7 +9,7 @@
 [![GitHub package version](https://img.shields.io/github/package-json/v/ux-ui-pro/masonry-simple.svg)](https://github.com/ux-ui-pro/masonry-simple)
 [![NPM Downloads](https://img.shields.io/npm/dm/masonry-simple.svg?style=flat)](https://www.npmjs.org/package/masonry-simple)
 
-<sup>750B gzipped</sup>
+<sup>1kB gzipped</sup>
 
 <a href="https://codepen.io/ux-ui/pen/poxGEqX">Demo</a>
 

package/dist/index.cjs.js

@@ -1 +1 @@
-"use strict";var s=Object.defineProperty;var n=(e,t,i)=>t in e?s(e,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[t]=i;var r=(e,t,i)=>n(e,typeof t!="symbol"?t+"":t,i);module.exports=class{constructor(e={}){r(this,"container");r(this,"gridItems",[]);r(this,"rowHeight",1);r(this,"rowGap",0);r(this,"resizeObserver",null);r(this,"abortController",null);this.container=e.container instanceof HTMLElement?e.container:typeof e.container=="string"?document.querySelector(e.container):document.querySelector(".masonry")||null}handleResize(){window.requestIdleCallback(()=>this.resizeAllItems(),{timeout:200})}resizeAllItems(){this.container&&(this.container.style.alignItems="start",this.gridItems.forEach(e=>{const t=Math.ceil((e.clientHeight+this.rowGap)/(this.rowHeight+this.rowGap));e.style.gridRowEnd=`span ${t}`}))}init(){this.container&&(this.setupAbortController(),this.setupResizeObserver(),this.initializeContainerStyles(),this.initializeGridItems(),this.resizeAllItems())}setupAbortController(){this.abortController=new AbortController,this.abortController.signal.addEventListener("abort",()=>{this.resizeObserver&&this.resizeObserver.disconnect()})}setupResizeObserver(){this.resizeObserver=new ResizeObserver(()=>this.handleResize()),this.resizeObserver&&(this.resizeObserver.observe(this.container),this.gridItems.forEach(e=>this.resizeObserver.observe(e)))}initializeContainerStyles(){const e=getComputedStyle(this.container);this.rowGap=parseInt(e.rowGap,10)||0,this.rowHeight=parseInt(e.gridAutoRows,10)||this.rowHeight,this.container.style.contain="layout"}initializeGridItems(){this.gridItems=Array.from(this.container.children)}destroy(){this.container&&this.abortController&&this.resizeObserver&&(this.abortController.abort(),this.container.style.contain="",this.container.style.alignItems="",this.gridItems.forEach(e=>{e.style.gridRowEnd=""}),this.abortController=null,this.resizeObserver=null)}};
+"use strict";var s=Object.defineProperty;var n=(e,t,r)=>t in e?s(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r;var i=(e,t,r)=>n(e,typeof t!="symbol"?t+"":t,r);module.exports=class{constructor(e={}){i(this,"container");i(this,"gridItems",[]);i(this,"rowHeight",1);i(this,"rowGap",0);i(this,"resizeObserver",null);i(this,"abortController",null);this.container=e.container instanceof HTMLElement?e.container:typeof e.container=="string"?document.querySelector(e.container):document.querySelector(".masonry")||null}handleResize(){"requestIdleCallback"in window?window.requestIdleCallback(()=>this.resizeAllItems(),{timeout:200}):setTimeout(()=>this.resizeAllItems(),200)}resizeAllItems(){this.container&&(this.container.style.alignItems="start",this.gridItems.forEach(e=>{const t=Math.ceil((e.clientHeight+this.rowGap)/(this.rowHeight+this.rowGap));e.style.gridRowEnd=`span ${t}`}))}init(){this.container&&(this.setupAbortController(),this.initializeContainerStyles(),this.initializeGridItems(),this.setupResizeObserver(),this.resizeAllItems())}setupAbortController(){this.abortController=new AbortController,this.abortController.signal.addEventListener("abort",()=>{var e;(e=this.resizeObserver)==null||e.disconnect()})}setupResizeObserver(){this.resizeObserver=new ResizeObserver(()=>this.handleResize()),this.resizeObserver&&this.container&&(this.resizeObserver.observe(this.container),this.gridItems.forEach(e=>this.resizeObserver.observe(e)))}initializeContainerStyles(){if(!this.container)return;const e=getComputedStyle(this.container);this.rowGap=parseInt(e.rowGap,10)||0,this.rowHeight=parseInt(e.gridAutoRows,10)||this.rowHeight,this.container.style.contain="layout"}initializeGridItems(){this.container&&(this.gridItems=Array.from(this.container.children))}destroy(){var e;this.container&&((e=this.abortController)==null||e.abort(),this.container.style.contain="",this.container.style.alignItems="",this.gridItems.forEach(t=>{t.style.gridRowEnd=""}),this.abortController=null,this.resizeObserver=null)}};

package/dist/index.d.ts

@@ -1,3 +1,6 @@
+interface MasonrySimpleOptions {
+    container?: HTMLElement | string;
+}
 declare class MasonrySimple {
     private container;
     private gridItems;
@@ -5,9 +8,7 @@ declare class MasonrySimple {
     private rowGap;
     private resizeObserver;
     private abortController;
-    constructor(options?: {
-        container?: HTMLElement | string;
-    });
+    constructor(options?: MasonrySimpleOptions);
     private handleResize;
     private resizeAllItems;
     init(): void;

package/dist/index.es.js

@@ -1,46 +1,49 @@
 var s = Object.defineProperty;
-var n = (r, e, i) => e in r ? s(r, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : r[e] = i;
-var t = (r, e, i) => n(r, typeof e != "symbol" ? e + "" : e, i);
+var n = (r, e, t) => e in r ? s(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var i = (r, e, t) => n(r, typeof e != "symbol" ? e + "" : e, t);
 class l {
   constructor(e = {}) {
-    t(this, "container");
-    t(this, "gridItems", []);
-    t(this, "rowHeight", 1);
-    t(this, "rowGap", 0);
-    t(this, "resizeObserver", null);
-    t(this, "abortController", null);
+    i(this, "container");
+    i(this, "gridItems", []);
+    i(this, "rowHeight", 1);
+    i(this, "rowGap", 0);
+    i(this, "resizeObserver", null);
+    i(this, "abortController", null);
     this.container = e.container instanceof HTMLElement ? e.container : typeof e.container == "string" ? document.querySelector(e.container) : document.querySelector(".masonry") || null;
   }
   handleResize() {
-    window.requestIdleCallback(() => this.resizeAllItems(), { timeout: 200 });
+    "requestIdleCallback" in window ? window.requestIdleCallback(() => this.resizeAllItems(), { timeout: 200 }) : setTimeout(() => this.resizeAllItems(), 200);
   }
   resizeAllItems() {
     this.container && (this.container.style.alignItems = "start", this.gridItems.forEach((e) => {
-      const i = Math.ceil((e.clientHeight + this.rowGap) / (this.rowHeight + this.rowGap));
-      e.style.gridRowEnd = `span ${i}`;
+      const t = Math.ceil((e.clientHeight + this.rowGap) / (this.rowHeight + this.rowGap));
+      e.style.gridRowEnd = `span ${t}`;
     }));
   }
   init() {
-    this.container && (this.setupAbortController(), this.setupResizeObserver(), this.initializeContainerStyles(), this.initializeGridItems(), this.resizeAllItems());
+    this.container && (this.setupAbortController(), this.initializeContainerStyles(), this.initializeGridItems(), this.setupResizeObserver(), this.resizeAllItems());
   }
   setupAbortController() {
     this.abortController = new AbortController(), this.abortController.signal.addEventListener("abort", () => {
-      this.resizeObserver && this.resizeObserver.disconnect();
+      var e;
+      (e = this.resizeObserver) == null || e.disconnect();
     });
   }
   setupResizeObserver() {
-    this.resizeObserver = new ResizeObserver(() => this.handleResize()), this.resizeObserver && (this.resizeObserver.observe(this.container), this.gridItems.forEach((e) => this.resizeObserver.observe(e)));
+    this.resizeObserver = new ResizeObserver(() => this.handleResize()), this.resizeObserver && this.container && (this.resizeObserver.observe(this.container), this.gridItems.forEach((e) => this.resizeObserver.observe(e)));
   }
   initializeContainerStyles() {
+    if (!this.container) return;
     const e = getComputedStyle(this.container);
     this.rowGap = parseInt(e.rowGap, 10) || 0, this.rowHeight = parseInt(e.gridAutoRows, 10) || this.rowHeight, this.container.style.contain = "layout";
   }
   initializeGridItems() {
-    this.gridItems = Array.from(this.container.children);
+    this.container && (this.gridItems = Array.from(this.container.children));
   }
   destroy() {
-    this.container && this.abortController && this.resizeObserver && (this.abortController.abort(), this.container.style.contain = "", this.container.style.alignItems = "", this.gridItems.forEach((e) => {
-      e.style.gridRowEnd = "";
+    var e;
+    this.container && ((e = this.abortController) == null || e.abort(), this.container.style.contain = "", this.container.style.alignItems = "", this.gridItems.forEach((t) => {
+      t.style.gridRowEnd = "";
     }), this.abortController = null, this.resizeObserver = null);
   }
 }

package/dist/index.umd.js

@@ -1 +1 @@
-(function(e,t){typeof exports=="object"&&typeof module<"u"?module.exports=t():typeof define=="function"&&define.amd?define(t):(e=typeof globalThis<"u"?globalThis:e||self).MasonrySimple=t()})(this,function(){"use strict";var s=Object.defineProperty;var n=(e,t,r)=>t in e?s(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r;var i=(e,t,r)=>n(e,typeof t!="symbol"?t+"":t,r);return class{constructor(e={}){i(this,"container");i(this,"gridItems",[]);i(this,"rowHeight",1);i(this,"rowGap",0);i(this,"resizeObserver",null);i(this,"abortController",null);this.container=e.container instanceof HTMLElement?e.container:typeof e.container=="string"?document.querySelector(e.container):document.querySelector(".masonry")||null}handleResize(){window.requestIdleCallback(()=>this.resizeAllItems(),{timeout:200})}resizeAllItems(){this.container&&(this.container.style.alignItems="start",this.gridItems.forEach(e=>{const t=Math.ceil((e.clientHeight+this.rowGap)/(this.rowHeight+this.rowGap));e.style.gridRowEnd=`span ${t}`}))}init(){this.container&&(this.setupAbortController(),this.setupResizeObserver(),this.initializeContainerStyles(),this.initializeGridItems(),this.resizeAllItems())}setupAbortController(){this.abortController=new AbortController,this.abortController.signal.addEventListener("abort",()=>{this.resizeObserver&&this.resizeObserver.disconnect()})}setupResizeObserver(){this.resizeObserver=new ResizeObserver(()=>this.handleResize()),this.resizeObserver&&(this.resizeObserver.observe(this.container),this.gridItems.forEach(e=>this.resizeObserver.observe(e)))}initializeContainerStyles(){const e=getComputedStyle(this.container);this.rowGap=parseInt(e.rowGap,10)||0,this.rowHeight=parseInt(e.gridAutoRows,10)||this.rowHeight,this.container.style.contain="layout"}initializeGridItems(){this.gridItems=Array.from(this.container.children)}destroy(){this.container&&this.abortController&&this.resizeObserver&&(this.abortController.abort(),this.container.style.contain="",this.container.style.alignItems="",this.gridItems.forEach(e=>{e.style.gridRowEnd=""}),this.abortController=null,this.resizeObserver=null)}}});
+(function(e,t){typeof exports=="object"&&typeof module<"u"?module.exports=t():typeof define=="function"&&define.amd?define(t):(e=typeof globalThis<"u"?globalThis:e||self).MasonrySimple=t()})(this,function(){"use strict";var s=Object.defineProperty;var n=(e,t,r)=>t in e?s(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r;var i=(e,t,r)=>n(e,typeof t!="symbol"?t+"":t,r);return class{constructor(e={}){i(this,"container");i(this,"gridItems",[]);i(this,"rowHeight",1);i(this,"rowGap",0);i(this,"resizeObserver",null);i(this,"abortController",null);this.container=e.container instanceof HTMLElement?e.container:typeof e.container=="string"?document.querySelector(e.container):document.querySelector(".masonry")||null}handleResize(){"requestIdleCallback"in window?window.requestIdleCallback(()=>this.resizeAllItems(),{timeout:200}):setTimeout(()=>this.resizeAllItems(),200)}resizeAllItems(){this.container&&(this.container.style.alignItems="start",this.gridItems.forEach(e=>{const t=Math.ceil((e.clientHeight+this.rowGap)/(this.rowHeight+this.rowGap));e.style.gridRowEnd=`span ${t}`}))}init(){this.container&&(this.setupAbortController(),this.initializeContainerStyles(),this.initializeGridItems(),this.setupResizeObserver(),this.resizeAllItems())}setupAbortController(){this.abortController=new AbortController,this.abortController.signal.addEventListener("abort",()=>{var e;(e=this.resizeObserver)==null||e.disconnect()})}setupResizeObserver(){this.resizeObserver=new ResizeObserver(()=>this.handleResize()),this.resizeObserver&&this.container&&(this.resizeObserver.observe(this.container),this.gridItems.forEach(e=>this.resizeObserver.observe(e)))}initializeContainerStyles(){if(!this.container)return;const e=getComputedStyle(this.container);this.rowGap=parseInt(e.rowGap,10)||0,this.rowHeight=parseInt(e.gridAutoRows,10)||this.rowHeight,this.container.style.contain="layout"}initializeGridItems(){this.container&&(this.gridItems=Array.from(this.container.children))}destroy(){var e;this.container&&((e=this.abortController)==null||e.abort(),this.container.style.contain="",this.container.style.alignItems="",this.gridItems.forEach(t=>{t.style.gridRowEnd=""}),this.abortController=null,this.resizeObserver=null)}}});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "masonry-simple",
-  "version": "4.2.0",
+  "version": "4.2.1-dev.0",
   "description": "MasonrySimple implements a simple system for placing masonry style elements using CSS Grid. Masonry placement is used for dynamic grids where elements may have different heights and need to be placed neatly without gaps.",
   "author": "ux-ui.pro",
   "license": "MIT",
@@ -16,9 +16,9 @@
   "scripts": {
     "clean": "rimraf dist",
     "build": "vite build",
-    "lint:js": "eslint **/*.{ts,js}",
-    "lint:fix:js": "eslint **/*.{ts,js} --fix",
-    "format:js": "prettier --write **/*.{ts,js}",
+    "lint:js": "eslint src/**/*.{ts,js}",
+    "lint:fix:js": "eslint src/**/*.{ts,js} --fix",
+    "format:js": "prettier --write src/**/*.{ts,js}",
     "lint:fix": "yarn lint:fix:js && yarn format:js"
   },
   "source": "src/index.ts",
@@ -27,28 +27,32 @@
   "browser": "./dist/index.umd.js",
   "types": "dist/index.d.ts",
   "exports": {
-    "import": "./dist/index.es.js",
-    "require": "./dist/index.cjs.js"
+    ".": {
+      "require": "./dist/index.cjs.js",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.umd.js"
+    },
+    "./dist/*": "./dist/*"
   },
   "files": [
     "dist/"
   ],
   "devDependencies": {
-    "@eslint/js": "9.21.0",
+    "@eslint/js": "9.22.0",
     "@rollup/plugin-terser": "0.4.4",
-    "@types/node": "22.13.8",
-    "@typescript-eslint/eslint-plugin": "8.25.0",
-    "@typescript-eslint/parser": "8.25.0",
-    "eslint": "9.18.0",
-    "eslint-config-prettier": "10.0.2",
+    "@types/node": "22.13.10",
+    "@typescript-eslint/eslint-plugin": "8.26.0",
+    "@typescript-eslint/parser": "8.26.0",
+    "eslint": "9.22.0",
+    "eslint-config-prettier": "10.1.1",
     "eslint-import-resolver-typescript": "3.8.3",
     "eslint-plugin-import": "2.31.0",
     "globals": "16.0.0",
-    "prettier": "3.5.2",
+    "prettier": "3.5.3",
     "rimraf": "6.0.1",
     "typescript": "5.8.2",
-    "vite": "6.2.0",
-    "vite-plugin-dts": "4.5.1"
+    "vite": "6.2.1",
+    "vite-plugin-dts": "4.5.3"
   },
   "keywords": [
     "masonry",