origam 2.37.2 → 2.37.3

package/CHANGELOG.md

@@ -18,6 +18,17 @@ This project follows [Semantic Versioning](https://semver.org).
 
 ## [Unreleased]
 
+## [2.37.3] - 2026-10-19
+
+### Fixed — `v-intersect` lié avec le tuple `withDirectives` : handler jamais appelé (#1205)
+
+`OrigamLazy`, `OrigamTextField`, `OrigamTextareaField` et `OrigamPasswordField` passaient à `v-intersect` le tuple `[{ handler, options }, null, ['once']]` comme valeur. La directive lit `.handler` / `.options` sur la valeur : sur un tableau, elle obtient `undefined`. Aucune intersection n'appelait donc le handler, `once` n'était jamais lu et les `options` n'atteignaient pas l'`IntersectionObserver`.
+
+- **`OrigamLazy`** : le contenu ne s'affichait jamais à l'intersection, et les `options` du consommateur (ex. `rootMargin`) étaient ignorées. C'est corrigé ; mesuré dans Chromium.
+- **Champs texte, textarea et mot de passe** : l'appel JS de `focus()` sur intersection (autofocus) n'avait jamais lieu. Dans Chromium, l'attribut natif `autofocus` masquait le défaut. Safari et Firefox n'ont pas été mesurés.
+- Liaison désormais en `v-intersect.once="{ handler, options }"`.
+- La directive émet un `console.warn` en mode dev (une fois par balise) quand on lui lie un tableau.
+
 ## [2.37.2] - 2026-10-19
 
 ### Fixed — `OrigamImg` sous SSR : écart d'hydratation `aspect-ratio`, et image montée côté client jamais chargée (#1192)

package/dist/src/components/Lazy/OrigamLazy.vue

@@ -2,7 +2,7 @@
 	<component
 			:is="tag"
 			:id="id"
-			v-intersect="intersect"
+			v-intersect.once="intersect"
 			:aria-busy="!isActive || undefined"
 			:class="lazyClasses"
 			:style="lazyStyles"
@@ -52,11 +52,7 @@ const { filterProps } = useProps(props);
 const { dimensionStyles } = useDimension(props);
 const isActive = useVModel(props, "modelValue");
 const intersect = computed(() => {
-  return [
-    { handler: handleIntersect, options: props.options },
-    null,
-    isActive.value ? [] : ["once"]
-  ];
+  return { handler: handleIntersect, options: props.options };
 });
 const handleIntersect = (isIntersecting) => {
   if (isActive.value) return;

package/dist/src/components/PasswordField/OrigamPasswordField.vue

@@ -124,7 +124,7 @@
 							/>
 							<input
 									ref="inputRef"
-									v-intersect="intersect"
+									v-intersect.once="intersect"
 									:autofocus="autofocus"
 									:disabled="isDisabled"
 									:name="name"
@@ -501,7 +501,7 @@ const handleIntersect = (isIntersecting, entries) => {
   entries[0].target?.focus?.();
 };
 const intersect = computed(() => {
-  return [{ handler: handleIntersect }, null, ["once"]];
+  return { handler: handleIntersect };
 });
 const origamInputRef = ref();
 const origamFieldRef = ref();

package/dist/src/components/TextField/OrigamTextField.vue

@@ -83,7 +83,7 @@
 							/>
 							<input
 									ref="inputRef"
-									v-intersect="intersect"
+									v-intersect.once="intersect"
 									:autofocus="autofocus"
 									:disabled="isDisabled"
 									:name="name"
@@ -372,9 +372,7 @@ const max = computed(() => {
   return props.counter;
 });
 const intersect = computed(() => {
-  return [{
-    handler: handleIntersect
-  }, null, ["once"]];
+  return { handler: handleIntersect };
 });
 const handleIntersect = (isIntersecting, entries) => {
   if (!props.autofocus || !isIntersecting) return;

package/dist/src/components/TextareaField/OrigamTextareaField.vue

@@ -131,7 +131,7 @@
 						<textarea
 								v-else
 								ref="textareaRef"
-								v-intersect="intersect"
+								v-intersect.once="intersect"
 								:autofocus="autofocus"
 								:disabled="isDisabled"
 								:name="name"
@@ -499,9 +499,7 @@ const {
   onClickAppend: handleClickAppend
 } = useAdjacent(props, toRef(props, "prependIcon"), toRef(props, "appendIcon"));
 const intersect = computed(() => {
-  return [{
-    handler: handleIntersect
-  }, null, ["once"]];
+  return { handler: handleIntersect };
 });
 const handleIntersect = (isIntersecting, entries) => {
   if (!props.autofocus || !isIntersecting) return;

package/dist/src/directives/Intersect/intersect.directive.cjs

@@ -9,6 +9,7 @@ var _intersect = require("../../utils/Commons/intersect.util.cjs");
 const Intersect = exports.Intersect = {
   mounted(el, binding) {
     if (!_commons.SUPPORTS_INTERSECTION) return;
+    (0, _intersect.warnIntersectTupleBinding)(el, binding.value);
     const read = () => {
       const b = el._observe?.[binding.instance.$.uid]?.binding ?? binding;
       const v = b.value;

package/dist/src/directives/Intersect/intersect.directive.js

@@ -1,8 +1,9 @@
 import { SUPPORTS_INTERSECTION } from "../../consts/Commons/commons.const.js";
-import { unmountIntersect } from "../../utils/Commons/intersect.util.js";
+import { unmountIntersect, warnIntersectTupleBinding } from "../../utils/Commons/intersect.util.js";
 export const Intersect = {
   mounted(el, binding) {
     if (!SUPPORTS_INTERSECTION) return;
+    warnIntersectTupleBinding(el, binding.value);
     const read = () => {
       const b = el._observe?.[binding.instance.$.uid]?.binding ?? binding;
       const v = b.value;

package/dist/src/utils/Commons/intersect.util.cjs

@@ -4,9 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.unmountIntersect = unmountIntersect;
+exports.warnIntersectTupleBinding = warnIntersectTupleBinding;
 function unmountIntersect(el, binding) {
   const observe = el._observe?.[binding.instance.$.uid];
   if (!observe) return;
   observe.observer.unobserve(el);
   delete el._observe[binding.instance.$.uid];
+}
+const _warnedIntersectTupleTags = /* @__PURE__ */new Set();
+function warnIntersectTupleBinding(el, value) {
+  if (!Array.isArray(value)) return;
+  if (typeof console === "undefined") return;
+  if (!process.env?.DEV) return;
+  const tag = el.tagName.toLowerCase();
+  if (_warnedIntersectTupleTags.has(tag)) return;
+  _warnedIntersectTupleTags.add(tag);
+  console.warn(`[origam] v-intersect on <${tag}> is bound to an array (the withDirectives tuple): the handler will never be called. Bind { handler, options } and use the modifier, e.g. v-intersect.once="{ handler, options }".`);
 }

package/dist/src/utils/Commons/intersect.util.d.ts

@@ -6,3 +6,15 @@ import type { IIntersectDirectiveBinding, IIntersectHtmlElement } from '../../in
  * @param binding …
  */
 export declare function unmountIntersect(el: IIntersectHtmlElement, binding: IIntersectDirectiveBinding): void;
+/*********************************************************
+ * warnIntersectTupleBinding
+ *
+ * @description
+ * Dev-only warning (#1205, once per element tag) when `v-intersect` is bound
+ * to an ARRAY. The `withDirectives` tuple `[{ handler, options }, null,
+ * ['once']]` is not a valid binding VALUE: the directive reads `.handler` /
+ * `.options` off it, gets `undefined`, never calls the handler and never
+ * reads the `once`. The correct form is `v-intersect.once="{ handler,
+ * options }"`. Gated on `import.meta.env.DEV`, like `warnUnsupportedProp`.
+ ********************************************************/
+export declare function warnIntersectTupleBinding(el: HTMLElement, value: unknown): void;

package/dist/src/utils/Commons/intersect.util.js

@@ -4,3 +4,15 @@ export function unmountIntersect(el, binding) {
   observe.observer.unobserve(el);
   delete el._observe[binding.instance.$.uid];
 }
+const _warnedIntersectTupleTags = /* @__PURE__ */ new Set();
+export function warnIntersectTupleBinding(el, value) {
+  if (!Array.isArray(value)) return;
+  if (typeof console === "undefined") return;
+  if (!import.meta.env?.DEV) return;
+  const tag = el.tagName.toLowerCase();
+  if (_warnedIntersectTupleTags.has(tag)) return;
+  _warnedIntersectTupleTags.add(tag);
+  console.warn(
+    `[origam] v-intersect on <${tag}> is bound to an array (the withDirectives tuple): the handler will never be called. Bind { handler, options } and use the modifier, e.g. v-intersect.once="{ handler, options }".`
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "origam",
-  "version": "2.37.2",
+  "version": "2.37.3",
   "type": "module",
   "description": "origam — a Vue 3 design system with multi-theme design tokens, CSS-first components and TypeScript types.",
   "keywords": [