origam 0.3.10 → 2.3.0

package/dist/src/composables/Sheet/sheetSwipe.composable.cjs

@@ -0,0 +1,207 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DEFAULT_SHEET_SNAP_POINTS", {
+  enumerable: true,
+  get: function () {
+    return _consts.DEFAULT_SHEET_SNAP_POINTS;
+  }
+});
+exports.useSheetSwipe = useSheetSwipe;
+var _vue = require("vue");
+var _consts = require("../../consts/index.cjs");
+const FAST_FLICK_THRESHOLD = 0.5;
+function resolveHeightPx(height) {
+  if (typeof height === "number") return height;
+  if (typeof window === "undefined") return 0;
+  const value = String(height).trim();
+  const match = value.match(/^([\d.]+)(px|vh|vw|%|rem|em)?$/i);
+  if (!match) return 0;
+  const num = parseFloat(match[1]);
+  const unit = (match[2] ?? "px").toLowerCase();
+  switch (unit) {
+    case "px":
+      return num;
+    // For a bottom-sheet, `vh`, `%` and `vw` all map to viewport
+    // height — `%` is the conventional shorthand designers reach for
+    // even though strictly speaking a percentage on `height` resolves
+    // against the parent. We expose `vh` as the canonical unit and
+    // treat % the same way; documented in the prop's TSDoc.
+    case "vh":
+    case "%":
+      return window.innerHeight * num / 100;
+    case "vw":
+      return window.innerWidth * num / 100;
+    case "rem":
+    case "em":
+      {
+        const root = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+        return num * root;
+      }
+    default:
+      return num;
+  }
+}
+function useSheetSwipe(options) {
+  const {
+    el,
+    handle,
+    snapPoints,
+    defaultSnap,
+    disabled,
+    persistent
+  } = options;
+  const sortedSnaps = (0, _vue.computed)(() => {
+    const src = snapPoints?.value ?? _consts.DEFAULT_SHEET_SNAP_POINTS;
+    return [...src].sort((a, b) => resolveHeightPx(a.height) - resolveHeightPx(b.height));
+  });
+  const currentSnap = (0, _vue.ref)(defaultSnap?.value ?? "half");
+  const currentSnapHeight = (0, _vue.computed)(() => {
+    const snap = sortedSnaps.value.find(s => s.id === currentSnap.value) ?? sortedSnaps.value[Math.floor(sortedSnaps.value.length / 2)];
+    return resolveHeightPx(snap?.height ?? 0);
+  });
+  const dragOffset = (0, _vue.shallowRef)(0);
+  const isDragging = (0, _vue.shallowRef)(false);
+  (0, _vue.watch)(() => defaultSnap?.value, next => {
+    if (next && next !== currentSnap.value) currentSnap.value = next;
+  });
+  let startY = 0;
+  let startTime = 0;
+  let baselineHeight = 0;
+  let activePointer = null;
+  function resolveSnap(delta, velocity) {
+    const snaps = sortedSnaps.value;
+    if (snaps.length === 0) return currentSnap.value;
+    const currentIdx = Math.max(0, snaps.findIndex(s => s.id === currentSnap.value));
+    const goingUp = velocity > 0;
+    const goingDown = velocity < 0;
+    const speed = Math.abs(velocity);
+    if (speed >= FAST_FLICK_THRESHOLD) {
+      const nextIdx = goingUp ? Math.min(snaps.length - 1, currentIdx + 1) : goingDown ? Math.max(0, currentIdx - 1) : currentIdx;
+      const candidate = snaps[nextIdx];
+      return enforcePersistent(candidate.id, snaps);
+    }
+    const projectedHeight = baselineHeight + delta;
+    let bestId = snaps[0].id;
+    let bestDist = Number.POSITIVE_INFINITY;
+    for (const s of snaps) {
+      const dist = Math.abs(resolveHeightPx(s.height) - projectedHeight);
+      if (dist < bestDist) {
+        bestDist = dist;
+        bestId = s.id;
+      }
+    }
+    return enforcePersistent(bestId, snaps);
+  }
+  function enforcePersistent(candidate, snaps) {
+    if (!persistent?.value) return candidate;
+    if (candidate !== "closed") return candidate;
+    const fallback = snaps.find(s => s.id !== "closed" && resolveHeightPx(s.height) > 0);
+    return fallback ? fallback.id : candidate;
+  }
+  function snapTo(id) {
+    const snaps = sortedSnaps.value;
+    const target = enforcePersistent(id, snaps);
+    if (snaps.some(s => s.id === target)) {
+      currentSnap.value = target;
+      dragOffset.value = 0;
+    }
+  }
+  function dismiss() {
+    snapTo("closed");
+  }
+  function onPointerDown(e) {
+    if (disabled?.value) return;
+    const target = handle.value;
+    if (!target) return;
+    activePointer = e.pointerId;
+    startY = e.clientY;
+    startTime = e.timeStamp;
+    baselineHeight = currentSnapHeight.value;
+    dragOffset.value = 0;
+    isDragging.value = true;
+    try {
+      target.setPointerCapture(e.pointerId);
+    } catch {}
+  }
+  function onPointerMove(e) {
+    if (!isDragging.value || activePointer !== e.pointerId) return;
+    if (e.cancelable) e.preventDefault();
+    const delta = startY - e.clientY;
+    dragOffset.value = delta;
+  }
+  function onPointerUp(e) {
+    if (!isDragging.value || activePointer !== e.pointerId) return;
+    const delta = startY - e.clientY;
+    const dt = Math.max(1, e.timeStamp - startTime);
+    const velocity = delta / dt;
+    try {
+      handle.value?.releasePointerCapture(e.pointerId);
+    } catch {}
+    const next = resolveSnap(delta, velocity);
+    currentSnap.value = next;
+    dragOffset.value = 0;
+    isDragging.value = false;
+    activePointer = null;
+  }
+  function onPointerCancel() {
+    dragOffset.value = 0;
+    isDragging.value = false;
+    activePointer = null;
+  }
+  function bind() {
+    const target = handle.value;
+    if (!target) return;
+    target.addEventListener("pointerdown", onPointerDown, {
+      passive: false
+    });
+    target.addEventListener("pointermove", onPointerMove, {
+      passive: false
+    });
+    target.addEventListener("pointerup", onPointerUp, {
+      passive: false
+    });
+    target.addEventListener("pointercancel", onPointerCancel, {
+      passive: false
+    });
+    target.addEventListener("pointerleave", onPointerCancel, {
+      passive: false
+    });
+  }
+  function unbind() {
+    const target = handle.value;
+    if (!target) return;
+    target.removeEventListener("pointerdown", onPointerDown);
+    target.removeEventListener("pointermove", onPointerMove);
+    target.removeEventListener("pointerup", onPointerUp);
+    target.removeEventListener("pointercancel", onPointerCancel);
+    target.removeEventListener("pointerleave", onPointerCancel);
+  }
+  (0, _vue.onMounted)(() => {
+    bind();
+  });
+  (0, _vue.watch)(handle, (next, prev) => {
+    if (prev) {
+      prev.removeEventListener("pointerdown", onPointerDown);
+      prev.removeEventListener("pointermove", onPointerMove);
+      prev.removeEventListener("pointerup", onPointerUp);
+      prev.removeEventListener("pointercancel", onPointerCancel);
+      prev.removeEventListener("pointerleave", onPointerCancel);
+    }
+    if (next) bind();
+  });
+  (0, _vue.onBeforeUnmount)(() => {
+    unbind();
+  });
+  void el;
+  return {
+    currentSnap,
+    dragOffset,
+    isDragging,
+    snapTo,
+    dismiss,
+    currentSnapHeight
+  };
+}

package/dist/src/composables/Sheet/sheetSwipe.composable.d.ts

@@ -0,0 +1,26 @@
+import type { ISheetSwipeOptions, ISheetSwipeReturn } from '../../interfaces';
+export { DEFAULT_SHEET_SNAP_POINTS } from '../../consts';
+/**
+ * Bottom-sheet swipe gesture composable.
+ *
+ * Encapsulates pointerdown → pointermove → pointerup tracking, exposes
+ * a reactive `currentSnap` plus live drag offset, and snaps to the
+ * nearest point on release using either velocity (fast flick) or
+ * absolute distance (slow drag). Pointer events cover both mouse and
+ * touch, so the same code path drives the desktop story and the mobile
+ * device.
+ *
+ * Contract:
+ * - Only the **handle** receives pointer events. The rest of the sheet
+ *   stays interactive (lists scroll, buttons click) — exactly like the
+ *   Material 3 / iOS sheet patterns.
+ * - During a drag we set `transition: none` via the `isDragging` flag so
+ *   the user sees 1:1 finger tracking. On release we restore the
+ *   transition and animate to the resolved snap.
+ * - `persistent` blocks the `closed` snap; the gesture falls back to
+ *   the next-lowest snap point.
+ */
+/*********************************************************
+ * useSheetSwipe
+ ********************************************************/
+export declare function useSheetSwipe(options: ISheetSwipeOptions): ISheetSwipeReturn;

package/dist/src/composables/Sheet/sheetSwipe.composable.js

@@ -0,0 +1,194 @@
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  shallowRef,
+  watch
+} from "vue";
+import { DEFAULT_SHEET_SNAP_POINTS } from "../../consts/index.js";
+export { DEFAULT_SHEET_SNAP_POINTS } from "../../consts/index.js";
+const FAST_FLICK_THRESHOLD = 0.5;
+function resolveHeightPx(height) {
+  if (typeof height === "number") return height;
+  if (typeof window === "undefined") return 0;
+  const value = String(height).trim();
+  const match = value.match(/^([\d.]+)(px|vh|vw|%|rem|em)?$/i);
+  if (!match) return 0;
+  const num = parseFloat(match[1]);
+  const unit = (match[2] ?? "px").toLowerCase();
+  switch (unit) {
+    case "px":
+      return num;
+    // For a bottom-sheet, `vh`, `%` and `vw` all map to viewport
+    // height — `%` is the conventional shorthand designers reach for
+    // even though strictly speaking a percentage on `height` resolves
+    // against the parent. We expose `vh` as the canonical unit and
+    // treat % the same way; documented in the prop's TSDoc.
+    case "vh":
+    case "%":
+      return window.innerHeight * num / 100;
+    case "vw":
+      return window.innerWidth * num / 100;
+    case "rem":
+    case "em": {
+      const root = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+      return num * root;
+    }
+    default:
+      return num;
+  }
+}
+export function useSheetSwipe(options) {
+  const {
+    el,
+    handle,
+    snapPoints,
+    defaultSnap,
+    disabled,
+    persistent
+  } = options;
+  const sortedSnaps = computed(() => {
+    const src = snapPoints?.value ?? DEFAULT_SHEET_SNAP_POINTS;
+    return [...src].sort((a, b) => resolveHeightPx(a.height) - resolveHeightPx(b.height));
+  });
+  const currentSnap = ref(defaultSnap?.value ?? "half");
+  const currentSnapHeight = computed(() => {
+    const snap = sortedSnaps.value.find((s) => s.id === currentSnap.value) ?? sortedSnaps.value[Math.floor(sortedSnaps.value.length / 2)];
+    return resolveHeightPx(snap?.height ?? 0);
+  });
+  const dragOffset = shallowRef(0);
+  const isDragging = shallowRef(false);
+  watch(() => defaultSnap?.value, (next) => {
+    if (next && next !== currentSnap.value) currentSnap.value = next;
+  });
+  let startY = 0;
+  let startTime = 0;
+  let baselineHeight = 0;
+  let activePointer = null;
+  function resolveSnap(delta, velocity) {
+    const snaps = sortedSnaps.value;
+    if (snaps.length === 0) return currentSnap.value;
+    const currentIdx = Math.max(0, snaps.findIndex((s) => s.id === currentSnap.value));
+    const goingUp = velocity > 0;
+    const goingDown = velocity < 0;
+    const speed = Math.abs(velocity);
+    if (speed >= FAST_FLICK_THRESHOLD) {
+      const nextIdx = goingUp ? Math.min(snaps.length - 1, currentIdx + 1) : goingDown ? Math.max(0, currentIdx - 1) : currentIdx;
+      const candidate = snaps[nextIdx];
+      return enforcePersistent(candidate.id, snaps);
+    }
+    const projectedHeight = baselineHeight + delta;
+    let bestId = snaps[0].id;
+    let bestDist = Number.POSITIVE_INFINITY;
+    for (const s of snaps) {
+      const dist = Math.abs(resolveHeightPx(s.height) - projectedHeight);
+      if (dist < bestDist) {
+        bestDist = dist;
+        bestId = s.id;
+      }
+    }
+    return enforcePersistent(bestId, snaps);
+  }
+  function enforcePersistent(candidate, snaps) {
+    if (!persistent?.value) return candidate;
+    if (candidate !== "closed") return candidate;
+    const fallback = snaps.find((s) => s.id !== "closed" && resolveHeightPx(s.height) > 0);
+    return fallback ? fallback.id : candidate;
+  }
+  function snapTo(id) {
+    const snaps = sortedSnaps.value;
+    const target = enforcePersistent(id, snaps);
+    if (snaps.some((s) => s.id === target)) {
+      currentSnap.value = target;
+      dragOffset.value = 0;
+    }
+  }
+  function dismiss() {
+    snapTo("closed");
+  }
+  function onPointerDown(e) {
+    if (disabled?.value) return;
+    const target = handle.value;
+    if (!target) return;
+    activePointer = e.pointerId;
+    startY = e.clientY;
+    startTime = e.timeStamp;
+    baselineHeight = currentSnapHeight.value;
+    dragOffset.value = 0;
+    isDragging.value = true;
+    try {
+      target.setPointerCapture(e.pointerId);
+    } catch {
+    }
+  }
+  function onPointerMove(e) {
+    if (!isDragging.value || activePointer !== e.pointerId) return;
+    if (e.cancelable) e.preventDefault();
+    const delta = startY - e.clientY;
+    dragOffset.value = delta;
+  }
+  function onPointerUp(e) {
+    if (!isDragging.value || activePointer !== e.pointerId) return;
+    const delta = startY - e.clientY;
+    const dt = Math.max(1, e.timeStamp - startTime);
+    const velocity = delta / dt;
+    try {
+      handle.value?.releasePointerCapture(e.pointerId);
+    } catch {
+    }
+    const next = resolveSnap(delta, velocity);
+    currentSnap.value = next;
+    dragOffset.value = 0;
+    isDragging.value = false;
+    activePointer = null;
+  }
+  function onPointerCancel() {
+    dragOffset.value = 0;
+    isDragging.value = false;
+    activePointer = null;
+  }
+  function bind() {
+    const target = handle.value;
+    if (!target) return;
+    target.addEventListener("pointerdown", onPointerDown, { passive: false });
+    target.addEventListener("pointermove", onPointerMove, { passive: false });
+    target.addEventListener("pointerup", onPointerUp, { passive: false });
+    target.addEventListener("pointercancel", onPointerCancel, { passive: false });
+    target.addEventListener("pointerleave", onPointerCancel, { passive: false });
+  }
+  function unbind() {
+    const target = handle.value;
+    if (!target) return;
+    target.removeEventListener("pointerdown", onPointerDown);
+    target.removeEventListener("pointermove", onPointerMove);
+    target.removeEventListener("pointerup", onPointerUp);
+    target.removeEventListener("pointercancel", onPointerCancel);
+    target.removeEventListener("pointerleave", onPointerCancel);
+  }
+  onMounted(() => {
+    bind();
+  });
+  watch(handle, (next, prev) => {
+    if (prev) {
+      prev.removeEventListener("pointerdown", onPointerDown);
+      prev.removeEventListener("pointermove", onPointerMove);
+      prev.removeEventListener("pointerup", onPointerUp);
+      prev.removeEventListener("pointercancel", onPointerCancel);
+      prev.removeEventListener("pointerleave", onPointerCancel);
+    }
+    if (next) bind();
+  });
+  onBeforeUnmount(() => {
+    unbind();
+  });
+  void el;
+  return {
+    currentSnap,
+    dragOffset,
+    isDragging,
+    snapTo,
+    dismiss,
+    currentSnapHeight
+  };
+}

package/dist/src/composables/SliderField/slider-field.composable.d.ts

@@ -1,4 +1,7 @@
 import type { ISliderField, ISliderFieldProps, ISliderFieldProvide } from '../../interfaces';
+/*********************************************************
+ * useSteps
+ ********************************************************/
 export declare function useSteps(props: ISliderFieldProps): {
     min: import("vue").ComputedRef<number>;
     max: import("vue").ComputedRef<number>;
@@ -6,4 +9,7 @@ export declare function useSteps(props: ISliderFieldProps): {
     decimals: import("vue").ComputedRef<number>;
     roundValue: (value: string | number) => number;
 };
+/*********************************************************
+ * useSlider
+ ********************************************************/
 export declare function useSlider({ origamSliderFieldTrackRef, origamSliderFieldThumbRef, origamSliderFieldStartThumbRef, origamSliderFieldStopThumbRef, props, steps, onSliderStart, onSliderMove, onSliderEnd, getActiveThumb }: ISliderField): ISliderFieldProvide;

package/dist/src/composables/Snackbar/snackbar.composable.d.ts

@@ -1,3 +1,6 @@
+/*********************************************************
+ * useCountdown
+ ********************************************************/
 export declare function useCountdown(milliseconds: number): {
     clear: () => void;
     time: import("vue").ShallowRef<number, number>;

package/dist/src/composables/SnackbarStack/snackbar-stack.composable.cjs

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resetSnackbarStackForTesting = resetSnackbarStackForTesting;
+exports.useSnackbarStack = useSnackbarStack;
+exports.useSnackbarStackInternal = useSnackbarStackInternal;
+var _vue = require("vue");
+var _consts = require("../../consts/index.cjs");
+const STORES = /* @__PURE__ */new Map();
+const getStore = id => {
+  let store = STORES.get(id);
+  if (!store) {
+    store = {
+      items: (0, _vue.ref)([]),
+      timers: /* @__PURE__ */new Map(),
+      counter: {
+        current: 0
+      }
+    };
+    STORES.set(id, store);
+  }
+  return store;
+};
+const generateId = state => {
+  state.counter.current += 1;
+  return `origam-snackbar-stack-item-${state.counter.current}`;
+};
+const clearTimer = (state, itemId) => {
+  const handle = state.timers.get(itemId);
+  if (handle !== void 0) {
+    if (typeof window !== "undefined") window.clearTimeout(handle);
+    state.timers.delete(itemId);
+  }
+};
+function useSnackbarStack(options = {}) {
+  const id = options.id ?? _consts.SNACKBAR_STACK_DEFAULT_ID;
+  const state = getStore(id);
+  const dismiss = itemId => {
+    const index = state.items.value.findIndex(item => item.id === itemId);
+    if (index === -1) return;
+    const [removed] = state.items.value.splice(index, 1);
+    clearTimer(state, itemId);
+    removed?.onDismiss?.();
+  };
+  const scheduleAutoDismiss = (itemId, duration) => {
+    if (duration <= 0) return;
+    if (typeof window === "undefined") return;
+    const handle = window.setTimeout(() => {
+      dismiss(itemId);
+    }, duration);
+    state.timers.set(itemId, handle);
+  };
+  const notify = opts => {
+    const itemId = generateId(state);
+    const duration = opts.duration ?? options.defaultDuration ?? _consts.SNACKBAR_STACK_DEFAULT_DURATION;
+    const item = {
+      ...opts,
+      id: itemId,
+      createdAt: Date.now()
+    };
+    state.items.value.push(item);
+    if (options.max != null && state.items.value.length > options.max) {
+      const evicted = state.items.value.shift();
+      if (evicted) {
+        clearTimer(state, evicted.id);
+        evicted.onDismiss?.();
+      }
+    }
+    scheduleAutoDismiss(itemId, duration);
+    return itemId;
+  };
+  const dismissAll = () => {
+    const ids = state.items.value.map(item => item.id);
+    ids.forEach(dismiss);
+  };
+  return {
+    items: (0, _vue.readonly)(state.items),
+    notify,
+    dismiss,
+    dismissAll
+  };
+}
+function useSnackbarStackInternal(id = _consts.SNACKBAR_STACK_DEFAULT_ID) {
+  const state = getStore(id);
+  return {
+    rawItems: state.items,
+    itemCount: (0, _vue.computed)(() => state.items.value.length)
+  };
+}
+function resetSnackbarStackForTesting() {
+  STORES.forEach(state => {
+    state.timers.forEach(handle => {
+      if (typeof window !== "undefined") window.clearTimeout(handle);
+    });
+    state.timers.clear();
+    state.items.value = [];
+    state.counter.current = 0;
+  });
+  STORES.clear();
+}

package/dist/src/composables/SnackbarStack/snackbar-stack.composable.d.ts

@@ -0,0 +1,58 @@
+import { type Ref } from 'vue';
+import type { ISnackbarStackItem, ISnackbarStackItemOptions } from '../../interfaces';
+/*********************************************************
+ * useSnackbarStack
+ *
+ * @description
+ * Public API. Returns an interface to push / pop items
+ * from a named stack. The returned `items` ref is the
+ * same reactive reference shared with the matching
+ * `<OrigamSnackbarStack id="…">` instance, so direct
+ * mutation outside of `notify` / `dismiss` is discouraged.
+ ********************************************************/
+export interface IUseSnackbarStackOptions {
+    id?: string;
+    /**
+     * Maximum number of items kept in the stack. When `notify` would
+     * push past this number, the oldest item is evicted FIFO. When
+     * undefined, the stack is unbounded (the rendering component
+     * still caps the visible count via its `max` prop).
+     */
+    max?: number;
+    /**
+     * Fallback `duration` applied to items that omit their own.
+     * Defaults to `SNACKBAR_STACK_DEFAULT_DURATION` (5 000 ms).
+     */
+    defaultDuration?: number;
+}
+export interface IUseSnackbarStackReturn {
+    items: Readonly<Ref<ReadonlyArray<ISnackbarStackItem>>>;
+    notify: (opts: ISnackbarStackItemOptions) => string;
+    dismiss: (itemId: string) => void;
+    dismissAll: () => void;
+}
+export declare function useSnackbarStack(options?: IUseSnackbarStackOptions): IUseSnackbarStackReturn;
+/*********************************************************
+ * Internal helper for the host component
+ *
+ * @description
+ * `<OrigamSnackbarStack>` needs a *writable* ref to the
+ * items list (it reads them to render and the composable
+ * mutates them). Exposed under a separate name so the
+ * public `useSnackbarStack` API stays read-only on
+ * `items`. Components outside the library should never
+ * import this.
+ ********************************************************/
+export declare function useSnackbarStackInternal(id?: string): {
+    rawItems: Ref<ISnackbarStackItem[], ISnackbarStackItem[]>;
+    itemCount: import("vue").ComputedRef<number>;
+};
+/*********************************************************
+ * Test helper
+ *
+ * @description
+ * Vitest needs to wipe the singleton between specs so that
+ * counters / timers do not leak across tests. Not part of
+ * the public surface — do not import in product code.
+ ********************************************************/
+export declare function resetSnackbarStackForTesting(): void;