@dnax/ui 0.0.43 → 0.0.44

package/components/QDatePicker.vue

@@ -1,19 +1,21 @@
 <script setup lang="ts">
 // QDatePicker — sélecteur de date type DatePicker shadcn-vue, API Quasar :
 // <q-date-picker v-model="date" mode="sheet" label="Échéance" clearable outlined />
-// Modes : inline (calendrier en place) | modal (centré) | sheet (bottom sheet) | dialog (plein écran).
-import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue"
+// Modes : inline (calendrier en place) | popover (panneau ancré sous le champ) |
+// modal (centré) | sheet (bottom sheet) | dialog (plein écran).
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue"
 import { Icon } from "@iconify/vue"
 import { icons } from "../lib/icons"
 import { cn } from "../lib/utils"
 import { useOverlayBack } from "../lib/overlayBack"
+import { placePopover, type PopoverPlacement } from "../lib/datePicker"
 import QDateCalendar from "./internal/QDateCalendar.vue"
 
 interface Props {
   /** Date sélectionnée */
   modelValue?: Date | null
   /** Mode d'affichage */
-  mode?: "inline" | "sheet" | "modal" | "dialog"
+  mode?: "inline" | "popover" | "sheet" | "modal" | "dialog"
   label?: string
   stackLabel?: boolean
   hint?: string
@@ -37,10 +39,14 @@ interface Props {
   disabledDates?: (d: Date) => boolean
   /** Premier jour de la semaine : 0 = dimanche, 1 = lundi (défaut) */
   firstDayOfWeek?: number
-  /** Largeur du panneau (modal/sheet) */
+  /** Largeur du panneau (popover/sheet/modal) */
   width?: string
-  /** Titre du panneau */
+  /** Titre du panneau (modes à voile : sheet/modal/dialog) */
   title?: string
+  /** Raccourci « Today » sous le calendrier (tous les modes) */
+  todayBtn?: boolean
+  /** En-tête : libellé cliquable ouvrant le choix du mois (tous les modes) */
+  monthDropdown?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -58,6 +64,8 @@ const props = withDefaults(defineProps<Props>(), {
   firstDayOfWeek: 1,
   width: "",
   title: "",
+  todayBtn: false,
+  monthDropdown: false,
 })
 
 const emit = defineEmits<{
@@ -67,14 +75,22 @@ const emit = defineEmits<{
   clear: []
 }>()
 
+/** Champ déclencheur (tout sauf `inline`) */
 const isPanelMode = computed(() => props.mode !== "inline")
+/** Panneau ancré au champ : ni voile, ni blocage du scroll, ni retour navigateur */
+const isPopover = computed(() => props.mode === "popover")
+/** Modes à voile sombre (sheet/modal/dialog) */
+const isOverlayMode = computed(
+  () => props.mode === "sheet" || props.mode === "modal" || props.mode === "dialog",
+)
 
 const open = ref(false)
 const rootEl = ref<HTMLElement | null>(null)
 const sheetRef = ref<HTMLElement | null>(null)
 
-// « Retour » navigateur → ferme le panneau (sheet/modal/dialog) au lieu de naviguer
-const panelOpen = computed(() => isPanelMode.value && open.value)
+// « Retour » navigateur → ferme le panneau au voile (sheet/modal/dialog) au lieu de
+// naviguer. Le popover, lui, reste un menu : clic extérieur / Échap suffisent.
+const panelOpen = computed(() => isOverlayMode.value && open.value)
 useOverlayBack(panelOpen, () => closePopup(), "QDatePicker")
 
 // — Affichage du champ —
@@ -129,6 +145,51 @@ const sheetStyle = computed<Record<string, string> | undefined>(() =>
   props.width ? { width: props.width, maxWidth: props.width } : undefined,
 )
 
+// — Popover : panneau ancré au champ, position calculée en `fixed` (téléporté) —
+// Le calcul vit dans un helper pur (`lib/datePicker.ts`) : ici on ne fait que
+// mesurer les rectangles et sérialiser le résultat.
+const popoverPlacement = ref<PopoverPlacement | null>(null)
+// Conserve le dernier emplacement à la fermeture : l'animation de sortie en dépend.
+const popoverStyle = computed<Record<string, string>>(() => {
+  const p = popoverPlacement.value
+  if (!p) return { visibility: "hidden" }
+  return {
+    top: p.top === null ? "auto" : `${p.top}px`,
+    bottom: p.bottom === null ? "auto" : `${p.bottom}px`,
+    left: `${p.left}px`,
+    "--q-date-picker-caret": `${p.caret}px`,
+  }
+})
+
+/** Le panneau borne sa hauteur à l'espace visible ; la liste scrolle au-delà. */
+const popoverPanelStyle = computed<Record<string, string | undefined>>(() => ({
+  ...sheetStyle.value,
+  maxHeight: popoverPlacement.value ? `${popoverPlacement.value.maxHeight}px` : undefined,
+}))
+
+const positionPopover = () => {
+  const el = rootEl.value
+  if (!el || typeof window === "undefined") return
+
+  // Ancre = bas du CHAMP : `.q-field__bottom` réserve ~24px même vide, ce qui
+  // éloignerait le panneau. Quand un hint / une erreur est affiché, on prend la
+  // racine pour ne pas recouvrir le texte (même règle que le popup de QSelect).
+  const control = el.querySelector<HTMLElement>(".q-field__control")
+  const hasBottomText = !!el.querySelector(".q-field__hint, .q-field__error")
+  const anchor = (!hasBottomText && control ? control : el).getBoundingClientRect()
+
+  popoverPlacement.value = placePopover({
+    anchor: { top: anchor.top, bottom: anchor.bottom, left: anchor.left, width: anchor.width },
+    viewport: { width: window.innerWidth, height: window.innerHeight },
+    // Largeur mesurée après rendu (le champ `width` peut être en %, vw…)
+    panelWidth: sheetRef.value?.getBoundingClientRect().width,
+  })
+}
+
+const onViewportChange = () => {
+  if (open.value && isPopover.value) positionPopover()
+}
+
 // — Fermetures : clic extérieur (hors panneau téléporté), Échap, scroll lock —
 const onDocMousedown = (e: MouseEvent) => {
   const target = e.target as Node
@@ -141,10 +202,15 @@ const onDocKeydown = (e: KeyboardEvent) => {
   if (e.key === "Escape" && open.value) closePopup()
 }
 
-watch(open, (v) => {
-  if (typeof document !== "undefined" && isPanelMode.value) {
+watch(open, async (v) => {
+  // Le voile bloque le scroll de la page ; le popover le laisse vivre.
+  if (typeof document !== "undefined" && isOverlayMode.value) {
     document.body.style.overflow = v ? "hidden" : ""
   }
+  if (v && isPopover.value) {
+    await nextTick()
+    positionPopover()
+  }
 })
 
 onMounted(() => {
@@ -153,12 +219,17 @@ onMounted(() => {
     // sinon l'événement avant `document` → calendrier jamais fermé au clic extérieur.
     document.addEventListener("mousedown", onDocMousedown, true)
     document.addEventListener("keydown", onDocKeydown)
+    // Le champ peut bouger (scroll) ou la fenêtre changer de taille : on repositionne
+    window.addEventListener("scroll", onViewportChange, true)
+    window.addEventListener("resize", onViewportChange)
   }
 })
 onBeforeUnmount(() => {
   if (typeof document !== "undefined") {
     document.removeEventListener("mousedown", onDocMousedown, true)
     document.removeEventListener("keydown", onDocKeydown)
+    window.removeEventListener("scroll", onViewportChange, true)
+    window.removeEventListener("resize", onViewportChange)
     document.body.style.overflow = ""
   }
 })
@@ -174,6 +245,8 @@ onBeforeUnmount(() => {
         :max-date="maxDate"
         :disabled-dates="disabledDates"
         :first-day-of-week="firstDayOfWeek"
+        :today-btn="todayBtn"
+        :month-dropdown="monthDropdown"
         @select="onSelect"
       />
     </div>
@@ -203,11 +276,15 @@ onBeforeUnmount(() => {
       </div>
 
       <Teleport to="body">
-        <Transition name="q-date-modal">
+        <Transition :name="isPopover ? 'q-date-popover' : 'q-date-modal'">
           <div
             v-if="open"
             class="q-date-picker__overlay"
-            :class="`q-date-picker__overlay--${mode}`"
+            :class="[
+              `q-date-picker__overlay--${mode}`,
+              isPopover && popoverPlacement?.direction === 'up' && 'q-date-picker__overlay--popover-up',
+            ]"
+            :style="isPopover ? popoverStyle : undefined"
             role="presentation"
             @mousedown.self="closePopup"
           >
@@ -215,12 +292,14 @@ onBeforeUnmount(() => {
               ref="sheetRef"
               class="q-date-picker__sheet"
               :class="`q-date-picker__sheet--${mode}`"
-              :style="sheetStyle"
+              :style="isPopover ? popoverPanelStyle : sheetStyle"
               role="dialog"
-              aria-modal="true"
+              :aria-modal="isOverlayMode ? 'true' : undefined"
               :aria-label="sheetTitle"
             >
-              <div class="q-date-picker__sheet-header">
+              <!-- En-tête (titre + fermeture) réservé aux modes à voile : un popover
+                   n'a ni titre ni bouton de fermeture, il se ferme au clic extérieur. -->
+              <div v-if="isOverlayMode" class="q-date-picker__sheet-header">
                 <span class="q-date-picker__sheet-title">{{ sheetTitle }}</span>
                 <button
                   type="button"
@@ -238,6 +317,8 @@ onBeforeUnmount(() => {
                   :max-date="maxDate"
                   :disabled-dates="disabledDates"
                   :first-day-of-week="firstDayOfWeek"
+                  :today-btn="todayBtn"
+                  :month-dropdown="monthDropdown"
                   @select="onSelect"
                 />
               </div>

package/components/internal/QDateCalendar.vue

@@ -15,11 +15,17 @@ interface Props {
   disabledDates?: (d: Date) => boolean
   /** Premier jour de la semaine : 0 = dimanche, 1 = lundi (défaut) */
   firstDayOfWeek?: number
+  /** Raccourci « Today » sous la grille */
+  todayBtn?: boolean
+  /** En-tête : libellé cliquable ouvrant le choix du mois (et de l'année) */
+  monthDropdown?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   modelValue: null,
   firstDayOfWeek: 1,
+  todayBtn: false,
+  monthDropdown: false,
 })
 
 const emit = defineEmits<{ select: [date: Date] }>()
@@ -27,6 +33,8 @@ const emit = defineEmits<{ select: [date: Date] }>()
 const today = new Date()
 const viewYear = ref(props.modelValue?.getFullYear() ?? today.getFullYear())
 const viewMonth = ref(props.modelValue?.getMonth() ?? today.getMonth())
+/** Choix du mois ouvert (en-tête) — remplace la grille des jours */
+const monthPickerOpen = ref(false)
 
 watch(
   () => props.modelValue,
@@ -68,6 +76,13 @@ const monthLabel = computed(() =>
   ),
 )
 
+/** Noms courts des 12 mois, dans la langue du navigateur (comme `monthLabel`) */
+const monthNames = computed(() =>
+  Array.from({ length: 12 }, (_, i) =>
+    new Intl.DateTimeFormat(undefined, { month: "short" }).format(new Date(2000, i, 1)),
+  ),
+)
+
 const prevMonth = () => {
   if (viewMonth.value === 0) {
     viewMonth.value = 11
@@ -88,6 +103,15 @@ const nextMonth = () => {
   }
 }
 
+const prevYear = () => viewYear.value--
+const nextYear = () => viewYear.value++
+
+/** Choix d'un mois dans l'en-tête : on saute au mois, la grille revient */
+const onPickMonth = (month: number) => {
+  viewMonth.value = month
+  monthPickerOpen.value = false
+}
+
 const isSelected = (d: Date) => !!props.modelValue && sameDay(props.modelValue, d)
 const isToday = (d: Date) => sameDay(d, new Date())
 
@@ -101,6 +125,14 @@ const onSelectDate = (d: Date) => {
   if (isDisabled(d)) return
   emit("select", d)
 }
+
+/** Raccourci « Today » : désactivé quand aujourd'hui est hors bornes / désactivé */
+const todaySelectable = computed(() => !isDisabled(startOfDay(new Date())))
+
+const selectToday = () => {
+  if (!todaySelectable.value) return
+  emit("select", startOfDay(new Date()))
+}
 </script>
 
 <template>
@@ -114,7 +146,19 @@ const onSelectDate = (d: Date) => {
       >
         <Icon :icon="icons.chevronLeft" aria-hidden="true" />
       </button>
-      <span class="q-date-calendar__nav-label">{{ monthLabel }}</span>
+      <button
+        v-if="monthDropdown"
+        type="button"
+        class="q-date-calendar__nav-label q-date-calendar__nav-label--button"
+        :class="{ 'q-date-calendar__nav-label--open': monthPickerOpen }"
+        :aria-expanded="monthPickerOpen"
+        aria-label="Choisir le mois"
+        @click="monthPickerOpen = !monthPickerOpen"
+      >
+        <span class="q-date-calendar__nav-text">{{ monthLabel }}</span>
+        <Icon :icon="icons.chevronDown" class="q-date-calendar__nav-caret" aria-hidden="true" />
+      </button>
+      <span v-else class="q-date-calendar__nav-label">{{ monthLabel }}</span>
       <button
         type="button"
         class="q-date-calendar__nav-btn"
@@ -125,29 +169,78 @@ const onSelectDate = (d: Date) => {
       </button>
     </div>
 
-    <div class="q-date-calendar__weekdays">
-      <span v-for="(d, i) in weekdayLabels" :key="i" class="q-date-calendar__weekday">{{ d }}</span>
-    </div>
-
-    <div class="q-date-calendar__weeks">
-      <div v-for="(week, wi) in weeks" :key="wi" class="q-date-calendar__week">
+    <!-- Choix du mois / de l'année (en-tête cliquable) -->
+    <div v-if="monthDropdown && monthPickerOpen" class="q-date-calendar__picker">
+      <div class="q-date-calendar__picker-year">
+        <button
+          type="button"
+          class="q-date-calendar__nav-btn"
+          aria-label="Année précédente"
+          @click="prevYear"
+        >
+          <Icon :icon="icons.chevronLeft" aria-hidden="true" />
+        </button>
+        <span class="q-date-calendar__picker-year-label">{{ viewYear }}</span>
         <button
-          v-for="(d, di) in week"
-          :key="di"
           type="button"
-          class="q-date-calendar__day"
-          :class="cn(
-            !d && 'q-date-calendar__day--empty',
-            !!d && isToday(d) && 'q-date-calendar__day--today',
-            !!d && isSelected(d) && 'q-date-calendar__day--selected',
-          )"
-          :disabled="!d || isDisabled(d)"
-          :aria-selected="!!d && isSelected(d) ? 'true' : 'false'"
-          @click="d && onSelectDate(d)"
+          class="q-date-calendar__nav-btn"
+          aria-label="Année suivante"
+          @click="nextYear"
         >
-          {{ d ? d.getDate() : "" }}
+          <Icon :icon="icons.chevronRight" aria-hidden="true" />
         </button>
       </div>
+      <div class="q-date-calendar__picker-months">
+        <button
+          v-for="(name, index) in monthNames"
+          :key="name"
+          type="button"
+          class="q-date-calendar__picker-month"
+          :class="{ 'q-date-calendar__picker-month--current': index === viewMonth }"
+          :aria-current="index === viewMonth ? 'true' : undefined"
+          @click="onPickMonth(index)"
+        >
+          {{ name }}
+        </button>
+      </div>
+    </div>
+
+    <template v-else>
+      <div class="q-date-calendar__weekdays">
+        <span v-for="(d, i) in weekdayLabels" :key="i" class="q-date-calendar__weekday">{{ d }}</span>
+      </div>
+
+      <div class="q-date-calendar__weeks">
+        <div v-for="(week, wi) in weeks" :key="wi" class="q-date-calendar__week">
+          <button
+            v-for="(d, di) in week"
+            :key="di"
+            type="button"
+            class="q-date-calendar__day"
+            :class="cn(
+              !d && 'q-date-calendar__day--empty',
+              !!d && isToday(d) && 'q-date-calendar__day--today',
+              !!d && isSelected(d) && 'q-date-calendar__day--selected',
+            )"
+            :disabled="!d || isDisabled(d)"
+            :aria-selected="!!d && isSelected(d) ? 'true' : 'false'"
+            @click="d && onSelectDate(d)"
+          >
+            {{ d ? d.getDate() : "" }}
+          </button>
+        </div>
+      </div>
+    </template>
+
+    <div v-if="todayBtn" class="q-date-calendar__footer">
+      <button
+        type="button"
+        class="q-date-calendar__today"
+        :disabled="!todaySelectable"
+        @click="selectToday"
+      >
+        Today
+      </button>
     </div>
   </div>
 </template>

package/index.ts

@@ -33,6 +33,7 @@ export { default as QCarousel } from "./components/QCarousel.vue"
 export { default as QCarouselContent } from "./components/QCarouselContent.vue"
 export { default as QCarouselItem } from "./components/QCarouselItem.vue"
 export { default as QCarouselNav } from "./components/QCarouselNav.vue"
+export { default as QChart } from "./components/QChart.vue"
 export { default as QCheckbox } from "./components/QCheckbox.vue"
 export { default as QChip } from "./components/QChip.vue"
 export { default as QCircularProgress } from "./components/QCircularProgress.vue"
@@ -50,7 +51,6 @@ export { default as QDialogFooter } from "./components/QDialogFooter.vue"
 export { default as QDialogHeader } from "./components/QDialogHeader.vue"
 export { default as QDialogProvider } from "./components/QDialogProvider.vue"
 export { default as QDialogTrigger } from "./components/QDialogTrigger.vue"
-export { default as QEditorJs } from "./components/QEditorJs.vue"
 export { default as QFab } from "./components/QFab.vue"
 export { default as QFabAction } from "./components/QFabAction.vue"
 export { default as QFilePicker } from "./components/QFilePicker.vue"
@@ -166,8 +166,28 @@ export {
 } from "./lib/overlayBack"
 export type { OverlayHandle } from "./lib/overlayBack"
 export { markOverlayClose, closeParentOverlay, vClose } from "./lib/closeOverlay"
+export { placePopover } from "./lib/datePicker"
+export type {
+  PlacePopoverOptions,
+  PopoverAnchor,
+  PopoverPlacement,
+  PopoverViewport,
+} from "./lib/datePicker"
 export { vRipple } from "./lib/ripple"
 export type { RippleOptions, RippleValue } from "./lib/ripple"
+export { chartToECharts, channelValue, pickFromEvent, tableModel, textValue } from "./lib/chart"
+export type {
+  QChartAxis,
+  QChartChannel,
+  QChartColumn,
+  QChartConfig,
+  QChartLegend,
+  QChartMark,
+  QChartMarkType,
+  QChartOrientation,
+  QChartTable,
+  QChartPick,
+} from "./lib/chart"
 export { vTouchPan } from "./lib/touchPan"
 export type { PanDetails, TouchPanHandler, PanDirection } from "./lib/touchPan"
 export { vTouchHold } from "./lib/touchHold"