origam 2.3.0 → 2.6.1

package/dist/src/composables/Calendar/calendar.composable.js

@@ -0,0 +1,182 @@
+import { computed } from "vue";
+import {
+  addDays,
+  addMonths,
+  addWeeks,
+  buildMonthMatrix,
+  diffMinutes,
+  endOfMonth,
+  endOfWeekFixed,
+  isAfter,
+  isBefore,
+  isSameDay,
+  isSameMonth,
+  startOfDay,
+  startOfMonth,
+  startOfWeekFixed,
+  toDate
+} from "../../utils/Calendar/date.util.js";
+import { expandRecurrence } from "../../utils/Calendar/rrule.util.js";
+const NAVIGATION_STEP = {
+  month: (date, direction) => addMonths(date, direction),
+  week: (date, direction) => addWeeks(date, direction),
+  day: (date, direction) => addDays(date, direction),
+  agenda: (date, direction) => addMonths(date, direction)
+};
+export function useCalendar(options, setView, setCurrentDate) {
+  const visibleDateRange = computed(() => {
+    const view = options.view();
+    const date = options.currentDate();
+    const firstDayOfWeek = options.firstDayOfWeek();
+    switch (view) {
+      case "month":
+      case "agenda": {
+        const monthStart = startOfMonth(date);
+        const gridStart = startOfWeekFixed(monthStart, firstDayOfWeek);
+        const gridEnd = addDays(gridStart, 6 * 7 - 1);
+        return { start: gridStart, end: gridEnd };
+      }
+      case "week":
+        return {
+          start: startOfWeekFixed(date, firstDayOfWeek),
+          end: endOfWeekFixed(date, firstDayOfWeek)
+        };
+      case "day":
+      default: {
+        const start = startOfDay(date);
+        const end = new Date(start);
+        end.setHours(23, 59, 59, 999);
+        return { start, end };
+      }
+    }
+  });
+  const expandedEvents = computed(() => {
+    const range = visibleDateRange.value;
+    const raw = options.events();
+    const out = [];
+    for (const event of raw) {
+      for (const occ of expandRecurrence(event, range)) {
+        out.push(occ);
+      }
+    }
+    out.sort((a, b) => {
+      const aTime = toDate(a.start)?.getTime() ?? 0;
+      const bTime = toDate(b.start)?.getTime() ?? 0;
+      if (aTime !== bTime) return aTime - bTime;
+      return String(a.id).localeCompare(String(b.id));
+    });
+    return out;
+  });
+  function navigate(direction) {
+    const view = options.view();
+    const current = options.currentDate();
+    let next;
+    if (direction === "today") {
+      next = /* @__PURE__ */ new Date();
+    } else {
+      const step = direction === "next" ? 1 : -1;
+      next = NAVIGATION_STEP[view](current, step);
+    }
+    const min = options.minDate?.() ?? null;
+    const max = options.maxDate?.() ?? null;
+    if (min && isBefore(next, min)) next = new Date(min.getTime());
+    if (max && isAfter(next, max)) next = new Date(max.getTime());
+    setCurrentDate?.(next);
+  }
+  function setViewProxy(next) {
+    setView?.(next);
+  }
+  function buildMonthGrid(date) {
+    return buildMonthMatrix(date, options.firstDayOfWeek());
+  }
+  function buildDayGrid(date) {
+    const startHour = options.dayStartHour();
+    const endHour = options.dayEndHour();
+    const slotDuration = options.slotDuration();
+    const slots = [];
+    const base = startOfDay(date);
+    const totalMinutes = (endHour - startHour) * 60;
+    for (let offsetMin = 0; offsetMin < totalMinutes; offsetMin += slotDuration) {
+      const slotDate = new Date(base);
+      slotDate.setHours(startHour, 0, 0, 0);
+      slotDate.setMinutes(slotDate.getMinutes() + offsetMin);
+      slots.push({
+        date: slotDate,
+        durationMin: slotDuration,
+        isHourMark: slotDate.getMinutes() === 0
+      });
+    }
+    return slots;
+  }
+  function buildWeekGrid(date) {
+    const firstDayOfWeek = options.firstDayOfWeek();
+    const start = startOfWeekFixed(date, firstDayOfWeek);
+    const columns = [];
+    for (let i = 0; i < 7; i++) {
+      columns.push(buildDayGrid(addDays(start, i)));
+    }
+    return columns;
+  }
+  function buildAgenda(range) {
+    const effectiveRange = range ?? visibleDateRange.value;
+    const map = /* @__PURE__ */ new Map();
+    for (const event of expandedEvents.value) {
+      const start = toDate(event.start);
+      if (!start) continue;
+      if (start.getTime() < effectiveRange.start.getTime()) continue;
+      if (start.getTime() > effectiveRange.end.getTime()) continue;
+      const key = `${start.getFullYear()}-${start.getMonth()}-${start.getDate()}`;
+      if (!map.has(key)) {
+        map.set(key, { date: startOfDay(start), events: [] });
+      }
+      map.get(key).events.push(event);
+    }
+    return [...map.values()].sort(
+      (a, b) => a.date.getTime() - b.date.getTime()
+    );
+  }
+  function eventsOnDay(day) {
+    return expandedEvents.value.filter((event) => {
+      const start = toDate(event.start);
+      if (!start) return false;
+      const end = event.end ? toDate(event.end) : start;
+      if (!end) return false;
+      return isSameDay(start, day) || isSameDay(end, day) || isBefore(start, day) && isAfter(end, day);
+    });
+  }
+  function positionEvent(event, dayStart, pxPerMin) {
+    const start = toDate(event.start);
+    if (!start) return null;
+    const end = event.end ? toDate(event.end) : new Date(start.getTime() + 30 * 6e4);
+    if (!end) return null;
+    const top = Math.max(0, diffMinutes(dayStart, start) * pxPerMin);
+    const height = Math.max(pxPerMin * 15, diffMinutes(start, end) * pxPerMin);
+    return { top, height };
+  }
+  return {
+    visibleDateRange,
+    expandedEvents,
+    navigate,
+    setView: setViewProxy,
+    buildMonthGrid,
+    buildWeekGrid,
+    buildDayGrid,
+    buildAgenda,
+    eventsOnDay,
+    positionEvent,
+    // Re-export low-level helpers so consumers don't have to
+    // import them separately when extending the calendar surface.
+    helpers: {
+      isSameDay,
+      isSameMonth,
+      startOfDay,
+      startOfMonth,
+      endOfMonth,
+      addDays,
+      addMonths,
+      addWeeks,
+      diffMinutes,
+      toDate
+    }
+  };
+}

package/dist/src/composables/Chart/chart-gauge.composable.cjs

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartGauge = void 0;
+var _vue = require("vue");
+var _path = require("../../utils/Chart/path.util.cjs");
+const DEFAULT_START_ANGLE = -Math.PI * 3 / 4;
+const DEFAULT_END_ANGLE = Math.PI * 3 / 4;
+const DEFAULT_THICKNESS = 18;
+const useChartGauge = options => {
+  const geometry = (0, _vue.computed)(() => {
+    const width = options.width();
+    const height = options.height();
+    const padding = options.padding();
+    const min = options.min();
+    const max = options.max();
+    const value = options.value();
+    const thickness = Math.max(1, options.thickness?.() ?? DEFAULT_THICKNESS);
+    const startAngle = options.startAngle?.() ?? DEFAULT_START_ANGLE;
+    const endAngle = options.endAngle?.() ?? DEFAULT_END_ANGLE;
+    const cx = (padding.left + width - padding.right) / 2;
+    const cy = (padding.top + height - padding.bottom) / 2;
+    const availableW = width - padding.left - padding.right;
+    const availableH = height - padding.top - padding.bottom;
+    const outerR = Math.max(thickness, Math.min(availableW, availableH) / 2 - 4);
+    const innerR = Math.max(0, outerR - thickness);
+    const span = Math.max(1e-9, max - min);
+    const clamped = Math.max(min, Math.min(max, value));
+    const ratio = (clamped - min) / span;
+    const sweep = endAngle - startAngle;
+    const valueAngle = startAngle + ratio * sweep;
+    const trackD = (0, _path.arcPath)(cx, cy, outerR, innerR, startAngle, endAngle);
+    const valueD = ratio > 1e-6 ? (0, _path.arcPath)(cx, cy, outerR, innerR, startAngle, valueAngle) : "";
+    return {
+      trackPath: trackD,
+      valuePath: valueD,
+      valueAngle,
+      startAngle,
+      endAngle,
+      outerRadius: outerR,
+      innerRadius: innerR,
+      centerX: cx,
+      centerY: cy,
+      ratio,
+      clampedValue: clamped
+    };
+  });
+  return {
+    geometry
+  };
+};
+exports.useChartGauge = useChartGauge;

package/dist/src/composables/Chart/chart-gauge.composable.d.ts

@@ -0,0 +1,21 @@
+import { type ComputedRef } from 'vue';
+import type { IChartGaugeGeometry, IUseChartGaugeOptions } from '../../interfaces';
+/**
+ * Solid-gauge geometry engine. Given a `value` clamped between
+ * `min` and `max`, produces:
+ *
+ * - `trackPath` — the empty arc behind the indicator (full sweep).
+ * - `valuePath` — the filled arc from `min` to `value` (partial sweep).
+ * - `valueAngle` — the radian angle of the indicator end (for the
+ *   needle / handle if needed later).
+ * - `centerX` / `centerY` — pivot point used by the value label.
+ * - `outerRadius` / `innerRadius` — sized from the available plot
+ *   box minus the gauge thickness.
+ *
+ * The composable is intentionally framework-agnostic in spirit:
+ * inputs are thunks so `<OrigamChartGauge>` can drive it from
+ * props OR a Pinia store without re-instantiating.
+ */
+export declare const useChartGauge: (options: IUseChartGaugeOptions) => {
+    geometry: ComputedRef<IChartGaugeGeometry>;
+};

package/dist/src/composables/Chart/chart-gauge.composable.js

@@ -0,0 +1,47 @@
+import {
+  computed
+} from "vue";
+import { arcPath } from "../../utils/Chart/path.util.js";
+const DEFAULT_START_ANGLE = -Math.PI * 3 / 4;
+const DEFAULT_END_ANGLE = Math.PI * 3 / 4;
+const DEFAULT_THICKNESS = 18;
+export const useChartGauge = (options) => {
+  const geometry = computed(() => {
+    const width = options.width();
+    const height = options.height();
+    const padding = options.padding();
+    const min = options.min();
+    const max = options.max();
+    const value = options.value();
+    const thickness = Math.max(1, options.thickness?.() ?? DEFAULT_THICKNESS);
+    const startAngle = options.startAngle?.() ?? DEFAULT_START_ANGLE;
+    const endAngle = options.endAngle?.() ?? DEFAULT_END_ANGLE;
+    const cx = (padding.left + width - padding.right) / 2;
+    const cy = (padding.top + height - padding.bottom) / 2;
+    const availableW = width - padding.left - padding.right;
+    const availableH = height - padding.top - padding.bottom;
+    const outerR = Math.max(thickness, Math.min(availableW, availableH) / 2 - 4);
+    const innerR = Math.max(0, outerR - thickness);
+    const span = Math.max(1e-9, max - min);
+    const clamped = Math.max(min, Math.min(max, value));
+    const ratio = (clamped - min) / span;
+    const sweep = endAngle - startAngle;
+    const valueAngle = startAngle + ratio * sweep;
+    const trackD = arcPath(cx, cy, outerR, innerR, startAngle, endAngle);
+    const valueD = ratio > 1e-6 ? arcPath(cx, cy, outerR, innerR, startAngle, valueAngle) : "";
+    return {
+      trackPath: trackD,
+      valuePath: valueD,
+      valueAngle,
+      startAngle,
+      endAngle,
+      outerRadius: outerR,
+      innerRadius: innerR,
+      centerX: cx,
+      centerY: cy,
+      ratio,
+      clampedValue: clamped
+    };
+  });
+  return { geometry };
+};

package/dist/src/composables/Chart/chart-header-typography.composable.cjs

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartHeaderTypography = useChartHeaderTypography;
+var _vue = require("vue");
+var _typography = require("../Commons/typography.composable.cjs");
+function useChartHeaderTypography(props) {
+  const {
+    typographyStyles: titleTypographyStyles
+  } = (0, _typography.useTypography)(props, "chart__title");
+  const {
+    typographyStyles: subtitleTypographyStyles
+  } = (0, _typography.useTypography)(props, "chart__subtitle");
+  const headerTypographyStyles = (0, _vue.computed)(() => [titleTypographyStyles.value, subtitleTypographyStyles.value]);
+  return {
+    headerTypographyStyles
+  };
+}

package/dist/src/composables/Chart/chart-header-typography.composable.d.ts

@@ -0,0 +1,27 @@
+import type { StyleValue } from 'vue';
+import type { ITypographyProps } from '../../interfaces';
+/**
+ * useChartHeaderTypography — applies the shared `ITypographyProps` surface to a
+ * chart's header (title + subtitle) at once.
+ *
+ * Both the title and subtitle `<text>` of every chart read the GLOBAL
+ * `--origam-chart__title---*` / `--origam-chart__subtitle---*` variables (their
+ * per-type element classes — `chart-gauge__title`, `chart-cartesian__title`, …
+ * — all reference the same shared vars in SCSS). So the returned styles are
+ * bound on the chart ROOT element and cascade down to those descendant `<text>`
+ * nodes; no per-element binding is needed.
+ *
+ * Effective props on SVG `<text>`: **fontSize + fontWeight** only (title reads
+ * both, subtitle reads font-size). `fontFamily` / `lineHeight` / `letterSpacing`
+ * are part of the surface but inert on charts — no SCSS rule reads them, and
+ * `line-height` is not even a valid SVG `<text>` property. See the chart
+ * typography recipe.
+ *
+ * @example
+ * // in a chart component:
+ * const { headerTypographyStyles } = useChartHeaderTypography(props)
+ * // template root: :style="[rootStyles, …, headerTypographyStyles]"
+ */
+export declare function useChartHeaderTypography(props: ITypographyProps): {
+    headerTypographyStyles: import("vue").ComputedRef<StyleValue>;
+};

package/dist/src/composables/Chart/chart-header-typography.composable.js

@@ -0,0 +1,11 @@
+import { computed } from "vue";
+import { useTypography } from "../Commons/typography.composable.js";
+export function useChartHeaderTypography(props) {
+  const { typographyStyles: titleTypographyStyles } = useTypography(props, "chart__title");
+  const { typographyStyles: subtitleTypographyStyles } = useTypography(props, "chart__subtitle");
+  const headerTypographyStyles = computed(() => [
+    titleTypographyStyles.value,
+    subtitleTypographyStyles.value
+  ]);
+  return { headerTypographyStyles };
+}

package/dist/src/composables/Chart/chart-zoom.composable.cjs

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartZoom = useChartZoom;
+var _vue = require("vue");
+const MIN_VISIBLE_CATEGORIES = 2;
+const WHEEL_ZOOM_STEP = 0.15;
+function useChartZoom(options) {
+  const zoomStart = (0, _vue.ref)(0);
+  const zoomEnd = (0, _vue.ref)(Infinity);
+  const isDragging = (0, _vue.ref)(false);
+  const dragStartPx = (0, _vue.ref)(null);
+  const dragEndPx = (0, _vue.ref)(null);
+  const isZoomed = (0, _vue.computed)(() => {
+    const len = options.dataLength();
+    return zoomStart.value > 0 || zoomEnd.value < len - 1 && Number.isFinite(zoomEnd.value);
+  });
+  const effectiveEnd = (0, _vue.computed)(() => {
+    const len = options.dataLength();
+    return Number.isFinite(zoomEnd.value) ? Math.min(zoomEnd.value, len - 1) : Math.max(0, len - 1);
+  });
+  const applyZoom = (start, end) => {
+    const len = options.dataLength();
+    if (len <= 0) return;
+    const maxIdx = len - 1;
+    let s = Math.max(0, Math.min(start, maxIdx));
+    let e = Math.max(0, Math.min(end, maxIdx));
+    if (s > e) [s, e] = [e, s];
+    if (e - s < MIN_VISIBLE_CATEGORIES - 1) {
+      e = Math.min(maxIdx, s + MIN_VISIBLE_CATEGORIES - 1);
+    }
+    zoomStart.value = Math.round(s);
+    zoomEnd.value = Math.round(e);
+  };
+  const zoomTo = (start, end) => {
+    applyZoom(start, end);
+  };
+  const zoomReset = () => {
+    zoomStart.value = 0;
+    zoomEnd.value = Infinity;
+  };
+  const zoomBy = (deltaFraction, anchorFraction) => {
+    const len = options.dataLength();
+    if (len <= 0) return;
+    const cur = effectiveEnd.value;
+    const visibleRange = cur - zoomStart.value;
+    if (visibleRange < MIN_VISIBLE_CATEGORIES - 1 && deltaFraction > 0) return;
+    const anchor = zoomStart.value + visibleRange * Math.max(0, Math.min(1, anchorFraction));
+    const newStart = anchor - (anchor - zoomStart.value) * (1 - deltaFraction);
+    const newEnd = anchor + (cur - anchor) * (1 - deltaFraction);
+    applyZoom(newStart, newEnd);
+  };
+  const panBy = deltaCategories => {
+    const len = options.dataLength();
+    if (len <= 0) return;
+    const cur = effectiveEnd.value;
+    const windowSize = cur - zoomStart.value;
+    const newStart = Math.max(0, Math.min(len - 1 - windowSize, zoomStart.value + deltaCategories));
+    applyZoom(newStart, newStart + windowSize);
+  };
+  const pxToCategoryIndex = (svgX, plotX0, plotX1) => {
+    const len = options.dataLength();
+    if (len <= 1) return 0;
+    const ratio = Math.max(0, Math.min(1, (svgX - plotX0) / Math.max(1, plotX1 - plotX0)));
+    const cur = effectiveEnd.value;
+    return zoomStart.value + ratio * (cur - zoomStart.value);
+  };
+  const categoryIndexToPx = (categoryIndex, plotX0, plotX1) => {
+    const cur = effectiveEnd.value;
+    const windowSize = Math.max(1, cur - zoomStart.value);
+    const ratio = (categoryIndex - zoomStart.value) / windowSize;
+    return plotX0 + ratio * (plotX1 - plotX0);
+  };
+  return {
+    zoomStart,
+    zoomEnd: effectiveEnd,
+    zoomEndRaw: zoomEnd,
+    isDragging,
+    dragStartPx,
+    dragEndPx,
+    isZoomed,
+    zoomTo,
+    zoomReset,
+    zoomBy,
+    panBy,
+    pxToCategoryIndex,
+    categoryIndexToPx,
+    WHEEL_ZOOM_STEP
+  };
+}

package/dist/src/composables/Chart/chart-zoom.composable.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Manages interactive zoom / pan state for `<OrigamChartCartesian>`.
+ *
+ * The zoom window is expressed as a closed `[zoomStart, zoomEnd]`
+ * range of **category indices** (integers). The engine clips the
+ * category array and re-computes the X scale against the visible
+ * subset before handing off to the path generator.
+ *
+ * Invariants maintained by every mutating method:
+ *   - `0 ≤ zoomStart < zoomEnd ≤ dataLength - 1`
+ *   - `zoomEnd - zoomStart ≥ MIN_VISIBLE_CATEGORIES - 1`
+ *
+ * @param options.dataLength  Reactive getter returning the total
+ *   number of categories (or data points when no categories array
+ *   is provided). Must always be ≥ 1.
+ */
+export declare function useChartZoom(options: {
+    dataLength: () => number;
+}): {
+    zoomStart: import("vue").Ref<number, number>;
+    zoomEnd: import("vue").ComputedRef<number>;
+    zoomEndRaw: import("vue").Ref<number, number>;
+    isDragging: import("vue").Ref<boolean, boolean>;
+    dragStartPx: import("vue").Ref<number | null, number | null>;
+    dragEndPx: import("vue").Ref<number | null, number | null>;
+    isZoomed: import("vue").ComputedRef<boolean>;
+    zoomTo: (start: number, end: number) => void;
+    zoomReset: () => void;
+    zoomBy: (deltaFraction: number, anchorFraction: number) => void;
+    panBy: (deltaCategories: number) => void;
+    pxToCategoryIndex: (svgX: number, plotX0: number, plotX1: number) => number;
+    categoryIndexToPx: (categoryIndex: number, plotX0: number, plotX1: number) => number;
+    WHEEL_ZOOM_STEP: number;
+};

package/dist/src/composables/Chart/chart-zoom.composable.js

@@ -0,0 +1,86 @@
+import { computed, ref } from "vue";
+const MIN_VISIBLE_CATEGORIES = 2;
+const WHEEL_ZOOM_STEP = 0.15;
+export function useChartZoom(options) {
+  const zoomStart = ref(0);
+  const zoomEnd = ref(Infinity);
+  const isDragging = ref(false);
+  const dragStartPx = ref(null);
+  const dragEndPx = ref(null);
+  const isZoomed = computed(() => {
+    const len = options.dataLength();
+    return zoomStart.value > 0 || zoomEnd.value < len - 1 && Number.isFinite(zoomEnd.value);
+  });
+  const effectiveEnd = computed(() => {
+    const len = options.dataLength();
+    return Number.isFinite(zoomEnd.value) ? Math.min(zoomEnd.value, len - 1) : Math.max(0, len - 1);
+  });
+  const applyZoom = (start, end) => {
+    const len = options.dataLength();
+    if (len <= 0) return;
+    const maxIdx = len - 1;
+    let s = Math.max(0, Math.min(start, maxIdx));
+    let e = Math.max(0, Math.min(end, maxIdx));
+    if (s > e) [s, e] = [e, s];
+    if (e - s < MIN_VISIBLE_CATEGORIES - 1) {
+      e = Math.min(maxIdx, s + MIN_VISIBLE_CATEGORIES - 1);
+    }
+    zoomStart.value = Math.round(s);
+    zoomEnd.value = Math.round(e);
+  };
+  const zoomTo = (start, end) => {
+    applyZoom(start, end);
+  };
+  const zoomReset = () => {
+    zoomStart.value = 0;
+    zoomEnd.value = Infinity;
+  };
+  const zoomBy = (deltaFraction, anchorFraction) => {
+    const len = options.dataLength();
+    if (len <= 0) return;
+    const cur = effectiveEnd.value;
+    const visibleRange = cur - zoomStart.value;
+    if (visibleRange < MIN_VISIBLE_CATEGORIES - 1 && deltaFraction > 0) return;
+    const anchor = zoomStart.value + visibleRange * Math.max(0, Math.min(1, anchorFraction));
+    const newStart = anchor - (anchor - zoomStart.value) * (1 - deltaFraction);
+    const newEnd = anchor + (cur - anchor) * (1 - deltaFraction);
+    applyZoom(newStart, newEnd);
+  };
+  const panBy = (deltaCategories) => {
+    const len = options.dataLength();
+    if (len <= 0) return;
+    const cur = effectiveEnd.value;
+    const windowSize = cur - zoomStart.value;
+    const newStart = Math.max(0, Math.min(len - 1 - windowSize, zoomStart.value + deltaCategories));
+    applyZoom(newStart, newStart + windowSize);
+  };
+  const pxToCategoryIndex = (svgX, plotX0, plotX1) => {
+    const len = options.dataLength();
+    if (len <= 1) return 0;
+    const ratio = Math.max(0, Math.min(1, (svgX - plotX0) / Math.max(1, plotX1 - plotX0)));
+    const cur = effectiveEnd.value;
+    return zoomStart.value + ratio * (cur - zoomStart.value);
+  };
+  const categoryIndexToPx = (categoryIndex, plotX0, plotX1) => {
+    const cur = effectiveEnd.value;
+    const windowSize = Math.max(1, cur - zoomStart.value);
+    const ratio = (categoryIndex - zoomStart.value) / windowSize;
+    return plotX0 + ratio * (plotX1 - plotX0);
+  };
+  return {
+    zoomStart,
+    zoomEnd: effectiveEnd,
+    zoomEndRaw: zoomEnd,
+    isDragging,
+    dragStartPx,
+    dragEndPx,
+    isZoomed,
+    zoomTo,
+    zoomReset,
+    zoomBy,
+    panBy,
+    pxToCategoryIndex,
+    categoryIndexToPx,
+    WHEEL_ZOOM_STEP
+  };
+}