origam 2.2.1 → 2.5.0

package/dist/src/composables/InlineEdit/inline-edit.composable.js

@@ -0,0 +1,86 @@
+import {
+  computed,
+  nextTick,
+  ref,
+  unref
+} from "vue";
+const toDraft = (value) => {
+  if (value === null || value === void 0) return "";
+  return String(value);
+};
+export function useInlineEdit(modelValue, options = {}) {
+  const trim = options.trim ?? true;
+  const isEditing = ref(false);
+  const draft = ref("");
+  const error = ref(null);
+  const isPending = ref(false);
+  let validationToken = 0;
+  const normalisedDraft = computed(() => trim ? draft.value.trim() : draft.value);
+  const isDraftEmpty = computed(() => normalisedDraft.value.length === 0);
+  const edit = () => {
+    if (isEditing.value) return;
+    draft.value = toDraft(unref(modelValue));
+    error.value = null;
+    isPending.value = false;
+    isEditing.value = true;
+  };
+  const setValue = (next) => {
+    draft.value = next;
+    if (error.value !== null) {
+      error.value = null;
+    }
+  };
+  const cancel = () => {
+    validationToken += 1;
+    isPending.value = false;
+    error.value = null;
+    isEditing.value = false;
+    draft.value = "";
+    options.onCancel?.();
+  };
+  const runValidator = async (value, validator) => {
+    if (!validator) return null;
+    const verdict = await validator(value);
+    if (verdict === true) return null;
+    return typeof verdict === "string" ? verdict : "Invalid value";
+  };
+  const confirm = async () => {
+    if (!isEditing.value) return false;
+    const token = ++validationToken;
+    const next = normalisedDraft.value;
+    error.value = null;
+    if (options.validate) {
+      isPending.value = true;
+      let verdict = null;
+      try {
+        verdict = await runValidator(next, options.validate);
+      } catch (err) {
+        verdict = err instanceof Error ? err.message : String(err);
+      }
+      if (token !== validationToken) return false;
+      isPending.value = false;
+      if (verdict !== null) {
+        error.value = verdict;
+        options.onError?.(verdict);
+        return false;
+      }
+    }
+    isEditing.value = false;
+    options.onConfirm?.(next);
+    draft.value = "";
+    await nextTick();
+    return true;
+  };
+  return {
+    isEditing,
+    draft,
+    error,
+    isPending,
+    normalisedDraft,
+    isDraftEmpty,
+    edit,
+    confirm,
+    cancel,
+    setValue
+  };
+}

package/dist/src/composables/Mask/index.cjs

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _mask = require("./mask.composable.cjs");
+Object.keys(_mask).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _mask[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _mask[key];
+    }
+  });
+});

package/dist/src/composables/Mask/index.d.ts

@@ -0,0 +1 @@
+export * from './mask.composable';

package/dist/src/composables/Mask/index.js

@@ -0,0 +1 @@
+export * from "./mask.composable.js";

package/dist/src/composables/Mask/mask.composable.cjs

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMask = useMask;
+var _vue = require("vue");
+var _utils = require("../../utils/index.cjs");
+function useMask(modelValue, mask) {
+  const config = (0, _vue.computed)(() => {
+    return (0, _utils.resolveMaskConfig)((0, _vue.unref)(mask) ?? null);
+  });
+  const masked = (0, _vue.ref)("");
+  const unmasked = (0, _vue.ref)("");
+  const complete = (0, _vue.ref)(false);
+  function recompute(raw) {
+    const cfg = config.value;
+    const source = raw ?? "";
+    if (!cfg) {
+      masked.value = source;
+      unmasked.value = source;
+      complete.value = false;
+      return;
+    }
+    const r = (0, _utils.applyMask)(source, cfg.pattern);
+    masked.value = r.masked;
+    unmasked.value = r.unmasked;
+    complete.value = r.complete;
+  }
+  recompute((0, _vue.unref)(modelValue));
+  if ((0, _vue.isRef)(modelValue)) {
+    (0, _vue.watch)(modelValue, v => recompute(v));
+  }
+  (0, _vue.watch)(config, () => recompute((0, _vue.unref)(modelValue) ?? unmasked.value));
+  const isValid = (0, _vue.computed)(() => {
+    const cfg = config.value;
+    if (!cfg) return true;
+    if (!unmasked.value) return !cfg.required;
+    if (cfg.required && !complete.value) return false;
+    if (cfg.validator) {
+      return (0, _utils.validatePattern)(unmasked.value, cfg.validator);
+    }
+    return complete.value;
+  });
+  function setRaw(raw) {
+    recompute(raw);
+    return unmasked.value;
+  }
+  return {
+    masked,
+    unmasked,
+    isValid,
+    complete,
+    setRaw,
+    config
+  };
+}

package/dist/src/composables/Mask/mask.composable.d.ts

@@ -0,0 +1,39 @@
+import { MaybeRef, Ref } from 'vue';
+import type { IMaskOptions, IResolvedMaskConfig } from '../../interfaces';
+import type { TMask } from '../../types';
+/**
+ * Public return shape of `useMask`.
+ */
+export interface IUseMaskReturn {
+    masked: Ref<string>;
+    unmasked: Ref<string>;
+    isValid: Ref<boolean>;
+    complete: Ref<boolean>;
+    /**
+     * Imperatively re-run the formatter on a raw value
+     * (used by paste / external sync). Returns the new
+     * `unmasked` so callers can keep their model in sync.
+     */
+    setRaw: (raw: string) => string;
+    /**
+     * Currently resolved config (pattern + validator +
+     * required). `null` when no mask is active.
+     */
+    config: Ref<IResolvedMaskConfig | null>;
+}
+/**
+ * Reactive mask engine — keeps `masked`, `unmasked`,
+ * `isValid` and `complete` in sync with a source string
+ * (`modelValue`) and a (possibly polymorphic) mask spec.
+ *
+ * Both the value and the mask are accepted as a `MaybeRef`
+ * so the composable plays well with `props.modelValue` and
+ * a static `props.mask` alike.
+ *
+ * Reactivity:
+ *   - When `modelValue` changes → reformat + revalidate.
+ *   - When `mask` changes      → re-resolve config, reformat
+ *                                the current value.
+ */
+export declare function useMask(modelValue: MaybeRef<string | null | undefined>, mask: MaybeRef<TMask | undefined>): IUseMaskReturn;
+export type { IMaskOptions };

package/dist/src/composables/Mask/mask.composable.js

@@ -0,0 +1,51 @@
+import { computed, isRef, ref, unref, watch } from "vue";
+import { applyMask, resolveMaskConfig, validatePattern } from "../../utils/index.js";
+export function useMask(modelValue, mask) {
+  const config = computed(() => {
+    return resolveMaskConfig(unref(mask) ?? null);
+  });
+  const masked = ref("");
+  const unmasked = ref("");
+  const complete = ref(false);
+  function recompute(raw) {
+    const cfg = config.value;
+    const source = raw ?? "";
+    if (!cfg) {
+      masked.value = source;
+      unmasked.value = source;
+      complete.value = false;
+      return;
+    }
+    const r = applyMask(source, cfg.pattern);
+    masked.value = r.masked;
+    unmasked.value = r.unmasked;
+    complete.value = r.complete;
+  }
+  recompute(unref(modelValue));
+  if (isRef(modelValue)) {
+    watch(modelValue, (v) => recompute(v));
+  }
+  watch(config, () => recompute(unref(modelValue) ?? unmasked.value));
+  const isValid = computed(() => {
+    const cfg = config.value;
+    if (!cfg) return true;
+    if (!unmasked.value) return !cfg.required;
+    if (cfg.required && !complete.value) return false;
+    if (cfg.validator) {
+      return validatePattern(unmasked.value, cfg.validator);
+    }
+    return complete.value;
+  });
+  function setRaw(raw) {
+    recompute(raw);
+    return unmasked.value;
+  }
+  return {
+    masked,
+    unmasked,
+    isValid,
+    complete,
+    setRaw,
+    config
+  };
+}

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;
+};