@dnax/ui 0.0.7 → 0.0.10

package/components/QSelect.vue

@@ -168,11 +168,28 @@ const modeOptions = computed<QSelectModeOptions | undefined>(() => {
   return undefined
 })
 
+// — Options normalisées : les primitives (string/number) deviennent { value, label } —
+const isObjectOption = (o: any): boolean => o !== null && typeof o === "object"
+
+const normalizedOptions = computed<any[]>(() =>
+  props.options.map((o) => {
+    if (isObjectOption(o)) return o
+    // Objet normalisé : garde la valeur d'origine (non-énumérable → invisible
+    // pour l'affichage, la recherche fuse et les clés de rendu)
+    const norm: any = { value: o, label: String(o) }
+    Object.defineProperty(norm, "__raw", { value: o, enumerable: false })
+    return norm
+  }),
+)
+
 // — Valeurs des options —
-const getOptionValue = (opt: any): any =>
-  typeof props.optionValue === "function" ? props.optionValue(opt) : opt?.[props.optionValue]
+const getOptionValue = (opt: any): any => {
+  if (!isObjectOption(opt)) return opt
+  return typeof props.optionValue === "function" ? props.optionValue(opt) : opt?.[props.optionValue]
+}
 
 const getOptionLabel = (opt: any): string => {
+  if (!isObjectOption(opt)) return opt === undefined || opt === null ? "" : String(opt)
   const v = typeof props.optionLabel === "function" ? props.optionLabel(opt) : opt?.[props.optionLabel]
   return v === undefined || v === null ? "" : String(v)
 }
@@ -183,7 +200,7 @@ const selectedOptions = computed<any[]>(() => {
   const list = props.multiple ? (props.modelValue as any[]) : [props.modelValue]
   return list
     .map((v) => {
-      if (props.emitValue) return props.options.find((o) => getOptionValue(o) === v)
+      if (props.emitValue) return normalizedOptions.value.find((o) => getOptionValue(o) === v)
       return v
     })
     .filter((o) => o !== undefined)
@@ -194,7 +211,8 @@ const isSelected = (opt: any) =>
 
 const select = (opt: any) => {
   if (props.disable || props.readonly) return
-  const value = props.emitValue ? getOptionValue(opt) : opt
+  // Primitives normalisées : émettre la valeur d'origine (ex. "red"), pas l'objet
+  const value = props.emitValue ? getOptionValue(opt) : (opt?.__raw !== undefined ? opt.__raw : opt)
 
   if (props.multiple) {
     if (isSelected(opt)) {
@@ -253,7 +271,7 @@ const searchKeys = computed<string[]>(() => {
 })
 
 const searcher = computed(() =>
-  createSearcher(props.options, {
+  createSearcher(normalizedOptions.value, {
     keys: searchKeys.value,
     threshold: typeof props.useSearch === "object" ? (props.useSearch.threshold ?? 0.4) : 0.4,
   }),
@@ -261,7 +279,7 @@ const searcher = computed(() =>
 
 // — Options affichées (recherche floue, filtre simple, ou serveur) —
 const displayOptions = computed(() => {
-  let list = props.options
+  let list = normalizedOptions.value
   if (!hasFilter.value) {
     if (searchEnabled.value && searchKeys.value.length > 0) {
       list = searcher.value.search(query.value)

package/components/QSidebar.vue

@@ -14,7 +14,7 @@ export const qSidebarKey: InjectionKey<SidebarContext> = Symbol("q-sidebar")
 </script>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, provide, ref } from "vue"
+import { computed, onBeforeUnmount, onMounted, provide, ref, watch } from "vue"
 import type { StyleValue } from "vue"
 import { cn } from "../lib/utils"
 import { useOverlayBack } from "../lib/overlayBack"
@@ -113,6 +113,18 @@ onBeforeUnmount(() => {
   if (typeof document !== "undefined") document.removeEventListener("keydown", onDocKeydown)
 })
 
+// Verrouille le scroll du body quand la sidebar offcanvas est ouverte : le body
+// ne bouge plus en arrière-plan (et le swipe ne part pas sur la page)
+watch(
+  () => !isStatic.value && open.value,
+  (locked) => {
+    if (typeof document !== "undefined") {
+      document.body.style.overflow = locked ? "hidden" : ""
+    }
+  },
+  { immediate: true },
+)
+
 const rootClasses = computed(() =>
   cn(
     "q-sidebar",
@@ -133,14 +145,87 @@ const rootStyle = computed<Record<string, string>>(() => {
   if (props.maxHeight) style.maxHeight = props.maxHeight
   return style
 })
+
+// — Swipe pour fermer (mode offcanvas, pattern bottom-sheet) —
+const rootEl = ref<HTMLElement | null>(null)
+const dragging = ref(false)
+let startX = 0
+let startY = 0
+let currentDx = 0
+let isHorizontal = false
+
+const onPointerDown = (e: PointerEvent) => {
+  if (isStatic.value || !open.value || props.disable) return
+  ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
+  startX = e.clientX
+  startY = e.clientY
+  currentDx = 0
+  isHorizontal = false
+  dragging.value = true
+}
+
+const onPointerMove = (e: PointerEvent) => {
+  if (!dragging.value || !rootEl.value) return
+  const dx = e.clientX - startX
+  const dy = e.clientY - startY
+
+  // Ne capture le geste que s'il est majoritairement horizontal (le scroll
+  // vertical du contenu continue de fonctionner)
+  if (!isHorizontal) {
+    if (Math.abs(dx) > 8 && Math.abs(dx) > Math.abs(dy)) {
+      isHorizontal = true
+      rootEl.value.style.transition = "none"
+    }
+    else return
+  }
+
+  // Sens : left → glisser vers la gauche (dx négatif) ; right → vers la droite
+  const dir = props.side === "right" ? 1 : -1
+  const travel = Math.max(0, dir * dx)
+  currentDx = travel
+  rootEl.value.style.transform = `translateX(${dir === 1 ? travel : -travel}px)`
+}
+
+const onPointerUp = () => {
+  if (!dragging.value) return
+  dragging.value = false
+  const el = rootEl.value
+  if (!el) return
+  el.style.transition = "" // restaure la transition CSS
+  const width = el.offsetWidth || parseInt(props.width, 10) || 260
+  if (currentDx > Math.min(80, width * 0.3)) {
+    // Fermer : l'animation continue depuis la position de swipe jusqu'au bord
+    const final = props.side === "right" ? "100%" : "-100%"
+    el.style.transform = `translateX(${final})`
+    setOpen(false)
+  }
+  else if (el) {
+    el.style.transform = "" // rebond : la transition CSS ramène à l'ouverture
+  }
+  currentDx = 0
+}
+
+// Nettoie le transform inline laissé par le swipe à la réouverture, pour que
+// le panneau reparte de la position CSS (pas de l'endroit où on a relâché)
+watch(open, (v) => {
+  const el = rootEl.value
+  if (!el) return
+  el.style.transition = ""
+  if (v) el.style.transform = ""
+})
 </script>
 
 <template>
   <aside
+    ref="rootEl"
     class="q-sidebar"
     :class="rootClasses"
     :style="[rootStyle, props.style]"
     :aria-hidden="!isStatic && !open ? 'true' : undefined"
+    @pointerdown="onPointerDown"
+    @pointermove="onPointerMove"
+    @pointerup="onPointerUp"
+    @pointercancel="onPointerUp"
   >
     <slot />
   </aside>

package/package.json

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

package/styles/main.css

@@ -859,9 +859,19 @@ html.dark body {
 }
 
 /* Icône empilée au-dessus du label : aérer l'icône du haut du cadre (le tab
-   n'a que du padding horizontal par défaut) et le label du bas */
-.q-tab--stacked-icon {
-  padding: 8px 16px;
+   n'a que du padding horizontal par défaut) et le label du bas.
+   Le padding est mis sur le CONTENU (pas le .q-tab qui a height:100% en
+   stretch → le padding y serait absorbé). */
+.q-tab--stacked-icon .q-tab__content {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
+/* Fallback : tout tab avec icône et NON inline-label (indépendant de la classe
+   JS, au cas où l'icône est rendue via slot) */
+.q-tab:not(.q-tab--inline-label):has(> .q-tab__content > .q-tab__icon) .q-tab__content {
+  padding-top: 12px;
+  padding-bottom: 12px;
 }
 
 .q-tab__icon {
@@ -3611,6 +3621,13 @@ html.dark body {
   transition:
     transform 0.25s ease,
     visibility 0.25s;
+  /* Scroll vertical natif autorisé, gestes horizontaux (swipe pour fermer) au JS.
+     touch-action n'est PAS hérité → on l'applique à tous les descendants : le
+     geste peut démarrer sur le contenu scrollable (.q-sidebar__content) sans que
+     le navigateur ne prenne le swipe pour le body. */
+  touch-action: pan-y;
+  /* Empêche le scroll-chaining : swiper la sidebar ne fait plus bouger le body */
+  overscroll-behavior: contain;
   /* Safe-area : encoche, barre d'accueil et côtés en paysage */
   padding-top: 0;
   padding-top: constant(safe-area-inset-top);
@@ -3623,6 +3640,13 @@ html.dark body {
   padding-left: env(safe-area-inset-left);
 }
 
+/* Tous les descendants (contenu scrollable, menu, boutons…) : gestes horizontaux
+   au JS, scroll vertical natif uniquement */
+.q-sidebar--offcanvas,
+.q-sidebar--offcanvas * {
+  touch-action: pan-y;
+}
+
 .q-sidebar--offcanvas.q-sidebar--right {
   left: auto;
   right: 0;
@@ -3690,6 +3714,8 @@ html.dark body {
   overflow-y: auto;
   padding: 8px;
   scrollbar-width: thin;
+  /* Le scroll du contenu ne doit pas se propager au body (swipe-to-close) */
+  overscroll-behavior: contain;
 }
 
 .q-sidebar__footer {