This repository has been archived by the owner on Feb 28, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
MODUL-1106: Modifier l'affichage de la vue mois du datepicker (#1057)
* MODUL-1106 - Add view prop to datepicker * MODUL-1106 - MAJ * MODUL-1106 - Ajout de la structure de base pour l'ajout des années et des mois dans le calendrier * MODUL-1106 - Ajouter la vue yearsMonths au base-calendar * MODUL-1106 - Maj des strories * /MODUL-1106_datepicker-months-view: * MODUL-1106 - Intégration de la nouvelle vue mois * MODUL-1106 - modul-date accept years-months * MODUL-1106 - Add event yearMonthSelect() * MODUL-1106 - MAJ tests * MODUL-1106 - MAJ des test unitaires * MODUL-1106 - Ajouter stories pour prop initialView * /MODUL-1106_datepicker-months-view: Auto stash before rebase of "origin/feature/MODUL-1106_datepicker-months-view" * MODUL-1106 - Ajout d'un storybook pour la date de naissance * MODUL-1106 - Revue de code * MODUL-1106 - Revue de code
- Loading branch information
Showing
22 changed files
with
1,156 additions
and
405 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
88 changes: 62 additions & 26 deletions
88
...ponents/calendar/calendar-renderer/base-calendar/__snapshots__/base-calendar.spec.ts.snap
Large diffs are not rendered by default.
Oops, something went wrong.
143 changes: 76 additions & 67 deletions
143
src/components/calendar/calendar-renderer/base-calendar/base-calendar.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,83 +1,92 @@ | ||
| <div :id="id" | ||
| class="m-base-calendar" | ||
| :class="{'m--is-picker-mode-year': isPickerModeYear}"> | ||
| :class="{'m--is-years-months-view': isYearsMonthsView, | ||
| 'm--is-max-row': isMaxRow}"> | ||
| <nav class="m-base-calendar__header" | ||
| :class="{'m--is-select-mode': !isPickerModeDay}"> | ||
| <m-link class="m-base-calendar__current-month-and-year" | ||
| :class="{'m--is-select-mode': !isDaysView}"> | ||
| <strong v-if="isButtonToogleViewDisabled">{{ currentMonthName }} {{ currentYear }}</strong> | ||
| <m-link v-else | ||
| class="m-base-calendar__current-month-and-year" | ||
| :mode="modeLinkCurrentMonthAndYear" | ||
| @click.stop="onYearClick" | ||
| @click.stop="onToogleView" | ||
| aria-live="polite" | ||
| ref="currentDate">{{ currentMonthName }} {{ currentYear }}</m-link> | ||
| <div v-if="isPickerModeDay" | ||
| class="m-base-calendar__nav-buttons"> | ||
| <m-icon-button class="m-base-calendar__previous" | ||
| @click.stop="onMonthPrevious()" | ||
| :disabled="isMinMonth" | ||
| icon-name="m-svg__chevron--left" | ||
| ref="previousMonth" | ||
| skin="link">{{ previousMonthLabel }}</m-icon-button> | ||
| <m-icon-button class="m-base-calendar__next" | ||
| @click.stop="onMonthNext()" | ||
| :disabled="isMaxMonth" | ||
| icon-name="m-svg__chevron--right" | ||
| ref="nextMonth" | ||
| skin="link">{{ nextMonthLabel }}</m-icon-button> | ||
| </div> | ||
| <transition name="m--is"> | ||
| <div v-if="isDaysView" | ||
| class="m-base-calendar__nav-buttons"> | ||
| <m-icon-button class="m-base-calendar__previous" | ||
| @click.stop="onMonthPrevious()" | ||
| :disabled="isMinMonth" | ||
| icon-name="m-svg__chevron--left" | ||
| icon-size="16px" | ||
| ref="previousMonth" | ||
| skin="link">{{ previousMonthLabel }}</m-icon-button> | ||
| <m-icon-button class="m-base-calendar__next" | ||
| @click.stop="onMonthNext()" | ||
| :disabled="isMaxMonth" | ||
| icon-name="m-svg__chevron--right" | ||
| icon-size="16px" | ||
| ref="nextMonth" | ||
| skin="link">{{ nextMonthLabel }}</m-icon-button> | ||
| </div> | ||
| </transition> | ||
| </nav> | ||
| <div class="m-base-calendar__body" | ||
| :class="{'m--is-max-row': isMaxRow}" | ||
| aria-live="polite"> | ||
|
|
||
| <div v-if="isPickerModeYear" | ||
| class="m-base-calendar__years"> | ||
| <m-calendar-button v-for="(y, yearIndex) in years" | ||
| :key="yearIndex" | ||
| @click.stop="onYearSelect(y)" | ||
| @keyup.enter="onYearSelect(y)" | ||
| :selected="y.isCurrent" | ||
| :ref="buildRef('year', y)">{{ y.year }}</m-calendar-button> | ||
| </div> | ||
| <div v-if="isPickerModeMonth" | ||
| class="m-base-calendar__months"> | ||
| <m-calendar-button v-for="(m, monthIndex) in months" | ||
| :key="monthIndex" | ||
| :disabled="m.isDisabled" | ||
| :selected="m.isCurrent" | ||
| @click.stop="onMonthSelect(m)" | ||
| @keyup.enter="onMonthSelect(m)" | ||
| :ref="buildRef('month', m)" | ||
| :tabindex="monthTabIndex(m)">{{ monthIndexToShortName(m.month) }}</m-calendar-button> | ||
| </div> | ||
| <template v-if="isPickerModeDay"> | ||
| <div class="m-base-calendar__week"> | ||
| <span v-for="(w, weekdayIndex) in weekdaysLabels" | ||
| :key="weekdayIndex" | ||
| class="m-base-calendar__weekday">{{ w }}</span> | ||
| </div> | ||
| <div class="m-base-calendar__days"> | ||
| <m-calendar-button v-for="(d, dayIndex) in days" | ||
| :key="dayIndex" | ||
| class="m-base-calendar__day" | ||
| :class="{ 'm--is-highlighted': d.isHighlighted, | ||
| aria-live="polite" | ||
| ref="body"> | ||
| <transition name="m--is"> | ||
| <div v-if="isDaysView" | ||
| class="m-base-calendar__days-view"> | ||
| <div class="m-base-calendar__week"> | ||
| <span v-for="(w, weekdayIndex) in weekdaysLabels" | ||
| :key="weekdayIndex" | ||
| class="m-base-calendar__weekday">{{ w }}</span> | ||
| </div> | ||
| <div class="m-base-calendar__days-grid"> | ||
| <m-calendar-button v-for="(d, dayIndex) in days" | ||
| :key="dayIndex" | ||
| class="m-base-calendar__day" | ||
| :class="{ 'm--is-highlighted': d.isHighlighted, | ||
| 'm--is-in-future': isDateInFuture(d), | ||
| 'm--is-inside-range': isInsideRange(d), | ||
| 'm--is-other-month': d.isInPreviousMonth || d.isInNextMonth, | ||
| 'm--is-selection-start': isSelectionStart(d), | ||
| 'm--is-selection-end': isSelectionEnd(d)}" | ||
| :disabled="d.isDisabled || hideDay(d)" | ||
| :selected="d.isSelected" | ||
| :today="d.isToday" | ||
| @click.stop="onDaySelect(d)" | ||
| @keyup.enter="onDaySelect(d)" | ||
| @keyup.tab="onDaykeyboardTab(d)" | ||
| @mouseenter="onDayMouseEnter(d)" | ||
| @mouseleave="onDayMouseLeave(d)" | ||
| :ref="buildRef('day', d)" | ||
| :tabindex="dayTabIndex(d)"> | ||
| <span class="m-base-calendar__day-content" | ||
| :class="{ 'm--is-hidden': hideDay(d) }">{{ d.day }}</span> | ||
| </m-calendar-button> | ||
| :disabled="d.isDisabled || hideDay(d)" | ||
| :selected="d.isSelected" | ||
| :today="d.isToday" | ||
| @click.stop="onDaySelect(d)" | ||
| @keyup.enter="onDaySelect(d)" | ||
| @keyup.tab="onDaykeyboardTab(d)" | ||
| @mouseenter="onDayMouseEnter(d)" | ||
| @mouseleave="onDayMouseLeave(d)" | ||
| :ref="buildRef(mBaseCalendarView.DAYS, currentYear, currentMonth + 1, d.day)"> | ||
| <span class="m-base-calendar__day-content" | ||
| :class="{ 'm--is-hidden': hideDay(d) }">{{ d.day }}</span> | ||
| </m-calendar-button> | ||
| </div> | ||
| </div> | ||
| </transition> | ||
| <transition name="m--is" | ||
| @enter="scrollToCurrentYear"> | ||
| <div v-if="isYearsMonthsView" | ||
| class="m-base-calendar__years-months-view" | ||
| ref="yearsMonthsView"> | ||
| <template v-for="(yM, yearsMonthsIndex) in yearsMonths"> | ||
| <h2 class="m-base-calendar__year-title" | ||
| :class="{'m--is-current': yM.year.isCurrent}" | ||
| :data-current-year="yM.year.isCurrent">{{yM.year.year}}</h2> | ||
| <div class="m-base-calendar__month-list"> | ||
| <m-calendar-button v-for="(m, monthIndex) in yM.months" | ||
| :key="monthIndex" | ||
| :disabled="m.isDisabled" | ||
| @click.stop="onYearMonthSelect(yM.year, m)" | ||
| @keyup.enter="onYearMonthSelect(yM.year.year, m)" | ||
| :selected="m.isCurrent" | ||
| :ref="buildRef(mBaseCalendarView.YEARS_MONTHS, yM.year.year, m.month + 1)">{{ monthIndexToShortName(m.month) }}</m-calendar-button> | ||
| </div> | ||
| </template> | ||
| </div> | ||
| </template> | ||
| </transition> | ||
| </div> | ||
| </div> |
Oops, something went wrong.