@dnax/ui 0.0.43 → 0.0.45

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"
@@ -74,6 +74,7 @@ export { default as QInteract } from "./components/QInteract.vue"
 export { default as QIntersection } from "./components/QIntersection.vue"
 export { default as QItem } from "./components/QItem.vue"
 export { default as QItemSection } from "./components/QItemSection.vue"
+export { default as QLayout } from "./components/QLayout.vue"
 export { default as QLinearProgress } from "./components/QLinearProgress.vue"
 export { default as QList } from "./components/QList.vue"
 export { default as QLoading } from "./components/QLoading.vue"
@@ -135,7 +136,6 @@ export { default as QTiptap } from "./components/QTiptap.vue"
 export { default as QToolbar } from "./components/QToolbar.vue"
 export { default as QTooltip } from "./components/QTooltip.vue"
 export { default as QUploader } from "./components/QUploader.vue"
-export { default as QVideo } from "./components/QVideo.vue"
 export { default as QVirtualScroll } from "./components/QVirtualScroll.vue"
 
 export { $q, usePlugin, useQ, QPlugin, dialogStack, closeDialog, bottomSheetStack, closeBottomSheet, useDialogPluginComponent, useBottomSheetPluginComponent } from "./lib/q"
@@ -166,8 +166,30 @@ 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 { 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 { 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"