origam 2.3.0 → 2.5.0

package/dist/src/composables/Masonry/masonry.composable.cjs

@@ -0,0 +1,160 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.bucketFill = bucketFill;
+exports.pickColumnsForWidth = pickColumnsForWidth;
+exports.useMasonry = useMasonry;
+var _vue = require("vue");
+function pickColumnsForWidth(width, breakpoints, defaultColumns) {
+  if (!breakpoints) return Math.max(1, Math.floor(defaultColumns));
+  const entries = Object.entries(breakpoints).map(([k, v]) => [Number(k), Number(v)]).filter(([k, v]) => Number.isFinite(k) && Number.isFinite(v) && k > 0 && v >= 1).sort((a, b) => a[0] - b[0]);
+  let resolved = Math.max(1, Math.floor(defaultColumns));
+  for (const [bp, cols] of entries) {
+    if (width >= bp) resolved = Math.max(1, Math.floor(cols));
+  }
+  return resolved;
+}
+function bucketFill(heights, containerWidth, gap, columns, align = "top") {
+  const cols = Math.max(1, Math.floor(columns));
+  const totalGap = (cols - 1) * gap;
+  const itemWidth = Math.max(0, (containerWidth - totalGap) / cols);
+  const columnHeights = new Array(cols).fill(0);
+  const items = [];
+  for (let i = 0; i < heights.length; i++) {
+    let col = 0;
+    let min = columnHeights[0];
+    for (let c = 1; c < cols; c++) {
+      if (columnHeights[c] < min) {
+        min = columnHeights[c];
+        col = c;
+      }
+    }
+    const left = col * (itemWidth + gap);
+    const top = columnHeights[col];
+    const height = Math.max(0, heights[i]);
+    items.push({
+      index: i,
+      left,
+      top,
+      width: itemWidth,
+      height,
+      column: col
+    });
+    columnHeights[col] = top + height + gap;
+  }
+  let maxHeight = 0;
+  for (let c = 0; c < cols; c++) {
+    const h = columnHeights[c] > 0 ? columnHeights[c] - gap : 0;
+    if (h > maxHeight) maxHeight = h;
+  }
+  if (align === "center" && maxHeight > 0) {
+    const columnUsed = new Array(cols).fill(0);
+    for (const item of items) {
+      const colHeight = columnHeights[item.column] > 0 ? columnHeights[item.column] - gap : 0;
+      const shift = Math.max(0, (maxHeight - colHeight) / 2);
+      if (columnUsed[item.column] === 0) columnUsed[item.column] = shift;
+      item.top += columnUsed[item.column];
+    }
+  }
+  return {
+    containerHeight: maxHeight,
+    items,
+    columns: cols
+  };
+}
+function createResizeObserver(callback) {
+  if (typeof window === "undefined" || typeof ResizeObserver === "undefined") {
+    return null;
+  }
+  return new ResizeObserver(() => {
+    if (typeof window !== "undefined") {
+      window.requestAnimationFrame(callback);
+    } else {
+      callback();
+    }
+  });
+}
+function useMasonry(options) {
+  const containerRef = (0, _vue.ref)(null);
+  const items = /* @__PURE__ */new Map();
+  const layout = (0, _vue.ref)({
+    containerHeight: 0,
+    items: [],
+    columns: Math.max(1, options.columnsRef.value || 1)
+  });
+  let containerObserver = null;
+  let itemObserver = null;
+  const setItem = (index, el) => {
+    const previous = items.get(index);
+    if (previous && previous !== el && itemObserver) {
+      itemObserver.unobserve(previous);
+    }
+    if (!el) {
+      items.delete(index);
+      return;
+    }
+    items.set(index, el);
+    if (itemObserver) itemObserver.observe(el);
+  };
+  const measureHeights = () => {
+    const heights = [];
+    const sorted = Array.from(items.entries()).sort((a, b) => a[0] - b[0]);
+    for (const [, el] of sorted) {
+      heights.push(el.offsetHeight);
+    }
+    return heights;
+  };
+  const relayout = () => {
+    const container = containerRef.value;
+    if (!container) return;
+    const width = container.clientWidth;
+    if (width <= 0) {
+      return;
+    }
+    const cols = pickColumnsForWidth(width, options.breakpointsRef?.value, options.columnsRef.value);
+    const heights = measureHeights();
+    const align = options.alignRef?.value ?? "top";
+    layout.value = bucketFill(heights, width, options.gapRef.value, cols, align);
+  };
+  (0, _vue.watch)(containerRef, (container, previous) => {
+    if (previous) {
+      containerObserver?.unobserve(previous);
+    }
+    if (!container) return;
+    if (!containerObserver) {
+      containerObserver = createResizeObserver(relayout);
+    }
+    if (!itemObserver) {
+      itemObserver = createResizeObserver(relayout);
+    }
+    if (containerObserver) containerObserver.observe(container);
+    if (itemObserver) {
+      for (const el of items.values()) itemObserver.observe(el);
+    }
+    if (typeof window !== "undefined") {
+      window.requestAnimationFrame(relayout);
+    } else {
+      relayout();
+    }
+  }, {
+    immediate: false
+  });
+  (0, _vue.onBeforeUnmount)(() => {
+    containerObserver?.disconnect();
+    itemObserver?.disconnect();
+    containerObserver = null;
+    itemObserver = null;
+    items.clear();
+  });
+  (0, _vue.watch)(() => [options.columnsRef.value, options.gapRef.value, options.alignRef?.value, options.breakpointsRef?.value], () => relayout(), {
+    deep: true
+  });
+  return {
+    containerRef,
+    setItem,
+    layout,
+    relayout
+  };
+}

package/dist/src/composables/Masonry/masonry.composable.d.ts

@@ -0,0 +1,132 @@
+import { type Ref } from 'vue';
+import type { TMasonryAlign, TMasonryColumnBreakpoints } from '../../types';
+/**
+ * Internal layout descriptor produced by the bucket-fill algorithm.
+ * One entry per measured item. Coordinates are expressed in CSS px,
+ * relative to the masonry container's content box.
+ */
+export interface IMasonryItemRect {
+    /** Index of the item in the original DOM order. */
+    index: number;
+    /** `left` (px) of the item inside the container's content box. */
+    left: number;
+    /** `top` (px) of the item inside the container's content box. */
+    top: number;
+    /** Computed width (px) — same for every item in a given pass. */
+    width: number;
+    /** Measured height (px) — preserved from the natural item flow. */
+    height: number;
+    /** Zero-based column index the item was placed into. */
+    column: number;
+}
+/**
+ * Public layout result. The caller uses `containerHeight` to size the
+ * container (absolute-positioned children would otherwise collapse it),
+ * and `items` to read per-item coordinates for inline-style assignment.
+ */
+export interface IMasonryLayoutResult {
+    /** Final container height (px) — `max(column heights)`. */
+    containerHeight: number;
+    /** Per-item position record. Index matches the original DOM order. */
+    items: IMasonryItemRect[];
+    /** Effective column count used for this layout (post-breakpoint). */
+    columns: number;
+}
+/**
+ * Options consumed by `useMasonry`. All inputs are refs so the
+ * composable can react to prop changes from its consumer.
+ */
+export interface IUseMasonryOptions {
+    /** Default column count. Used when no breakpoint matches. */
+    columnsRef: Ref<number>;
+    /**
+     * Gap in **px** between items, both axes. The composable expects an
+     * already-resolved pixel value — string-token resolution happens in
+     * the component wrapper.
+     */
+    gapRef: Ref<number>;
+    /** Optional container-query breakpoints. */
+    breakpointsRef?: Ref<TMasonryColumnBreakpoints | undefined>;
+    /**
+     * Vertical alignment of items inside a column. `'top'` packs to the
+     * top; `'center'` shifts each column's content down by half the
+     * unused space.
+     */
+    alignRef?: Ref<TMasonryAlign>;
+}
+/**
+ * Decide how many columns to use given a container width and a
+ * breakpoint map. Picks the LARGEST key ≤ width. Falls back to
+ * `defaultColumns` when no key matches (i.e. the container is narrower
+ * than every declared breakpoint).
+ *
+ * Exposed for unit testing — the bucket-fill itself is pure.
+ *
+ * @example
+ *   pickColumnsForWidth(750, { 600: 2, 900: 3, 1200: 4 }, 1) → 2
+ *   pickColumnsForWidth(1500, { 600: 2, 900: 3, 1200: 4 }, 1) → 4
+ *   pickColumnsForWidth(400, { 600: 2, 900: 3, 1200: 4 }, 1) → 1
+ */
+export declare function pickColumnsForWidth(width: number, breakpoints: TMasonryColumnBreakpoints | undefined, defaultColumns: number): number;
+/**
+ * Pure bucket-fill algorithm. Given an ordered list of item heights, a
+ * container width, a gap in px, and a column count, returns the layout
+ * coordinates of every item and the final container height.
+ *
+ * Algorithm:
+ *   1. Compute item width  = (containerWidth - (cols - 1) * gap) / cols.
+ *   2. Track `columnHeights[i]` — running sum of item heights + gaps.
+ *   3. For each item, place it in the column with the SMALLEST current
+ *      height (ties → leftmost column). Update that column's height.
+ *   4. `containerHeight` = max(columnHeights).
+ *
+ * No DOM access. Fully deterministic. Easy to unit-test.
+ */
+export declare function bucketFill(heights: ReadonlyArray<number>, containerWidth: number, gap: number, columns: number, align?: TMasonryAlign): IMasonryLayoutResult;
+/**
+ * Public composable used by `<OrigamMasonry>` when the CSS-native
+ * `grid-template-rows: masonry` is unavailable. Maintains:
+ *
+ *   - `containerRef` — bind to the container element.
+ *   - `itemRefs`     — bind via `:ref="(el) => setItem(idx, el)"` on
+ *                      each masonry child.
+ *   - `layout`       — reactive layout result (heights, item rects).
+ *   - `setItem`      — register a child element. Idempotent.
+ *   - `relayout()`   — manual re-measure; useful after async content
+ *                      load (images, fonts) that doesn't trigger
+ *                      `ResizeObserver`.
+ *
+ * Lifecycle:
+ *   - On mount: install a `ResizeObserver` on the container AND on
+ *     every registered item. Run the first layout.
+ *   - On every observed mutation: re-measure heights, re-run bucket-fill.
+ *   - On unmount: disconnect observers.
+ */
+export declare function useMasonry(options: IUseMasonryOptions): {
+    containerRef: Ref<HTMLElement | null, HTMLElement | null>;
+    setItem: (index: number, el: HTMLElement | null) => void;
+    layout: Ref<{
+        containerHeight: number;
+        items: {
+            index: number;
+            left: number;
+            top: number;
+            width: number;
+            height: number;
+            column: number;
+        }[];
+        columns: number;
+    }, IMasonryLayoutResult | {
+        containerHeight: number;
+        items: {
+            index: number;
+            left: number;
+            top: number;
+            width: number;
+            height: number;
+            column: number;
+        }[];
+        columns: number;
+    }>;
+    relayout: () => void;
+};

package/dist/src/composables/Masonry/masonry.composable.js

@@ -0,0 +1,160 @@
+import { onBeforeUnmount, ref, watch } from "vue";
+export function pickColumnsForWidth(width, breakpoints, defaultColumns) {
+  if (!breakpoints) return Math.max(1, Math.floor(defaultColumns));
+  const entries = Object.entries(breakpoints).map(([k, v]) => [Number(k), Number(v)]).filter(([k, v]) => Number.isFinite(k) && Number.isFinite(v) && k > 0 && v >= 1).sort((a, b) => a[0] - b[0]);
+  let resolved = Math.max(1, Math.floor(defaultColumns));
+  for (const [bp, cols] of entries) {
+    if (width >= bp) resolved = Math.max(1, Math.floor(cols));
+  }
+  return resolved;
+}
+export function bucketFill(heights, containerWidth, gap, columns, align = "top") {
+  const cols = Math.max(1, Math.floor(columns));
+  const totalGap = (cols - 1) * gap;
+  const itemWidth = Math.max(0, (containerWidth - totalGap) / cols);
+  const columnHeights = new Array(cols).fill(0);
+  const items = [];
+  for (let i = 0; i < heights.length; i++) {
+    let col = 0;
+    let min = columnHeights[0];
+    for (let c = 1; c < cols; c++) {
+      if (columnHeights[c] < min) {
+        min = columnHeights[c];
+        col = c;
+      }
+    }
+    const left = col * (itemWidth + gap);
+    const top = columnHeights[col];
+    const height = Math.max(0, heights[i]);
+    items.push({
+      index: i,
+      left,
+      top,
+      width: itemWidth,
+      height,
+      column: col
+    });
+    columnHeights[col] = top + height + gap;
+  }
+  let maxHeight = 0;
+  for (let c = 0; c < cols; c++) {
+    const h = columnHeights[c] > 0 ? columnHeights[c] - gap : 0;
+    if (h > maxHeight) maxHeight = h;
+  }
+  if (align === "center" && maxHeight > 0) {
+    const columnUsed = new Array(cols).fill(0);
+    for (const item of items) {
+      const colHeight = columnHeights[item.column] > 0 ? columnHeights[item.column] - gap : 0;
+      const shift = Math.max(0, (maxHeight - colHeight) / 2);
+      if (columnUsed[item.column] === 0) columnUsed[item.column] = shift;
+      item.top += columnUsed[item.column];
+    }
+  }
+  return {
+    containerHeight: maxHeight,
+    items,
+    columns: cols
+  };
+}
+function createResizeObserver(callback) {
+  if (typeof window === "undefined" || typeof ResizeObserver === "undefined") {
+    return null;
+  }
+  return new ResizeObserver(() => {
+    if (typeof window !== "undefined") {
+      window.requestAnimationFrame(callback);
+    } else {
+      callback();
+    }
+  });
+}
+export function useMasonry(options) {
+  const containerRef = ref(null);
+  const items = /* @__PURE__ */ new Map();
+  const layout = ref({
+    containerHeight: 0,
+    items: [],
+    columns: Math.max(1, options.columnsRef.value || 1)
+  });
+  let containerObserver = null;
+  let itemObserver = null;
+  const setItem = (index, el) => {
+    const previous = items.get(index);
+    if (previous && previous !== el && itemObserver) {
+      itemObserver.unobserve(previous);
+    }
+    if (!el) {
+      items.delete(index);
+      return;
+    }
+    items.set(index, el);
+    if (itemObserver) itemObserver.observe(el);
+  };
+  const measureHeights = () => {
+    const heights = [];
+    const sorted = Array.from(items.entries()).sort((a, b) => a[0] - b[0]);
+    for (const [, el] of sorted) {
+      heights.push(el.offsetHeight);
+    }
+    return heights;
+  };
+  const relayout = () => {
+    const container = containerRef.value;
+    if (!container) return;
+    const width = container.clientWidth;
+    if (width <= 0) {
+      return;
+    }
+    const cols = pickColumnsForWidth(
+      width,
+      options.breakpointsRef?.value,
+      options.columnsRef.value
+    );
+    const heights = measureHeights();
+    const align = options.alignRef?.value ?? "top";
+    layout.value = bucketFill(heights, width, options.gapRef.value, cols, align);
+  };
+  watch(
+    containerRef,
+    (container, previous) => {
+      if (previous) {
+        containerObserver?.unobserve(previous);
+      }
+      if (!container) return;
+      if (!containerObserver) {
+        containerObserver = createResizeObserver(relayout);
+      }
+      if (!itemObserver) {
+        itemObserver = createResizeObserver(relayout);
+      }
+      if (containerObserver) containerObserver.observe(container);
+      if (itemObserver) {
+        for (const el of items.values()) itemObserver.observe(el);
+      }
+      if (typeof window !== "undefined") {
+        window.requestAnimationFrame(relayout);
+      } else {
+        relayout();
+      }
+    },
+    { immediate: false }
+  );
+  onBeforeUnmount(() => {
+    containerObserver?.disconnect();
+    itemObserver?.disconnect();
+    containerObserver = null;
+    itemObserver = null;
+    items.clear();
+  });
+  watch(
+    () => [options.columnsRef.value, options.gapRef.value, options.alignRef?.value, options.breakpointsRef?.value],
+    () => relayout(),
+    { deep: true }
+  );
+  return {
+    containerRef,
+    setItem,
+    layout,
+    relayout
+  };
+}