@dnax/ui 0.0.62 → 0.0.63

package/components/QCollapse.vue

@@ -23,6 +23,11 @@ interface Props {
   iconRight?: string
   /** Icône Iconify du chevron (défaut : lucide:chevron-down) */
   expandIcon?: string
+  /**
+   * **Guide vertical** à gauche du contenu (« tirets longs »), aligné sous l'icône du header —
+   * pour une arborescence (groupe + enfants). Suit le thème (`--border`).
+   */
+  guide?: boolean
   headerClass?: string
   /** Hauteur réduite */
   dense?: boolean
@@ -32,6 +37,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   defaultOpened: false,
+  guide: false,
   dense: false,
   disable: false,
   headerClass: "",
@@ -98,7 +104,7 @@ onMounted(measure)
 </script>
 
 <template>
-  <div class="q-collapse">
+  <div class="q-collapse" :class="{ 'q-collapse--guide': guide }">
     <button
       type="button"
       class="q-collapse__header"

package/components/QSelect.vue

@@ -60,7 +60,7 @@ import { radiusStyle, radiusValue, useRadius } from "../lib/useComponentProps"
 import type { RadiusProp } from "../lib/useComponentProps"
 import { useOverlayBack } from "../lib/overlayBack"
 import { createSearcher } from "../lib/search"
-import { optionsOf, selectionOf } from "../lib/select"
+import { optionsOf, selectionOf, shouldClearSearchOnClose } from "../lib/select"
 
 interface Props {
   /** Valeur sélectionnée : option, valeur (emit-value), ou tableau (multiple) */
@@ -112,6 +112,12 @@ interface Props {
   useSearch?: boolean | UseSearchOptions
   /** Placeholder du champ de recherche (useSearch) */
   searchPlaceholder?: string
+  /**
+   * Efface la recherche saisie à la **fermeture sans sélection** (clic extérieur, backdrop,
+   * Échap, ×). **Désactivé par défaut** : la recherche est conservée et réaffichée à la
+   * réouverture. Même activé, elle n'est effacée qu'en l'absence de valeur sélectionnée.
+   */
+  clearSearchOnClose?: boolean
   /** Mode d'ouverture : inline (dropdown) | modal (centré) | sheet (bottom sheet) | dialog (plein écran) */
   mode?: "inline" | "modal" | "sheet" | "dialog"
   /** Largeur du panneau (modal/sheet) : "300px", "80%"… (par défaut : modal 480px / 90% si écran < 768px, sheet 640px) */
@@ -164,6 +170,8 @@ const props = withDefaults(defineProps<Props>(), {
   mode: "inline",
   offset: 8,
   position: "auto",
+  // Comportement de "reset" de la recherche à la fermeture : **désactivé par défaut**
+  clearSearchOnClose: false,
 })
 
 const emit = defineEmits<{
@@ -532,9 +540,10 @@ const openPopup = () => {
 
 const closePopup = () => {
   open.value = false
-  // Fermeture sans sélection (clic extérieur, backdrop, Échap, ×) : on abandonne la
-  // recherche saisie pour ne pas laisser un filtre fantôme au prochain affichage.
-  if (query.value !== "" && !hasValue.value) {
+  // Fermeture sans sélection (clic extérieur, backdrop, Échap, ×) : la recherche est
+  // **conservée par défaut** (opt-in via `clearSearchOnClose`) — le filtre ne "disparaît"
+  // donc plus tout seul à la réouverture (cf. `shouldClearSearchOnClose`).
+  if (shouldClearSearchOnClose(props.clearSearchOnClose, query.value, hasValue.value)) {
     query.value = ""
     emit("update:inputValue", "")
   }

package/lib/select.test.ts

@@ -2,7 +2,7 @@
 // Régression : `multiple` + modèle scalaire (`false`) faisait jeter `list.map` et
 // empêchait le popup entier de se rendre.
 import { describe, expect, it } from "bun:test"
-import { optionsOf, selectionOf } from "./select"
+import { optionsOf, selectionOf, shouldClearSearchOnClose } from "./select"
 
 describe("optionsOf", () => {
   it("laisse passer un tableau (même vide)", () => {
@@ -40,3 +40,17 @@ describe("selectionOf", () => {
     expect(selectionOf(undefined, false)).toEqual([])
   })
 })
+
+describe("shouldClearSearchOnClose", () => {
+  it("désactivé (défaut) → la recherche est CONSERVÉE", () => {
+    expect(shouldClearSearchOnClose(false, "ada", false)).toBe(false)
+    expect(shouldClearSearchOnClose(false, "ada", true)).toBe(false)
+    expect(shouldClearSearchOnClose(false, "", false)).toBe(false)
+  })
+
+  it("activé → efface seulement si une recherche est saisie et aucune valeur choisie", () => {
+    expect(shouldClearSearchOnClose(true, "ada", false)).toBe(true)
+    expect(shouldClearSearchOnClose(true, "", false)).toBe(false) // rien à effacer
+    expect(shouldClearSearchOnClose(true, "ada", true)).toBe(false) // valeur choisie → label
+  })
+})

package/lib/select.ts

@@ -28,3 +28,18 @@ export const selectionOf = (value: unknown, multiple: boolean): any[] => {
   if (multiple) return Array.isArray(value) ? value : []
   return [value]
 }
+
+/**
+ * La recherche saisie doit-elle être **effacée** à la fermeture du panneau (clic extérieur,
+ * backdrop, Échap, ×) ?
+ *
+ * **Opt-in** (prop `clearSearchOnClose`, désactivée par défaut) : par défaut la recherche est
+ * **conservée** — un `inputValue` vidé à la fermeture n'est pas toujours souhaité (formulaire
+ * qui reprend la saisie, filtre persistant…). Même sous opt-in, on n'efface que s'il n'y a **pas**
+ * de valeur : sinon le champ d'affichage reprendrait le label et la recherche n'aurait plus cours.
+ */
+export const shouldClearSearchOnClose = (
+  enabled: boolean,
+  query: string,
+  hasValue: boolean,
+): boolean => enabled && query !== "" && !hasValue

package/lib/styleTokens.test.ts

@@ -100,6 +100,7 @@ describe("classes de style (composant ↔ CSS)", () => {
       "q-bottom-sheet__header-text--with-description",
       ".q-bottom-sheet__header-text--with-description .q-bottom-sheet__title",
     ],
+    ["components/QCollapse.vue", "q-collapse--guide", ".q-collapse--guide .q-collapse__inner"],
   ]
 
   for (const [file, className, selector] of CONTRACTS) {
@@ -109,6 +110,22 @@ describe("classes de style (composant ↔ CSS)", () => {
       expect({ selector, inCss: css.includes(selector) }).toEqual({ selector, inCss: true })
     })
   }
+
+  it("une description ajoute aussi de l'air AVANT le séparateur (padding-bottom)", () => {
+    // Le séparateur est le `border-bottom` de l'en-tête : sans ce padding, le trait colle
+    // au texte de la description.
+    for (const selector of [
+      ".q-dialog__header-text--with-description",
+      ".q-bottom-sheet__header-text--with-description",
+    ]) {
+      const block = blockAfter(css, selector)
+      expect({ selector, defined: block !== undefined }).toEqual({ selector, defined: true })
+      expect({ selector, padded: block!.includes("padding-bottom") }).toEqual({
+        selector,
+        padded: true,
+      })
+    }
+  })
 })
 
 describe("mode sombre des contrôles", () => {
@@ -121,3 +138,28 @@ describe("mode sombre des contrôles", () => {
     }
   })
 })
+
+describe("en-têtes de panneau : safe-area", () => {
+  // La safe-area doit **s'ajouter** au padding de base, jamais le remplacer : sinon, sans
+  // encoche (`env()` = 0), le titre et le × collent au bord haut.
+  const PANEL_HEADERS = [
+    ".q-select__sheet--dialog .q-select__sheet-header",
+    ".q-date-picker__sheet--dialog .q-date-picker__sheet-header",
+    ".q-country-picker__sheet--dialog .q-country-picker__sheet-header",
+  ]
+
+  for (const selector of PANEL_HEADERS) {
+    it(`« ${selector} » ajoute la safe-area à un padding de base`, () => {
+      const block = blockAfter(css, selector)
+      expect({ selector, defined: block !== undefined }).toEqual({ selector, defined: true })
+      expect({ selector, adds: block!.includes("calc(env(safe-area-inset-top) + 16px)") }).toEqual({
+        selector,
+        adds: true,
+      })
+      expect({ selector, bare: block!.includes("padding-top: env(safe-area-inset-top);") }).toEqual({
+        selector,
+        bare: false,
+      })
+    })
+  }
+})

package/package.json

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

package/styles/main.css

@@ -3609,6 +3609,15 @@ html.dark body {
   padding: 0 16px;
 }
 
+/* Guide vertical (« tirets longs ») à gauche du contenu : trait aligné sous l'**icône** du
+   header (padding 16px + icône 18px / 2) et contenu décalé d'autant. Suit le thème via
+   `--border` (invisible nulle part : clair comme sombre). */
+.q-collapse--guide .q-collapse__inner {
+  margin-left: 25px;
+  padding-left: 12px;
+  border-left: 1px solid var(--border);
+}
+
 /* ===== QCheckbox / QRadio ===== */
 .q-checkbox,
 .q-radio {
@@ -3855,7 +3864,7 @@ html.dark body {
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  padding: 14px 16px;
+  padding: 16px 16px 14px;
   border-bottom: 1px solid rgb(0 0 0 / 0.08);
   font-weight: 600;
   font-size: 15px;
@@ -5107,7 +5116,9 @@ a.q-breadcrumbs__el:hover {
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  padding: 14px 16px;
+  /* Un peu plus d'air en haut (titre + bouton de fermeture) : le panneau a un coin
+     arrondi, 14px des deux côtés collait le titre au bord. Bas inchangé. */
+  padding: 16px 16px 14px;
   border-bottom: 1px solid rgb(0 0 0 / 0.08);
   font-weight: 600;
   font-size: 15px;
@@ -5344,7 +5355,12 @@ a.q-breadcrumbs__el:hover {
 }
 
 /* Description présente → le bloc titre+description est plus haut que la toolbar centrée :
-   un peu d'air au-dessus du titre évite qu'il colle au bord haut. */
+   un peu d'air au-dessus du titre, **et un peu avant le séparateur** (sinon le trait colle
+   au texte de la description). */
+.q-bottom-sheet__header-text--with-description {
+  padding-bottom: 6px;
+}
+
 .q-bottom-sheet__header-text--with-description .q-bottom-sheet__title {
   padding-top: 4px;
 }
@@ -5407,10 +5423,17 @@ a.q-breadcrumbs__el:hover {
 }
 
 .q-bottom-sheet__panel--dark .q-bottom-sheet__header,
-.q-bottom-sheet__panel--dark .q-bottom-sheet__footer {
+.q-bottom-sheet__panel--dark .q-bottom-sheet__footer,
+/* Thème sombre : le noir 8 % codé en dur est invisible (même classe que le dialog). */
+.dark .q-bottom-sheet__header,
+.dark .q-bottom-sheet__footer {
   border-color: rgb(255 255 255 / 0.12);
 }
 
+.dark .q-bottom-sheet__close:hover {
+  background-color: rgb(255 255 255 / 0.08);
+}
+
 /* — transitions (slide vertical type vaul) — durées configurables via
    transition-duration (vars --q-bs-duration-enter/leave) */
 .q-bs-enter-active,
@@ -5733,9 +5756,11 @@ a.q-breadcrumbs__el:hover {
 }
 
 .q-date-picker__sheet--dialog .q-date-picker__sheet-header {
-  padding-top: 0;
-  padding-top: constant(safe-area-inset-top);
-  padding-top: env(safe-area-inset-top);
+  /* La safe-area **s'ajoute** au padding de base — sinon le titre et le × collent au bord
+     haut (0 px) sur tout appareil sans encoche (`env()` vaut 0). */
+  padding-top: 16px;
+  padding-top: calc(constant(safe-area-inset-top) + 16px);
+  padding-top: calc(env(safe-area-inset-top) + 16px);
 }
 
 .q-date-picker__sheet-header {
@@ -5743,7 +5768,7 @@ a.q-breadcrumbs__el:hover {
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  padding: 14px 16px;
+  padding: 16px 16px 14px;
   border-bottom: 1px solid rgb(0 0 0 / 0.08);
   font-weight: 600;
   font-size: 15px;
@@ -6211,16 +6236,17 @@ a.q-breadcrumbs__el:hover {
   box-shadow: none;
 }
 .q-country-picker__sheet--dialog .q-country-picker__sheet-header {
-  padding-top: 0;
-  padding-top: constant(safe-area-inset-top);
-  padding-top: env(safe-area-inset-top);
+  /* Safe-area **ajoutée** au padding de base (cf. date-picker). */
+  padding-top: 16px;
+  padding-top: calc(constant(safe-area-inset-top) + 16px);
+  padding-top: calc(env(safe-area-inset-top) + 16px);
 }
 .q-country-picker__sheet-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  padding: 14px 16px;
+  padding: 16px 16px 14px;
   border-bottom: 1px solid rgb(0 0 0 / 0.08);
   font-weight: 600;
   font-size: 15px;
@@ -6972,7 +6998,12 @@ a.q-breadcrumbs__el:hover {
 }
 
 /* Description présente → le bloc titre+description est plus haut que la toolbar centrée :
-   un peu d'air au-dessus du titre évite qu'il colle au bord haut. */
+   un peu d'air au-dessus du titre, **et un peu avant le séparateur** (sinon le trait colle
+   au texte de la description). */
+.q-dialog__header-text--with-description {
+  padding-bottom: 6px;
+}
+
 .q-dialog__header-text--with-description .q-dialog__title {
   padding-top: 4px;
 }
@@ -8146,9 +8177,11 @@ a.q-breadcrumbs__el:hover {
    En mode sheet avec recherche en bas, c'est le champ qui gère l'inset ;
    sinon (liste seule) c'est la liste. */
 .q-select__sheet--dialog .q-select__sheet-header {
-  padding-top: 0;
-  padding-top: constant(safe-area-inset-top);
-  padding-top: env(safe-area-inset-top);
+  /* Safe-area **ajoutée** au padding de base — en mode plein écran le titre et le ×
+     sont au bord haut ; sans encoche `env()` vaut 0, d'où le padding de repli. */
+  padding-top: 16px;
+  padding-top: calc(constant(safe-area-inset-top) + 16px);
+  padding-top: calc(env(safe-area-inset-top) + 16px);
 }
 
 .q-select__sheet--dialog .q-select__sheet-list,