@dnax/ui 0.0.72 → 0.0.73

package/components/QInput.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
 // QInput — API Quasar : <q-input v-model="…" label="Email" outlined dense clearable counter maxlength="60" hint error error-message />
 // Variants : outlined (défaut) | filled | borderless ; le label est toujours affiché au-dessus du champ.
-import { computed, nextTick, ref, watch } from "vue"
+// Multiligne : `autogrow` (auto-extension plafonnée à `max-rows`), `rows` (lignes visibles)
+// ou `resize` — pour un champ multiligne complet, préférer `<q-input-textarea>`.
+import { computed, ref } from "vue"
 import { Icon } from "@iconify/vue"
 import { icons } from "../lib/icons"
 import { cn } from "../lib/utils"
 import { radiusStyle, useRadius } from "../lib/useComponentProps"
 import type { RadiusProp } from "../lib/useComponentProps"
+import { useTextareaAutosize } from "../lib/useTextareaAutosize"
 
 interface Props {
   modelValue?: string | number | null
@@ -33,7 +36,7 @@ interface Props {
   iconLeft?: string
   /** Icône Iconify à droite (remplacée par le slot #append s'il est fourni) */
   iconRight?: string
-  /** Masque de saisie : # = chiffre, A = lettre, N = alphanumérique, X = quelconque (ex. "##-##-##") */
+  /** Masque de saisie : # = chiffre, A = lettre, N = alphanumérique, X = quelconque (ex. "##-##-##") — ignoré en mode textarea */
   mask?: string
   /** Remplit les emplacements vides par "_" (défaut : la saisie s'arrête au dernier caractère) */
   fillMask?: boolean
@@ -51,8 +54,16 @@ interface Props {
   radius?: RadiusProp
   /** Hauteur réduite */
   dense?: boolean
-  /** Textarea à hauteur auto */
+  /** Textarea à hauteur auto, plafonné à `maxRows` lignes */
   autogrow?: boolean
+  /** Nombre de lignes visibles (textarea) — `> 1` bascule le champ en multiligne */
+  rows?: number
+  /** Plafond d'auto-extension en lignes, 0 = illimité : au-delà, le champ défile */
+  maxRows?: number
+  /** Redimensionnement manuel du textarea (sans effet en `autogrow`) */
+  resize?: "none" | "vertical" | "both"
+  /** Attribut autocomplete transmis au champ natif */
+  autocomplete?: string
   disable?: boolean
   readonly?: boolean
   placeholder?: string
@@ -69,6 +80,9 @@ const props = withDefaults(defineProps<Props>(), {
   borderless: false,
   dense: false,
   autogrow: false,
+  rows: 1,
+  maxRows: 0,
+  resize: "none",
   disable: false,
   readonly: false,
   fillMask: false,
@@ -93,6 +107,17 @@ const roundedStyle = computed(() => radiusStyle(effectiveRadius.value))
 
 const value = computed(() => props.modelValue ?? "")
 
+// Le champ est multiligne dès qu'on demande plusieurs lignes, une auto-extension ou
+// un redimensionnement manuel — un `<input>` n'a ni hauteur de plusieurs lignes ni
+// poignée de redimensionnement.
+const isTextarea = computed(
+  () => props.autogrow || props.rows > 1 || props.resize !== "none",
+)
+
+// Un masque de saisie n'a pas de sens sur du multiligne (il supprime les retours à
+// la ligne) : il est ignoré en mode textarea.
+const maskEnabled = computed(() => Boolean(props.mask) && !isTextarea.value)
+
 // ═════════ Masque de saisie : # chiffre, A lettre, N alphanumérique, X quelconque ═════════
 const isToken = (c: string): boolean => c === "#" || c === "A" || c === "N" || c === "X"
 
@@ -107,7 +132,7 @@ const matchesToken = (tok: string, c: string): boolean =>
 
 /** Extrait les caractères réels (emplacements tokens) d'une valeur affichée masquée. */
 const unmask = (v: string, fill: boolean): string => {
-  if (!props.mask) return v
+  if (!maskEnabled.value || !props.mask) return v
   let out = ""
   let vi = 0
   for (const ch of props.mask) {
@@ -126,7 +151,7 @@ const unmask = (v: string, fill: boolean): string => {
 
 /** Applique le masque à une chaîne de caractères bruts (littéraux insérés, caractères invalides sautés). */
 const mask = (raw: string, fill: boolean): string => {
-  if (!props.mask) return raw
+  if (!maskEnabled.value || !props.mask) return raw
   let out = ""
   let ri = 0
   for (const ch of props.mask) {
@@ -151,7 +176,7 @@ const mask = (raw: string, fill: boolean): string => {
 /** Valeur affichée dans le champ : applique le masque au modelValue (brut si unmaskedValue). */
 const displayValue = computed(() => {
   const v = String(props.modelValue ?? "")
-  if (!props.mask) return v
+  if (!maskEnabled.value) return v
   const raw = props.unmaskedValue ? v : unmask(v, props.fillMask)
   return mask(raw, props.fillMask)
 })
@@ -169,24 +194,33 @@ const fieldClasses = computed(() =>
     props.error && "q-field--error",
     props.disable && "q-field--disabled",
     floatActive.value && "q-field--float",
+    isTextarea.value && "q-input--textarea",
   ),
 )
 
-const resizeTextarea = async () => {
-  const el = nativeEl.value
-  if (el && props.autogrow) {
-    await nextTick()
-    el.style.height = "auto"
-    el.style.height = `${el.scrollHeight}px`
-  }
-}
+// Auto-extension : la mesure et le plafond `maxRows` sont délégués au composable
+// (calcul pur dans `lib/textarea.ts`). `observeWidth: false` — en mode `<input>`
+// l'élément observé serait remplacé au changement de mode.
+const { resize } = useTextareaAutosize(nativeEl, {
+  enabled: () => props.autogrow,
+  maxRows: () => props.maxRows,
+  sources: () => [value.value, props.rows, props.maxRows, props.autogrow],
+  observeWidth: false,
+})
+
+// `resize` exposé (onglet Methods de la doc) : re-mesure forcée après un
+// changement de contenu fait hors du cycle normal (ex. valeur posée par le parent).
+defineExpose({ resize })
 
-watch(value, resizeTextarea)
+// `resize` n'a de sens que sans auto-extension (sinon les deux pilotent la hauteur).
+const textareaStyle = computed(() =>
+  props.resize === "none" || props.autogrow ? undefined : { resize: props.resize },
+)
 
 const onInput = (e: Event) => {
   const el = e.target as HTMLInputElement | HTMLTextAreaElement
   const raw = el.value
-  if (!props.mask) {
+  if (!maskEnabled.value) {
     emit("update:modelValue", raw)
     return
   }
@@ -218,13 +252,17 @@ const showClear = computed(
   () => props.clearable && !props.disable && !props.readonly && value.value !== "",
 )
 
-const inputAttrs = computed(() => ({
-  type: props.type,
+const commonAttrs = computed(() => ({
   maxlength: props.maxlength,
   placeholder: props.placeholder,
+  autocomplete: props.autocomplete,
   disabled: props.disable || undefined,
   readonly: props.readonly || undefined,
 }))
+
+// `type` n'est valide que sur `<input>` : sur un `<textarea>` c'est un attribut
+// invalide (et sans effet) — on ne le transmet pas.
+const inputAttrs = computed(() => ({ ...commonAttrs.value, type: props.type }))
 </script>
 
 <template>
@@ -236,12 +274,13 @@ const inputAttrs = computed(() => ({
       </slot>
       <span v-if="prefix" class="q-field__prefix">{{ prefix }}</span>
       <textarea
-        v-if="autogrow"
+        v-if="isTextarea"
         ref="nativeEl"
         class="q-field__native"
         :value="displayValue"
-        rows="1"
-        v-bind="inputAttrs"
+        :rows="rows"
+        :style="textareaStyle"
+        v-bind="commonAttrs"
         @input="onInput"
         @focus="onFocus"
         @blur="onBlur"

package/components/QInputTextarea.vue

@@ -0,0 +1,211 @@
+<script setup lang="ts">
+// QInputTextarea — champ multiligne dédié : <q-input-textarea v-model="bio" label="Bio" :rows="3" />
+// Contrairement à `q-input` (qui bascule entre `<input>` et `<textarea>`), ce composant
+// est un textarea **seul** : lignes visibles (`rows`), plafond d'auto-extension
+// (`maxRows`), redimensionnement manuel (`resize`), compteur et états — avec le
+// vocabulaire de champ commun (outlined / filled / borderless / dense / radius / error).
+import { computed, ref } from "vue"
+import { Icon } from "@iconify/vue"
+import { icons } from "../lib/icons"
+import { cn } from "../lib/utils"
+import { radiusStyle, useRadius } from "../lib/useComponentProps"
+import type { RadiusProp } from "../lib/useComponentProps"
+import { useTextareaAutosize } from "../lib/useTextareaAutosize"
+
+interface Props {
+  modelValue?: string | number | null
+  /** Label affiché au-dessus du champ */
+  label?: string
+  /** Aide affichée sous le champ */
+  hint?: string
+  /** État d'erreur */
+  error?: boolean
+  /** Message d'erreur (affiché quand error) */
+  errorMessage?: string
+  /** Affiche le compteur de caractères (nécessite maxlength) */
+  counter?: boolean
+  maxlength?: number
+  /** Nombre de lignes visibles (hauteur du champ hors auto-extension) */
+  rows?: number
+  /** Plafond d'auto-extension en lignes, 0 = illimité : au-delà, le champ défile */
+  maxRows?: number
+  /** Le champ grandit avec le contenu jusqu'à `maxRows`, puis défile */
+  autogrow?: boolean
+  /** Redimensionnement manuel (sans effet en `autogrow`) */
+  resize?: "none" | "vertical" | "both"
+  /** Bouton d'effacement */
+  clearable?: boolean
+  /** Bordure visible */
+  outlined?: boolean
+  /** Fond gris, soulignement */
+  filled?: boolean
+  /** Aucune bordure */
+  borderless?: boolean
+  /** Coins arrondis : true = pilule, ou échelle xs|sm|md|lg (none = carré) */
+  radius?: RadiusProp
+  /** Hauteur réduite */
+  dense?: boolean
+  disable?: boolean
+  readonly?: boolean
+  placeholder?: string
+  /** Préfixe dans le champ */
+  prefix?: string
+  /** Suffixe dans le champ */
+  suffix?: string
+  /** Icône Iconify à gauche (remplacée par le slot #prepend s'il est fourni) */
+  iconLeft?: string
+  /** Icône Iconify à droite (remplacée par le slot #append s'il est fourni) */
+  iconRight?: string
+  /** Attribut autocomplete du champ natif */
+  autocomplete?: string
+  /** Correction orthographique du navigateur */
+  spellcheck?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  rows: 3,
+  maxRows: 0,
+  autogrow: false,
+  resize: "none",
+  error: false,
+  counter: false,
+  clearable: false,
+  outlined: false,
+  filled: false,
+  borderless: false,
+  dense: false,
+  disable: false,
+  readonly: false,
+  spellcheck: false,
+})
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string]
+  focus: [event: FocusEvent]
+  blur: [event: FocusEvent]
+  clear: []
+  keyup: [event: KeyboardEvent]
+  keydown: [event: KeyboardEvent]
+}>()
+
+const focused = ref(false)
+const nativeEl = ref<HTMLTextAreaElement | null>(null)
+
+// radius : prop explicite > composantProps.QInputTextarea ; échelle → --q-radius
+const effectiveRadius = useRadius("QInputTextarea", () => props.radius)
+const roundedStyle = computed(() => radiusStyle(effectiveRadius.value))
+
+const value = computed(() => String(props.modelValue ?? ""))
+
+const fieldClasses = computed(() =>
+  cn(
+    "q-input-textarea",
+    props.outlined && "q-field--outlined",
+    props.filled && "q-field--filled",
+    props.borderless && "q-field--borderless",
+    effectiveRadius.value === true && "q-field--rounded",
+    props.dense && "q-field--dense",
+    props.error && "q-field--error",
+    props.disable && "q-field--disabled",
+    focused.value && "q-field--float",
+    props.autogrow && "q-input-textarea--autogrow",
+  ),
+)
+
+// Auto-extension : mesure + plafond `maxRows` (calcul pur dans `lib/textarea.ts`),
+// re-mesurée au montage, à chaque changement de valeur/lignes et au changement de
+// largeur (le texte se replie autrement).
+const { resize } = useTextareaAutosize(nativeEl, {
+  enabled: () => props.autogrow,
+  maxRows: () => props.maxRows,
+  sources: () => [value.value, props.rows, props.maxRows, props.autogrow],
+})
+
+// `resize` manuel inutile en auto-extension : les deux pilotent la hauteur.
+const textareaStyle = computed(() =>
+  props.resize === "none" || props.autogrow ? undefined : { resize: props.resize },
+)
+
+const showClear = computed(
+  () => props.clearable && !props.disable && !props.readonly && value.value !== "",
+)
+
+const onInput = (e: Event) => emit("update:modelValue", (e.target as HTMLTextAreaElement).value)
+
+const onFocus = (e: FocusEvent) => {
+  focused.value = true
+  emit("focus", e)
+}
+
+const onBlur = (e: FocusEvent) => {
+  focused.value = false
+  emit("blur", e)
+}
+
+const onClear = () => {
+  emit("update:modelValue", "")
+  emit("clear")
+  void resize()
+  nativeEl.value?.focus()
+}
+
+defineExpose({
+  focus: () => nativeEl.value?.focus(),
+  blur: () => nativeEl.value?.blur(),
+  resize: () => void resize(),
+})
+</script>
+
+<template>
+  <div class="q-input-textarea" :class="fieldClasses" :style="roundedStyle">
+    <label v-if="label" class="q-field__label-stack">{{ label }}</label>
+    <div class="q-field__control">
+      <slot name="prepend">
+        <Icon v-if="iconLeft" :icon="iconLeft" class="q-field__icon" aria-hidden="true" />
+      </slot>
+      <span v-if="prefix" class="q-field__prefix">{{ prefix }}</span>
+      <textarea
+        ref="nativeEl"
+        class="q-field__native"
+        :value="value"
+        :rows="rows"
+        :style="textareaStyle"
+        :maxlength="maxlength"
+        :placeholder="placeholder"
+        :autocomplete="autocomplete"
+        :spellcheck="spellcheck"
+        :disabled="disable || undefined"
+        :readonly="readonly || undefined"
+        @input="onInput"
+        @focus="onFocus"
+        @blur="onBlur"
+        @keyup="(e) => emit('keyup', e)"
+        @keydown="(e) => emit('keydown', e)"
+      />
+      <span v-if="suffix" class="q-field__suffix">{{ suffix }}</span>
+      <button
+        v-if="showClear"
+        class="q-field__clear"
+        type="button"
+        aria-label="Effacer"
+        @click="onClear"
+      >
+        <Icon :icon="icons.x" aria-hidden="true" />
+      </button>
+      <slot name="append">
+        <Icon v-if="iconRight" :icon="iconRight" class="q-field__icon" aria-hidden="true" />
+      </slot>
+    </div>
+    <div class="q-field__bottom">
+      <div v-if="error" class="q-field__error">
+        <slot name="error">{{ errorMessage }}</slot>
+      </div>
+      <div v-else-if="hint || $slots.hint" class="q-field__hint">
+        <slot name="hint">{{ hint }}</slot>
+      </div>
+      <div v-if="counter && maxlength" class="q-field__counter">
+        {{ value.length }}/{{ maxlength }}
+      </div>
+    </div>
+  </div>
+</template>

package/index.ts

@@ -72,6 +72,7 @@ export { default as QInputCurrency } from "./components/QInputCurrency.vue"
 export { default as QInputOtp } from "./components/QInputOtp.vue"
 export { default as QInputPassword } from "./components/QInputPassword.vue"
 export { default as QInputTag } from "./components/QInputTag.vue"
+export { default as QInputTextarea } from "./components/QInputTextarea.vue"
 export { default as QInteract } from "./components/QInteract.vue"
 export { default as QIntersection } from "./components/QIntersection.vue"
 export { default as QItem } from "./components/QItem.vue"
@@ -203,6 +204,10 @@ export { DEFAULT_LAYOUT_VIEW, parseView, qLayoutKey } from "./lib/layout"
 export type { LayoutView, LayoutZone, LayoutZonePlacement, QLayoutContext } from "./lib/layout"
 export { vRipple } from "./lib/ripple"
 export type { RippleOptions, RippleValue } from "./lib/ripple"
+export { textareaCap, textareaMetrics, textareaSizing } from "./lib/textarea"
+export type { TextareaMetrics, TextareaSizing, TextareaComputedStyle } from "./lib/textarea"
+export { useTextareaAutosize } from "./lib/useTextareaAutosize"
+export type { TextareaAutosize, UseTextareaAutosizeOptions } from "./lib/useTextareaAutosize"
 export { chartToECharts, channelValue, pickFromEvent, tableCsv, tableModel, textValue, tokenCss } from "./lib/chart"
 export type {
   QChartAxis,

package/lib/textarea.test.ts

@@ -0,0 +1,80 @@
+// Auto-extension d'un textarea : le plafond `maxRows` doit être **respecté au pixel**
+// (hauteur = lignes × line-height + paddings) et le défilement ne s'activer que
+// lorsque le contenu dépasse — sinon un champ collé à son plafond clignote.
+import { describe, expect, it } from "bun:test"
+import {
+  DEFAULT_LINE_HEIGHT_RATIO,
+  textareaCap,
+  textareaMetrics,
+  textareaSizing,
+} from "./textarea"
+
+const metrics = { fontSize: 14, lineHeight: 20, paddingTop: 0, paddingBottom: 0 }
+
+describe("textareaMetrics", () => {
+  it("résout des valeurs px", () => {
+    expect(
+      textareaMetrics({
+        fontSize: "14px",
+        lineHeight: "20px",
+        paddingTop: "8px",
+        paddingBottom: "12px",
+      }),
+    ).toEqual({ fontSize: 14, lineHeight: 20, paddingTop: 8, paddingBottom: 12 })
+  })
+
+  it("replie `line-height: normal` sur fontSize × 1.4", () => {
+    const m = textareaMetrics({ fontSize: "16px", lineHeight: "normal" })
+    expect(m.lineHeight).toBeCloseTo(16 * DEFAULT_LINE_HEIGHT_RATIO)
+  })
+
+  it("replie les valeurs absentes ou invalides", () => {
+    const m = textareaMetrics({})
+    expect(m).toEqual({ fontSize: 14, lineHeight: 14 * DEFAULT_LINE_HEIGHT_RATIO, paddingTop: 0, paddingBottom: 0 })
+  })
+
+  it("ignore les paddings négatifs ou non numériques", () => {
+    expect(textareaMetrics({ paddingTop: "-4px", paddingBottom: "auto" })).toEqual({
+      fontSize: 14,
+      lineHeight: 14 * DEFAULT_LINE_HEIGHT_RATIO,
+      paddingTop: 0,
+      paddingBottom: 0,
+    })
+  })
+})
+
+describe("textareaCap", () => {
+  it("vaut lignes × line-height + paddings", () => {
+    expect(textareaCap({ ...metrics, paddingTop: 10, paddingBottom: 6 }, 3)).toBe(76)
+  })
+
+  it("vaut Infinity sans plafond", () => {
+    expect(textareaCap(metrics, 0)).toBe(Number.POSITIVE_INFINITY)
+    expect(textareaCap(metrics, -2)).toBe(Number.POSITIVE_INFINITY)
+  })
+})
+
+describe("textareaSizing", () => {
+  it("prend la hauteur du contenu quand il tient sous le plafond", () => {
+    expect(textareaSizing(metrics, 40, 5)).toEqual({ height: 40, overflowY: "hidden", capped: false })
+  })
+
+  it("plafonne et active le défilement au-delà de maxRows", () => {
+    expect(textareaSizing(metrics, 300, 5)).toEqual({ height: 100, overflowY: "auto", capped: true })
+  })
+
+  it("ne plafonne pas quand maxRows vaut 0", () => {
+    expect(textareaSizing(metrics, 300, 0)).toEqual({ height: 300, overflowY: "hidden", capped: false })
+  })
+
+  it("défile dès que le contenu dépasse, sans marge", () => {
+    // 100 px pile = plafond : pas encore de défilement (évite le clignotement)
+    expect(textareaSizing(metrics, 100, 5).overflowY).toBe("hidden")
+    expect(textareaSizing(metrics, 101, 5).overflowY).toBe("auto")
+  })
+
+  it("normalise un scrollHeight invalide ou négatif", () => {
+    expect(textareaSizing(metrics, -10, 5).height).toBe(0)
+    expect(textareaSizing(metrics, Number.NaN, 5).height).toBe(0)
+  })
+})

package/lib/textarea.ts

@@ -0,0 +1,68 @@
+// Auto-extension d'un textarea — calculs **purs** (aucun DOM).
+//
+// Le composant mesure (`getComputedStyle` + `scrollHeight`) puis délègue ici la
+// décision de hauteur : plafond de `maxRows` lignes, défilement au-delà. Tester ces
+// règles sans navigateur évite de dépendre d'une vraie mise en page.
+
+/** Métriques d'un textarea, en px (résolues depuis les styles calculés). */
+export interface TextareaMetrics {
+  fontSize: number
+  lineHeight: number
+  paddingTop: number
+  paddingBottom: number
+}
+
+/** Sous-ensemble de `CSSStyleDeclaration` utile (valeurs CSS en texte). */
+export interface TextareaComputedStyle {
+  fontSize?: string
+  lineHeight?: string
+  paddingTop?: string
+  paddingBottom?: string
+}
+
+/** Ratio de repli quand `line-height: normal` n'expose aucune valeur exploitable. */
+export const DEFAULT_LINE_HEIGHT_RATIO = 1.4
+
+const toPx = (raw: string | undefined, fallback: number): number => {
+  const n = Number.parseFloat(String(raw ?? ""))
+  return Number.isFinite(n) && n > 0 ? n : fallback
+}
+
+/** Résout des styles calculés en métriques px (`normal` → `fontSize × 1.4`). */
+export const textareaMetrics = (style: TextareaComputedStyle): TextareaMetrics => {
+  const fontSize = toPx(style.fontSize, 14)
+  const lineHeight = toPx(style.lineHeight, fontSize * DEFAULT_LINE_HEIGHT_RATIO)
+  return {
+    fontSize,
+    lineHeight,
+    paddingTop: toPx(style.paddingTop, 0),
+    paddingBottom: toPx(style.paddingBottom, 0),
+  }
+}
+
+/** Hauteur maximale (px) de `maxRows` lignes — `Infinity` si `maxRows <= 0`. */
+export const textareaCap = (metrics: TextareaMetrics, maxRows: number): number =>
+  maxRows > 0
+    ? metrics.lineHeight * maxRows + metrics.paddingTop + metrics.paddingBottom
+    : Number.POSITIVE_INFINITY
+
+export interface TextareaSizing {
+  /** Hauteur à appliquer, en px */
+  height: number
+  /** Débordement vertical à appliquer */
+  overflowY: "auto" | "hidden"
+  /** Le contenu dépasse le plafond `maxRows` : le champ défile */
+  capped: boolean
+}
+
+/** Hauteur à appliquer pour un `scrollHeight` mesuré, plafonnée à `maxRows` lignes. */
+export const textareaSizing = (
+  metrics: TextareaMetrics,
+  scrollHeight: number,
+  maxRows = 0,
+): TextareaSizing => {
+  const full = Number.isFinite(scrollHeight) ? Math.max(scrollHeight, 0) : 0
+  const cap = textareaCap(metrics, maxRows)
+  const capped = full > cap
+  return { height: Math.min(full, cap), overflowY: capped ? "auto" : "hidden", capped }
+}

package/lib/useTextareaAutosize.ts

@@ -0,0 +1,83 @@
+// useTextareaAutosize — branchement DOM de l'auto-extension d'un <textarea>.
+//
+// Le calcul de hauteur est pur (`lib/textarea.ts`, testé) ; ici on ne fait que
+// mesurer et gérer le cycle de vie : montage, redimensionnement de la fenêtre,
+// changement de **largeur** du champ (le texte se replie → la hauteur change).
+// Rien n'est mesuré si `enabled()` est faux : la hauteur reste celle du CSS (`rows`).
+import { nextTick, onBeforeUnmount, onMounted, watch } from "vue"
+import type { Ref } from "vue"
+import { textareaMetrics, textareaSizing } from "./textarea"
+
+export interface UseTextareaAutosizeOptions {
+  /** Auto-extension active (sinon la hauteur du CSS s'applique) */
+  enabled: () => boolean
+  /** Plafond en lignes, 0 = illimité */
+  maxRows: () => number
+  /** États dont le changement impose une re-mesure (valeur, rows, maxRows, mode…) */
+  sources?: () => unknown
+  /**
+   * Re-mesure aussi quand la **largeur** du champ change. À laisser à `false` pour
+   * un champ qui bascule `input`/`textarea` : l'élément observé y est remplacé.
+   */
+  observeWidth?: boolean
+}
+
+export interface TextareaAutosize {
+  /** Re-mesure immédiatement (après un changement programmatique de valeur) */
+  resize: () => Promise<void>
+}
+
+/** Élément mesuré : textarea, mais aussi l'`<input>` d'un champ à mode mixte. */
+export type AutosizedElement = HTMLTextAreaElement | HTMLInputElement
+
+export const useTextareaAutosize = <T extends AutosizedElement>(
+  el: Ref<T | null>,
+  options: UseTextareaAutosizeOptions,
+): TextareaAutosize => {
+  const resize = async () => {
+    if (!el.value || !options.enabled()) return
+    await nextTick()
+    const node = el.value
+    if (!node || typeof getComputedStyle !== "function") return
+    // Hauteur remise à `auto` avant la mesure : sinon `scrollHeight` inclut déjà
+    // la hauteur appliquée précédemment et le champ ne rétrécit jamais.
+    node.style.height = "auto"
+    const metrics = textareaMetrics(getComputedStyle(node))
+    const sizing = textareaSizing(metrics, node.scrollHeight, options.maxRows())
+    node.style.height = `${sizing.height}px`
+    node.style.overflowY = sizing.overflowY
+  }
+
+  if (options.sources) watch(options.sources, () => void resize())
+
+  const onWindowResize = () => void resize()
+
+  let observer: ResizeObserver | null = null
+  let observedWidth = 0
+
+  onMounted(() => {
+    void resize()
+    if (typeof window === "undefined") return
+    window.addEventListener("resize", onWindowResize)
+    if (options.observeWidth === false || typeof ResizeObserver === "undefined") return
+    const node = el.value
+    if (!node) return
+    // Seule la **largeur** nous intéresse : la hauteur est la conséquence de notre
+    // propre écriture de `style.height`, l'observer rebouclerait dessus.
+    observer = new ResizeObserver((entries) => {
+      const width = entries[0]?.contentRect.width ?? 0
+      if (Math.abs(width - observedWidth) < 0.5) return
+      observedWidth = width
+      void resize()
+    })
+    observer.observe(node)
+  })
+
+  onBeforeUnmount(() => {
+    if (typeof window !== "undefined") window.removeEventListener("resize", onWindowResize)
+    observer?.disconnect()
+    observer = null
+  })
+
+  return { resize }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnax/ui",
-  "version": "0.0.72",
+  "version": "0.0.73",
   "module": "index.ts",
   "description": "UI design System",
   "type": "module",

package/styles/main.css

@@ -439,6 +439,7 @@ html.dark body {
 }
 
 .dark .q-input .q-field__native::placeholder,
+.dark .q-input-textarea .q-field__native::placeholder,
 .dark .q-input-tag__native::placeholder,
 .dark .q-input-otp__box::placeholder,
 .dark .q-select__search-input::placeholder,
@@ -2358,6 +2359,61 @@ html.dark body {
   margin-left: auto;
 }
 
+/* ===== QInputTextarea (champ multiligne) ===== */
+.q-input-textarea {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  font-size: 14px;
+}
+
+/* Le contenu est ancré **en haut** du contrôle (un champ simple centre sa valeur) :
+   `rows` doit correspondre à ce qu'on voit, et les icônes / affixes restent sur la
+   première ligne quand le champ grandit. 10px de padding = 40px de contrôle pour
+   1 ligne de 20px, soit la hauteur exacte du champ simple. */
+.q-input-textarea .q-field__control {
+  align-items: flex-start;
+  padding: 10px 12px;
+}
+
+.q-input-textarea .q-field__native {
+  flex: 1;
+  width: 100%;
+  min-width: 0;
+  height: auto;
+  padding: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  /* `rows` × line-height = hauteur visible ; l'auto-extension mesure la même valeur */
+  line-height: 20px;
+  resize: none;
+  overflow-y: hidden;
+}
+
+.q-input-textarea .q-field__native::placeholder {
+  color: rgb(0 0 0 / 0.45);
+}
+
+/* Affixes, icônes et bouton d'effacement : sur la première ligne */
+.q-input-textarea .q-field__icon,
+.q-input-textarea .q-field__prefix,
+.q-input-textarea .q-field__suffix,
+.q-input-textarea .q-field__clear {
+  align-self: flex-start;
+  line-height: 20px;
+}
+
+.q-field--dense.q-input-textarea .q-field__control {
+  padding: 7px 10px;
+}
+
+.q-field--dense.q-input-textarea .q-field__native {
+  line-height: 18px;
+}
+
 /* ===== QInputPassword (toggle œil) ===== */
 .q-input-password__toggle {
   display: inline-flex;