origam 2.16.0 → 2.17.0

package/dist/src/composables/Commons/group.composable.js

@@ -1,72 +1,9 @@
-import {
-  computed,
-  inject,
-  onBeforeUnmount,
-  onMounted,
-  provide,
-  reactive,
-  toRef,
-  unref,
-  watch
-} from "vue";
-import { useVModel } from "../../composables/index.js";
-import {
-  consoleWarn,
-  findChildrenWithProvide,
-  getCurrentInstance,
-  getIds,
-  getItemIndex,
-  getUid,
-  getValues,
-  wrapInArray
-} from "../../utils/index.js";
-export function useGroupItem(props, injectKey, required = true) {
-  const vm = getCurrentInstance("useGroupItem");
-  if (!vm) {
-    throw new Error(
-      "[Origam] useGroupItem composable must be used inside a component setup function"
-    );
-  }
-  const id = getUid();
-  provide(/* @__PURE__ */ Symbol.for(`${injectKey.description}:id`), id);
-  const group = inject(injectKey, null);
-  if (!group) {
-    if (!required) return group;
-    throw new Error(`[Origam] Could not find useGroup injection with symbol ${injectKey.description}`);
-  }
-  const value = toRef(props, "value");
-  const disabled = computed(() => !!(group.disabled.value || props.disabled));
-  group.register({
-    id,
-    value,
-    disabled
-  }, vm);
-  onBeforeUnmount(() => {
-    group.unregister(id);
-  });
-  const isSelected = computed(() => {
-    return group.isSelected(id);
-  });
-  const selectedClass = computed(() => {
-    if (isSelected.value) {
-      return [group.selectedClass.value ? group.selectedClass.value : props.selectedClass];
-    }
-    return [];
-  });
-  watch(isSelected, (value2) => {
-    vm.emit("group:selected", { value: value2 });
-  });
-  return {
-    id,
-    isSelected,
-    toggle: () => group.select(id, !isSelected.value),
-    select: (value2) => group.select(id, value2),
-    selectedClass,
-    value,
-    disabled,
-    group
-  };
-}
+import { computed, onBeforeUnmount, onMounted, provide, reactive, toRef, unref } from "vue";
+import { useVModel } from "./vModel.composable.js";
+import { findChildrenWithProvide, wrapInArray } from "../../utils/Commons/commons.util.js";
+import { consoleWarn } from "../../utils/Commons/console.util.js";
+import { getCurrentInstance } from "../../utils/Commons/getCurrentInstance.util.js";
+import { getItemIndex, getIds, getValues } from "../../utils/Commons/group.util.js";
 export function useGroup(props, injectKey) {
   let isUnmounted = false;
   const items = reactive([]);

package/dist/src/composables/Commons/groupItem.composable.cjs

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGroupItem = useGroupItem;
+var _vue = require("vue");
+var _getCurrentInstance = require("../../utils/Commons/getCurrentInstance.util.cjs");
+let _groupItemId = 0;
+function useGroupItem(props, injectKey, required = true) {
+  const vm = (0, _getCurrentInstance.getCurrentInstance)("useGroupItem");
+  if (!vm) {
+    throw new Error("[Origam] useGroupItem composable must be used inside a component setup function");
+  }
+  const id = _groupItemId++;
+  (0, _vue.provide)(/* @__PURE__ */Symbol.for(`${injectKey.description}:id`), id);
+  const group = (0, _vue.inject)(injectKey, null);
+  if (!group) {
+    if (!required) return group;
+    throw new Error(`[Origam] Could not find useGroup injection with symbol ${injectKey.description}`);
+  }
+  const value = (0, _vue.toRef)(props, "value");
+  const disabled = (0, _vue.computed)(() => !!(group.disabled.value || props.disabled));
+  group.register({
+    id,
+    value,
+    disabled
+  }, vm);
+  (0, _vue.onBeforeUnmount)(() => {
+    group.unregister(id);
+  });
+  const isSelected = (0, _vue.computed)(() => {
+    return group.isSelected(id);
+  });
+  const selectedClass = (0, _vue.computed)(() => {
+    if (isSelected.value) {
+      return [group.selectedClass.value ? group.selectedClass.value : props.selectedClass];
+    }
+    return [];
+  });
+  (0, _vue.watch)(isSelected, value2 => {
+    vm.emit("group:selected", {
+      value: value2
+    });
+  });
+  return {
+    id,
+    isSelected,
+    toggle: () => group.select(id, !isSelected.value),
+    select: value2 => group.select(id, value2),
+    selectedClass,
+    value,
+    disabled,
+    group
+  };
+}

package/dist/src/composables/Commons/groupItem.composable.d.ts

@@ -0,0 +1,13 @@
+import type { InjectionKey } from 'vue';
+import type { IGroupItemProps, IGroupItemProvide, IGroupProvide } from '../../interfaces/Commons/group.interface';
+/*********************************************************
+ * useGroupItem
+ *
+ * @description
+ * Registers a single item (tab, chip, toggle button…) against the
+ * nearest `injectKey` group provided by `useGroup`.
+ * Independent from `useGroup` at the call level (no direct function
+ * dependency) — the two only share the `injectKey` provide/inject
+ * contract.
+ ********************************************************/
+export declare function useGroupItem(props: IGroupItemProps, injectKey: InjectionKey<IGroupProvide>, required?: boolean): IGroupItemProvide | null;

package/dist/src/composables/Commons/groupItem.composable.js

@@ -0,0 +1,50 @@
+import { computed, inject, onBeforeUnmount, provide, toRef, watch } from "vue";
+import { getCurrentInstance } from "../../utils/Commons/getCurrentInstance.util.js";
+let _groupItemId = 0;
+export function useGroupItem(props, injectKey, required = true) {
+  const vm = getCurrentInstance("useGroupItem");
+  if (!vm) {
+    throw new Error(
+      "[Origam] useGroupItem composable must be used inside a component setup function"
+    );
+  }
+  const id = _groupItemId++;
+  provide(/* @__PURE__ */ Symbol.for(`${injectKey.description}:id`), id);
+  const group = inject(injectKey, null);
+  if (!group) {
+    if (!required) return group;
+    throw new Error(`[Origam] Could not find useGroup injection with symbol ${injectKey.description}`);
+  }
+  const value = toRef(props, "value");
+  const disabled = computed(() => !!(group.disabled.value || props.disabled));
+  group.register({
+    id,
+    value,
+    disabled
+  }, vm);
+  onBeforeUnmount(() => {
+    group.unregister(id);
+  });
+  const isSelected = computed(() => {
+    return group.isSelected(id);
+  });
+  const selectedClass = computed(() => {
+    if (isSelected.value) {
+      return [group.selectedClass.value ? group.selectedClass.value : props.selectedClass];
+    }
+    return [];
+  });
+  watch(isSelected, (value2) => {
+    vm.emit("group:selected", { value: value2 });
+  });
+  return {
+    id,
+    isSelected,
+    toggle: () => group.select(id, !isSelected.value),
+    select: (value2) => group.select(id, value2),
+    selectedClass,
+    value,
+    disabled,
+    group
+  };
+}

package/dist/src/composables/Commons/groupSiblingLink.composable.cjs

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGroupSiblingLink = useGroupSiblingLink;
+var _vue = require("vue");
+var _commons = require("../../utils/Commons/commons.util.cjs");
+var _getCurrentInstance = require("../../utils/Commons/getCurrentInstance.util.cjs");
+function useGroupSiblingLink(ownKey, siblingKey) {
+  const vm = (0, _getCurrentInstance.getCurrentInstance)("useGroupSiblingLink");
+  const sibling = (0, _vue.shallowRef)(null);
+  (0, _vue.onMounted)(() => {
+    const parentSubTree = vm.parent?.subTree;
+    if (!parentSubTree) return;
+    const ownProviders = (0, _commons.findChildrenWithProvide)(ownKey, parentSubTree);
+    const siblingProviders = (0, _commons.findChildrenWithProvide)(siblingKey, parentSubTree);
+    const ownIndex = ownProviders.indexOf(vm);
+    if (ownIndex === -1) return;
+    const match = siblingProviders[ownIndex];
+    const matchProvides = match?.provides;
+    sibling.value = matchProvides?.[siblingKey] ?? null;
+  });
+  return sibling;
+}

package/dist/src/composables/Commons/groupSiblingLink.composable.d.ts

@@ -0,0 +1,33 @@
+import type { InjectionKey, Ref } from 'vue';
+import type { IGroupProvide } from '../../interfaces/Commons/group.interface';
+/*********************************************************
+ * useGroupSiblingLink
+ *
+ * @description
+ * Vue's `provide` / `inject` only crosses the ANCESTOR chain — two
+ * components declared as SIBLINGS under a common parent (e.g. the
+ * documented `<OrigamTabs>` / `<OrigamTabPanels>` usage, #441) can
+ * never `inject()` each other directly: the sibling never appears in
+ * either one's ancestor chain, so the lookup always resolves to
+ * `null`, no matter how the injection key is built.
+ *
+ * This composable finds the matching sibling's `useGroup` state by
+ * walking the shared parent's RENDERED subtree instead — the same
+ * `findChildrenWithProvide` trick `useGroup.register` already uses to
+ * order same-group children. Multiple same-parent pairs are matched
+ * by DOCUMENT ORDER: the n-th component providing `ownKey` pairs with
+ * the n-th component providing `siblingKey`.
+ *
+ * Resolved lazily in `onMounted`, not read eagerly during `setup()`:
+ * mount order follows document order, so when e.g. `<OrigamTabs>`'s
+ * own `setup()` runs, a LATER-declared `<OrigamTabPanels>` sibling
+ * does not exist yet — an eager read would always see nothing, which
+ * is the exact #441 bug. `onMounted` callbacks are queued and only
+ * flushed once the whole initial tree (both siblings) has mounted, so
+ * by the time this runs the sibling is guaranteed to have registered.
+ * The returned `Ref` starts at `null` and updates once resolved —
+ * callers must read it inside a `computed` (or other reactive spot)
+ * for the update to reach the template, never destructure `.value`
+ * during their own `setup()` body.
+ ********************************************************/
+export declare function useGroupSiblingLink(ownKey: InjectionKey<IGroupProvide>, siblingKey: InjectionKey<IGroupProvide>): Ref<IGroupProvide | null>;

package/dist/src/composables/Commons/groupSiblingLink.composable.js

@@ -0,0 +1,19 @@
+import { onMounted, shallowRef } from "vue";
+import { findChildrenWithProvide } from "../../utils/Commons/commons.util.js";
+import { getCurrentInstance } from "../../utils/Commons/getCurrentInstance.util.js";
+export function useGroupSiblingLink(ownKey, siblingKey) {
+  const vm = getCurrentInstance("useGroupSiblingLink");
+  const sibling = shallowRef(null);
+  onMounted(() => {
+    const parentSubTree = vm.parent?.subTree;
+    if (!parentSubTree) return;
+    const ownProviders = findChildrenWithProvide(ownKey, parentSubTree);
+    const siblingProviders = findChildrenWithProvide(siblingKey, parentSubTree);
+    const ownIndex = ownProviders.indexOf(vm);
+    if (ownIndex === -1) return;
+    const match = siblingProviders[ownIndex];
+    const matchProvides = match?.provides;
+    sibling.value = matchProvides?.[siblingKey] ?? null;
+  });
+  return sibling;
+}

package/dist/src/composables/Commons/hotkey.composable.cjs

@@ -5,17 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useHotkey = useHotkey;
 var _vue = require("vue");
-var _consts = require("../../consts/index.cjs");
-var _utils = require("../../utils/index.cjs");
+var _commons = require("../../consts/Commons/commons.const.cjs");
+var _hotkey = require("../../consts/Commons/hotkey.const.cjs");
+var _console = require("../../utils/Commons/console.util.cjs");
+var _getCurrentInstance = require("../../utils/Commons/getCurrentInstance.util.cjs");
+var _hotkey2 = require("../../utils/Commons/hotkey.util.cjs");
 function useHotkey(keys, callback, options = {}) {
-  if (!_consts.IN_BROWSER) return function () {};
+  if (!_commons.IN_BROWSER) return function () {};
   const {
     event = "keydown",
     inputs = false,
     preventDefault = true,
-    sequenceTimeout = 1e3
+    sequenceTimeout = _hotkey.HOTKEY_SEQUENCE_TIMEOUT
   } = options;
-  const isMac = navigator?.userAgent?.includes("Macintosh") ?? false;
+  const isMac = navigator?.userAgent?.includes(_hotkey.MACINTOSH_UA_TOKEN) ?? false;
   let timeout = 0;
   let keyGroups;
   let isSequence = false;
@@ -62,7 +65,7 @@ function useHotkey(keys, callback, options = {}) {
   (0, _vue.watch)(() => (0, _vue.toValue)(keys), function (unrefKeys) {
     cleanup();
     if (unrefKeys) {
-      const groups = (0, _utils.splitKeySequence)(unrefKeys.toLowerCase());
+      const groups = (0, _hotkey2.splitKeySequence)(unrefKeys.toLowerCase());
       isSequence = groups.length > 1;
       keyGroups = groups;
       resetSequence();
@@ -78,23 +81,23 @@ function useHotkey(keys, callback, options = {}) {
     }
   });
   try {
-    (0, _utils.getCurrentInstance)("useHotkey");
+    (0, _getCurrentInstance.getCurrentInstance)("useHotkey");
     (0, _vue.onBeforeUnmount)(cleanup);
   } catch {
-    (0, _utils.consoleWarn)("Can't cleanup");
+    (0, _console.consoleWarn)(_hotkey.HOTKEY_NO_AUTO_CLEANUP_WARNING);
   }
   const parseKeyGroup = group => {
-    const parts = (0, _utils.splitKeyCombination)(group.toLowerCase());
+    const parts = (0, _hotkey2.splitKeyCombination)(group.toLowerCase());
     if (parts.length === 0) {
       return {
-        modifiers: Object.fromEntries(_consts.KEYBOARD_MODIFIERS.map(m => [m, false])),
+        modifiers: Object.fromEntries(_hotkey.KEYBOARD_MODIFIERS.map(m => [m, false])),
         actualKey: void 0
       };
     }
-    const modifiers = Object.fromEntries(_consts.KEYBOARD_MODIFIERS.map(m => [m, false]));
+    const modifiers = Object.fromEntries(_hotkey.KEYBOARD_MODIFIERS.map(m => [m, false]));
     let actualKey;
     for (const part of parts) {
-      if (_consts.KEYBOARD_MODIFIERS.includes(part)) {
+      if (_hotkey.KEYBOARD_MODIFIERS.includes(part)) {
         modifiers[part] = true;
       } else {
         actualKey = part;

package/dist/src/composables/Commons/hotkey.composable.d.ts

@@ -1,6 +1,22 @@
 import { MaybeRef } from "vue";
-import { IHotkeyOptions } from "../../interfaces";
+import { IHotkeyOptions } from '../../interfaces/Commons/hotkey.interface';
 /*********************************************************
  * useHotkey
+ *
+ * @description
+ * Enregistre un raccourci clavier global (`window.addEventListener`) pour
+ * `keys` (une combinaison `"ctrl+k"` ou une SEQUENCE `"g g"` separee par
+ * espace, avec un `sequenceTimeout` entre chaque groupe). Traduit `cmd`/`meta`
+ * selon la plateforme detectee (`navigator.userAgent`) : `ctrl` attendu sur
+ * non-Mac, `meta` attendu sur Mac. Ignore l'evenement quand un champ de
+ * saisie a le focus, sauf `options.inputs`.
+ *
+ * @description
+ * ⛔ En dehors d'un contexte `setup()` Vue, AUCUN nettoyage automatique
+ * n'est enregistre (pas de `onBeforeUnmount` possible) — un
+ * `console.warn` (`HOTKEY_NO_AUTO_CLEANUP_WARNING`) le signale, et
+ * l'appelant DOIT invoquer lui-meme la fonction `cleanup` retournee.
+ * Hors navigateur (`!IN_BROWSER`), la fonction est un no-op immediat, y
+ * compris pour le retour (fonction vide, pas d'erreur).
  ********************************************************/
 export declare function useHotkey(keys: MaybeRef<string | undefined>, callback: (e: KeyboardEvent) => void, options?: IHotkeyOptions): () => void;

package/dist/src/composables/Commons/hotkey.composable.js

@@ -1,6 +1,14 @@
 import { onBeforeUnmount, toValue, watch } from "vue";
-import { IN_BROWSER, KEYBOARD_MODIFIERS } from "../../consts/index.js";
-import { consoleWarn, getCurrentInstance, splitKeyCombination, splitKeySequence } from "../../utils/index.js";
+import { IN_BROWSER } from "../../consts/Commons/commons.const.js";
+import {
+  HOTKEY_NO_AUTO_CLEANUP_WARNING,
+  HOTKEY_SEQUENCE_TIMEOUT,
+  KEYBOARD_MODIFIERS,
+  MACINTOSH_UA_TOKEN
+} from "../../consts/Commons/hotkey.const.js";
+import { consoleWarn } from "../../utils/Commons/console.util.js";
+import { getCurrentInstance } from "../../utils/Commons/getCurrentInstance.util.js";
+import { splitKeyCombination, splitKeySequence } from "../../utils/Commons/hotkey.util.js";
 export function useHotkey(keys, callback, options = {}) {
   if (!IN_BROWSER) return function() {
   };
@@ -8,9 +16,9 @@ export function useHotkey(keys, callback, options = {}) {
     event = "keydown",
     inputs = false,
     preventDefault = true,
-    sequenceTimeout = 1e3
+    sequenceTimeout = HOTKEY_SEQUENCE_TIMEOUT
   } = options;
-  const isMac = navigator?.userAgent?.includes("Macintosh") ?? false;
+  const isMac = navigator?.userAgent?.includes(MACINTOSH_UA_TOKEN) ?? false;
   let timeout = 0;
   let keyGroups;
   let isSequence = false;
@@ -74,7 +82,7 @@ export function useHotkey(keys, callback, options = {}) {
     getCurrentInstance("useHotkey");
     onBeforeUnmount(cleanup);
   } catch {
-    consoleWarn("Can't cleanup");
+    consoleWarn(HOTKEY_NO_AUTO_CLEANUP_WARNING);
   }
   const parseKeyGroup = (group) => {
     const parts = splitKeyCombination(group.toLowerCase());

package/dist/src/composables/Commons/hydration.composable.cjs

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useHydration = useHydration;
 var _vue = require("vue");
-var _composables = require("../../composables/index.cjs");
-var _consts = require("../../consts/index.cjs");
+var _display = require("./display.composable.cjs");
+var _commons = require("../../consts/Commons/commons.const.cjs");
 function useHydration() {
-  if (!_consts.IN_BROWSER) return (0, _vue.shallowRef)(false);
+  if (!_commons.IN_BROWSER) return (0, _vue.shallowRef)(false);
   const {
     ssr
-  } = (0, _composables.useDisplay)();
+  } = (0, _display.useDisplay)();
   if (ssr) {
     const isMounted = (0, _vue.shallowRef)(false);
     (0, _vue.onMounted)(() => {

package/dist/src/composables/Commons/hydration.composable.d.ts

@@ -1,4 +1,15 @@
 /*********************************************************
  * useHydration
+ *
+ * @description
+ * Retourne un `Ref<boolean>` qui vaut `false` jusqu'a l'hydratation cote
+ * client puis bascule a `true` dans un `onMounted` — utile pour retarder un
+ * rendu sensible a l'hydratation sans passer par `<ClientOnly>`.
+ *
+ * @description
+ * Le flag SSR vient de `useDisplay().ssr` : si l'instance de display n'a
+ * jamais ete creee en mode SSR (`ssr` falsy), le Ref demarre directement a
+ * `true` — pas de delai artificiel dans une app 100% client. Hors
+ * navigateur (`!IN_BROWSER`), retourne un Ref fige a `false`.
  ********************************************************/
 export declare function useHydration(): import("vue").ShallowRef<boolean, boolean>;

package/dist/src/composables/Commons/hydration.composable.js

@@ -1,6 +1,6 @@
 import { onMounted, shallowRef } from "vue";
-import { useDisplay } from "../../composables/index.js";
-import { IN_BROWSER } from "../../consts/index.js";
+import { useDisplay } from "./display.composable.js";
+import { IN_BROWSER } from "../../consts/Commons/commons.const.js";
 export function useHydration() {
   if (!IN_BROWSER) return shallowRef(false);
   const { ssr } = useDisplay();

package/dist/src/composables/{Theme → Commons}/installed-themes.composable.cjs

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useInstalledThemes = useInstalledThemes;
 var _vue = require("vue");
-var _consts = require("../../consts/index.cjs");
+var _theme = require("../../consts/Commons/theme.const.cjs");
 function useInstalledThemes() {
-  return (0, _vue.inject)(_consts.ORIGAM_THEMES_KEY, []);
+  return (0, _vue.inject)(_theme.ORIGAM_THEMES_KEY, []);
 }

package/dist/src/composables/Commons/installed-themes.composable.d.ts

@@ -0,0 +1,19 @@
+import type { TInstalledThemes } from '../../types/Commons/installed-theme.type';
+/*********************************************************
+ * useInstalledThemes
+ *
+ * @description
+ * Retourne la liste des themes de marque installes via
+ * `createOrigam({ themes })` — une entree par `name` de marque distincte,
+ * chacune listant les modes concrets pour lesquels elle a ete installee.
+ * Un consommateur (ex. un switch de theme) itere sur cette liste au lieu
+ * de coder en dur les marques disponibles.
+ *
+ * @description
+ * Retourne un tableau vide (jamais `undefined`) si aucun theme n'a ete
+ * installe, ou hors d'une app qui a execute `createOrigam()` — aucun
+ * garde-nul necessaire cote appelant. La liste est un instantane STATIQUE
+ * pris a l'installation ; a coupler avec `useTheme()` pour lire/changer la
+ * marque et le mode actifs.
+ ********************************************************/
+export declare function useInstalledThemes(): TInstalledThemes;

package/dist/src/composables/{Theme → Commons}/installed-themes.composable.js

@@ -1,5 +1,5 @@
 import { inject } from "vue";
-import { ORIGAM_THEMES_KEY } from "../../consts/index.js";
+import { ORIGAM_THEMES_KEY } from "../../consts/Commons/theme.const.js";
 export function useInstalledThemes() {
   return inject(ORIGAM_THEMES_KEY, []);
 }

package/dist/src/composables/Commons/intersectionObserver.composable.cjs

@@ -5,19 +5,32 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useIntersectionObserver = useIntersectionObserver;
 var _vue = require("vue");
-var _consts = require("../../consts/index.cjs");
+var _commons = require("../../consts/Commons/commons.const.cjs");
 function useIntersectionObserver(callback, options) {
   const intersectionRef = (0, _vue.ref)();
   const isIntersecting = (0, _vue.shallowRef)(false);
-  if (_consts.SUPPORTS_INTERSECTION) {
-    const observer = new IntersectionObserver(entries => {
-      callback?.(entries, observer);
-      isIntersecting.value = !!entries.find(entry => entry.isIntersecting);
-    }, options);
+  if (_commons.SUPPORTS_INTERSECTION) {
+    let observer;
+    const createObserver = () => {
+      observer?.disconnect();
+      const nextObserver = new IntersectionObserver(entries => {
+        callback?.(entries, nextObserver);
+        isIntersecting.value = !!entries.find(entry => entry.isIntersecting);
+      }, (0, _vue.toValue)(options));
+      observer = nextObserver;
+      if (intersectionRef.value) observer.observe(intersectionRef.value);
+    };
+    (0, _vue.onMounted)(() => {
+      createObserver();
+      (0, _vue.watch)(() => (0, _vue.toValue)(options), () => {
+        createObserver();
+      });
+    });
     (0, _vue.onBeforeUnmount)(() => {
-      observer.disconnect();
+      observer?.disconnect();
     });
     (0, _vue.watch)(intersectionRef, (newValue, oldValue) => {
+      if (!observer) return;
       if (oldValue) {
         observer.unobserve(oldValue);
         isIntersecting.value = false;

package/dist/src/composables/Commons/intersectionObserver.composable.d.ts

@@ -1,7 +1,50 @@
+import { MaybeRefOrGetter } from 'vue';
 /*********************************************************
  * useIntersectionObserver
+ *
+ * @description
+ * Expose `intersectionRef` (a poser en template ref sur l'element a
+ * observer) et `isIntersecting` — un `IntersectionObserver` est cree une
+ * fois, re-attache automatiquement quand `intersectionRef` change
+ * d'element (desobserve l'ancien, observe le nouveau), et deconnecte a
+ * `onBeforeUnmount`.
+ *
+ * @description
+ * Si `SUPPORTS_INTERSECTION` est faux (navigateur sans l'API, ou SSR),
+ * AUCUN observer n'est cree — `isIntersecting` reste fige a `false` et
+ * `callback` n'est jamais appele, silencieusement. Aucun fallback
+ * polyfill.
+ *
+ * @description
+ * ⛔ issue #682 / critere C4 — `options` accepte desormais un ref/getter
+ * (`MaybeRefOrGetter`), pas seulement un objet fige. `rootMargin`/`root`
+ * sont des options NATIVES d'`IntersectionObserver`, figees a la creation :
+ * aucune reactivite ne peut les rattraper sans RECREER l'observateur.
+ *
+ * @description
+ * ⛔ La creation initiale de l'observateur — ET l'abonnement reactif a
+ * `options` — sont deliberement DEFERES tous les deux a l'INTERIEUR du
+ * callback `onMounted`, jamais au corps de `useIntersectionObserver` (donc
+ * au corps de `setup()` du composant appelant). Mesure, pas suppose : un
+ * appelant qui passait `options` sous forme de valeur deballee UNE FOIS
+ * pendant `setup()` (l'ancien usage d'`OrigamInfiniteScrollIntersect`, via
+ * `observerOptions.value`) figeait la valeur AVANT que le resolveur de
+ * themes (ADR-005, hook global `beforeCreate`, qui s'execute APRES le corps
+ * de `setup()`) ait pu patcher le prop — un theme visant `margin` n'atteignait
+ * donc jamais l'observateur. Passer le ref/computed lui-meme (sans le
+ * deballer) NE SUFFIT PAS a corriger ce point tant que la toute PREMIERE
+ * lecture de `options` a encore lieu pendant `setup()` — meme via
+ * `watch(() => toValue(options), …)`, dont l'evaluation initiale (pour
+ * capturer `oldValue`) est SYNCHRONE au moment de l'appel : verifie
+ * empiriquement, `Object.defineProperty` remplace le descripteur SANS
+ * declencher `trigger()` pour les abonnements deja etablis sur l'ancien,
+ * donc un `computed` (ou un watcher) dont la toute premiere evaluation a eu
+ * lieu avant `beforeCreate` reste fige sur la valeur pre-theme pour
+ * toujours, quel que soit le nombre de lectures ulterieures. Seul un report
+ * de la PREMIERE lecture — creation ET abonnement — apres `beforeCreate`
+ * referme le trou ; `onMounted` le garantit dans tous les cas.
  ********************************************************/
-export declare function useIntersectionObserver(callback?: IntersectionObserverCallback, options?: IntersectionObserverInit): {
+export declare function useIntersectionObserver(callback?: IntersectionObserverCallback, options?: MaybeRefOrGetter<IntersectionObserverInit | undefined>): {
     intersectionRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
     isIntersecting: import("vue").ShallowRef<boolean, boolean>;
 };

package/dist/src/composables/Commons/intersectionObserver.composable.js

@@ -1,17 +1,30 @@
-import { onBeforeUnmount, ref, shallowRef, watch } from "vue";
-import { SUPPORTS_INTERSECTION } from "../../consts/index.js";
+import { onBeforeUnmount, onMounted, ref, shallowRef, toValue, watch } from "vue";
+import { SUPPORTS_INTERSECTION } from "../../consts/Commons/commons.const.js";
 export function useIntersectionObserver(callback, options) {
   const intersectionRef = ref();
   const isIntersecting = shallowRef(false);
   if (SUPPORTS_INTERSECTION) {
-    const observer = new IntersectionObserver((entries) => {
-      callback?.(entries, observer);
-      isIntersecting.value = !!entries.find((entry) => entry.isIntersecting);
-    }, options);
+    let observer;
+    const createObserver = () => {
+      observer?.disconnect();
+      const nextObserver = new IntersectionObserver((entries) => {
+        callback?.(entries, nextObserver);
+        isIntersecting.value = !!entries.find((entry) => entry.isIntersecting);
+      }, toValue(options));
+      observer = nextObserver;
+      if (intersectionRef.value) observer.observe(intersectionRef.value);
+    };
+    onMounted(() => {
+      createObserver();
+      watch(() => toValue(options), () => {
+        createObserver();
+      });
+    });
     onBeforeUnmount(() => {
-      observer.disconnect();
+      observer?.disconnect();
     });
     watch(intersectionRef, (newValue, oldValue) => {
+      if (!observer) return;
       if (oldValue) {
         observer.unobserve(oldValue);
         isIntersecting.value = false;