v-calendar-3 1.0.0

package/src/components/Calendar/CalendarNav.vue

@@ -0,0 +1,325 @@
+<template>
+  <!--Nav panel-->
+  <div class="vc-nav-container" ref="navContainer">
+    <!--Nav header-->
+    <div class="vc-nav-header">
+      <!--Move prev button-->
+      <button
+        type="button"
+        class="vc-nav-arrow is-left vc-focus"
+        :disabled="!prevItemsEnabled"
+        @click="movePrev"
+        @keydown="(e: KeyboardEvent) => onSpaceOrEnter(e, movePrev)"
+      >
+        <CalendarSlot
+          name="nav-prev-button"
+          :move="movePrev"
+          :disabled="!prevItemsEnabled"
+        >
+          <BaseIcon name="ChevronLeft" width="22px" height="24px" />
+        </CalendarSlot>
+      </button>
+      <!--Mode switch button-->
+      <button
+        type="button"
+        class="vc-nav-title vc-focus"
+        @click="toggleMode"
+        @keydown="(e: KeyboardEvent) => onSpaceOrEnter(e, toggleMode)"
+      >
+        {{ title }}
+      </button>
+      <!--Move next button-->
+      <button
+        type="button"
+        class="vc-nav-arrow is-right vc-focus"
+        :disabled="!nextItemsEnabled"
+        @click="moveNext"
+        @keydown="(e: KeyboardEvent) => onSpaceOrEnter(e, moveNext)"
+      >
+        <CalendarSlot
+          name="nav-next-button"
+          :move="moveNext"
+          :disabled="!nextItemsEnabled"
+        >
+          <BaseIcon name="ChevronRight" width="22px" height="24px" />
+        </CalendarSlot>
+      </button>
+    </div>
+    <!--Navigation items-->
+    <div class="vc-nav-items">
+      <button
+        v-for="item in activeItems"
+        :key="item.label"
+        type="button"
+        :data-id="item.id"
+        :aria-label="item.ariaLabel"
+        class="vc-nav-item vc-focus"
+        :class="[
+          item.isActive ? 'is-active' : item.isCurrent ? 'is-current' : '',
+        ]"
+        :disabled="item.isDisabled"
+        @click="item.click"
+        @keydown="(e: KeyboardEvent) => onSpaceOrEnter(e, item.click)"
+      >
+        {{ item.label }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch, watchEffect } from 'vue';
+import { useCalendar } from '../../use/calendar';
+import { usePage } from '../../use/page';
+import { head, last, onSpaceOrEnter } from '../../utils/helpers';
+import BaseIcon from '../BaseIcon/BaseIcon.vue';
+import CalendarSlot from './CalendarSlot.vue';
+
+export type IQuerySelector = Pick<HTMLElement, 'querySelector'>;
+
+const { masks, move } = useCalendar();
+const { page, getMonthItems, getYearItems } = usePage();
+
+const monthMode = ref(true);
+const yearGroupCount = 12;
+
+const selectedYear = ref(page.value.year);
+const selectedYearGroup = ref(getYearGroupIndex(page.value.year));
+const navContainer = ref<IQuerySelector | null>(null);
+
+function focusFirstItem() {
+  // Use setTimeout instead of $nextTick so it plays nice with popperjs
+  setTimeout(() => {
+    if (navContainer.value == null) return;
+    // Set focus on the first enabled nav item
+    const focusableEl = navContainer.value.querySelector(
+      '.vc-nav-item:not(:disabled)',
+    ) as HTMLElement;
+    if (focusableEl) {
+      focusableEl.focus();
+    }
+  }, 10);
+}
+
+function getYearGroupIndex(year: number) {
+  return Math.floor(year / yearGroupCount);
+}
+
+function toggleMode() {
+  monthMode.value = !monthMode.value;
+}
+
+function getStartYear(groupIndex: number) {
+  return groupIndex * yearGroupCount;
+}
+
+function getEndYear(groupIndex: number) {
+  return yearGroupCount * (groupIndex + 1) - 1;
+}
+
+// #region Move methods
+
+function movePrev() {
+  if (!prevItemsEnabled.value) return;
+  if (monthMode.value) {
+    movePrevYear();
+  }
+  movePrevYearGroup();
+}
+
+function moveNext() {
+  if (!nextItemsEnabled.value) return;
+  if (monthMode.value) {
+    moveNextYear();
+  }
+  moveNextYearGroup();
+}
+
+function movePrevYear() {
+  selectedYear.value--;
+}
+
+function moveNextYear() {
+  selectedYear.value++;
+}
+
+function movePrevYearGroup() {
+  selectedYearGroup.value--;
+}
+
+function moveNextYearGroup() {
+  selectedYearGroup.value++;
+}
+
+// #endregion Move methods
+
+const monthItems = computed(() =>
+  getMonthItems(selectedYear.value, masks.value.navMonths).map(item => ({
+    ...item,
+    click: () =>
+      move(
+        { month: item.month, year: item.year },
+        { position: page.value.position },
+      ),
+  })),
+);
+
+const prevMonthItems = computed(() =>
+  getMonthItems(selectedYear.value - 1, masks.value.navMonths),
+);
+
+const prevMonthItemsEnabled = computed(() =>
+  prevMonthItems.value.some(i => !i.isDisabled),
+);
+
+const nextMonthItems = computed(() =>
+  getMonthItems(selectedYear.value + 1, masks.value.navMonths),
+);
+
+const nextMonthItemsEnabled = computed(() =>
+  nextMonthItems.value.some(i => !i.isDisabled),
+);
+
+const yearItems = computed(() =>
+  getYearItems(
+    getStartYear(selectedYearGroup.value),
+    getEndYear(selectedYearGroup.value),
+  ).map(item => {
+    return {
+      ...item,
+      click: () => {
+        selectedYear.value = item.year;
+        monthMode.value = true;
+        focusFirstItem();
+      },
+    };
+  }),
+);
+
+const prevYearItems = computed(() =>
+  getYearItems(
+    getStartYear(selectedYearGroup.value - 1),
+    getEndYear(selectedYearGroup.value - 1),
+  ),
+);
+
+const prevYearItemsEnabled = computed(() =>
+  prevYearItems.value.some(i => !i.isDisabled),
+);
+
+const nextYearItems = computed(() =>
+  getYearItems(
+    getStartYear(selectedYearGroup.value + 1),
+    getEndYear(selectedYearGroup.value + 1),
+  ),
+);
+
+const nextYearItemsEnabled = computed(() =>
+  nextYearItems.value.some(i => !i.isDisabled),
+);
+
+const activeItems = computed(() =>
+  monthMode.value ? monthItems.value : yearItems.value,
+);
+
+const prevItemsEnabled = computed(() =>
+  monthMode.value ? prevMonthItemsEnabled.value : prevYearItemsEnabled.value,
+);
+
+const nextItemsEnabled = computed(() =>
+  monthMode.value ? nextMonthItemsEnabled.value : nextYearItemsEnabled.value,
+);
+
+const firstYear = computed(() => head(yearItems.value.map(i => i.year)));
+
+const lastYear = computed(() => last(yearItems.value.map(i => i.year)));
+
+const title = computed(() => {
+  return monthMode.value
+    ? selectedYear.value
+    : `${firstYear.value} - ${lastYear.value}`;
+});
+
+watchEffect(() => {
+  selectedYear.value = page.value.year;
+  focusFirstItem();
+});
+
+watch(
+  () => selectedYear.value,
+  val => (selectedYearGroup.value = getYearGroupIndex(val)),
+);
+
+onMounted(() => focusFirstItem());
+</script>
+
+<style lang="css">
+.vc-nav-header {
+  display: flex;
+  justify-content: space-between;
+}
+
+.vc-nav-title,
+.vc-nav-arrow,
+.vc-nav-item {
+  font-size: var(--vc-text-sm);
+  margin: 0;
+  cursor: pointer;
+  user-select: none;
+  border: 0;
+  border-radius: var(--vc-rounded);
+  white-space: nowrap;
+  &:hover {
+    background-color: var(--vc-nav-hover-bg);
+  }
+  &:disabled {
+    opacity: 0.25;
+    pointer-events: none;
+  }
+}
+
+.vc-nav-title {
+  color: var(--vc-nav-title-color);
+  font-weight: var(--vc-font-bold);
+  line-height: var(--vc-leading-snug);
+  height: 30px;
+  padding: 0 6px;
+}
+
+.vc-nav-arrow {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--vc-header-arrow-color);
+  width: 26px;
+  height: 30px;
+  padding: 0;
+}
+
+.vc-nav-items {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-row-gap: 2px;
+  grid-column-gap: 5px;
+  margin-top: 2px;
+}
+
+.vc-nav-item {
+  width: 48px;
+  text-align: center;
+  font-weight: var(--vc-font-semibold);
+  line-height: var(--vc-leading-snug);
+  padding: 6px 0;
+  &.is-active {
+    color: var(--vc-nav-item-active-color);
+    background-color: var(--vc-nav-item-active-bg);
+    font-weight: var(--vc-font-bold);
+    &:not(:focus) {
+      box-shadow: var(--vc-nav-item-active-box-shadow);
+    }
+  }
+  &.is-current {
+    color: var(--vc-nav-item-current-color);
+  }
+}
+</style>

package/src/components/Calendar/CalendarNavPopover.vue

@@ -0,0 +1,24 @@
+<template>
+  <Popover
+    :id="navPopoverId"
+    :class="['vc-nav-popover-container', `vc-${color}`, `vc-${displayMode}`]"
+  >
+    <template #default="{ data }">
+      <CalendarPageProvider :page="data.page">
+        <CalendarSlot name="nav">
+          <CalendarNav />
+        </CalendarSlot>
+      </CalendarPageProvider>
+    </template>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import { useCalendar } from '../../use/calendar';
+import Popover from '../Popover/Popover.vue';
+import CalendarNav from './CalendarNav.vue';
+import CalendarPageProvider from './CalendarPageProvider.vue';
+import CalendarSlot from './CalendarSlot.vue';
+
+const { navPopoverId, color, displayMode } = useCalendar();
+</script>

package/src/components/Calendar/CalendarPage.vue

@@ -0,0 +1,140 @@
+<template>
+  <div
+    :class="[
+      'vc-pane',
+      `row-${page.row}`,
+      `row-from-end-${page.rowFromEnd}`,
+      `column-${page.column}`,
+      `column-from-end-${page.columnFromEnd}`,
+    ]"
+    ref="pane"
+  >
+    <CalendarHeader :page="page" is-lg hide-arrows />
+    <div
+      class="vc-weeks"
+      :class="{
+        [`vc-show-weeknumbers-${page.weeknumberPosition}`]:
+          page.weeknumberPosition,
+      }"
+    >
+      <div class="vc-weekdays">
+        <!--Weekday labels-->
+        <div
+          v-for="({ weekday, label }, i) in page.weekdays"
+          :key="i"
+          :class="`vc-weekday vc-weekday-${weekday}`"
+        >
+          {{ label }}
+        </div>
+      </div>
+      <!--Weeks-->
+      <div
+        v-for="week in page.viewWeeks"
+        :key="`weeknumber-${week.weeknumber}`"
+        class="vc-week"
+      >
+        <!--Weeknumber-->
+        <div
+          v-if="page.weeknumberPosition"
+          :class="['vc-weeknumber', `is-${page.weeknumberPosition}`]"
+        >
+          <span
+            :class="['vc-weeknumber-content']"
+            @click="onWeeknumberClick(week, $event)"
+            >{{ week.weeknumberDisplay }}</span
+          >
+        </div>
+        <!--Week days-->
+        <CalendarDay v-for="day in week.days" :key="day.id" :day="day" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+};
+</script>
+
+<script setup lang="ts">
+import CalendarDay from './CalendarDay.vue';
+import CalendarHeader from './CalendarHeader.vue';
+import { useCalendar } from '../../use/calendar';
+import { usePage } from '../../use/page';
+
+const { page } = usePage();
+const { onWeeknumberClick } = useCalendar();
+</script>
+
+<style lang="css">
+.vc-pane {
+  min-width: 250px;
+}
+
+.vc-weeknumber {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  &.is-left {
+    left: calc(var(--vc-weeknumber-offset-inside) * -1);
+  }
+  &.is-right {
+    right: calc(var(--vc-weeknumber-offset-inside) * -1);
+  }
+  &.is-left-outside {
+    left: calc(var(--vc-weeknumber-offset-outside) * -1);
+  }
+  &.is-right-outside {
+    right: calc(var(--vc-weeknumber-offset-outside) * -1);
+  }
+}
+
+.vc-weeknumber-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: var(--vc-text-xs);
+  font-weight: var(--vc-font-medium);
+  font-style: italic;
+  width: 28px;
+  height: 28px;
+  margin-top: 2px;
+  color: var(--vc-weeknumber-color);
+  user-select: none;
+}
+
+.vc-weeks {
+  position: relative;
+  /* overflow: auto; */
+  -webkit-overflow-scrolling: touch;
+  padding: 6px;
+  min-width: 232px;
+  &.vc-show-weeknumbers-left {
+    margin-left: var(--vc-weeknumber-offset-inside);
+  }
+  &.vc-show-weeknumbers-right {
+    margin-right: var(--vc-weeknumber-offset-inside);
+  }
+}
+
+.vc-weekday {
+  text-align: center;
+  color: var(--vc-weekday-color);
+  font-size: var(--vc-text-sm);
+  font-weight: var(--vc-font-bold);
+  line-height: 14px;
+  padding-top: 4px;
+  padding-bottom: 8px;
+  cursor: default;
+  user-select: none;
+}
+
+.vc-week,
+.vc-weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  position: relative;
+}
+</style>

package/src/components/Calendar/CalendarPageProvider.vue

@@ -0,0 +1,15 @@
+<template>
+  <slot />
+</template>
+
+<script setup lang="ts">
+import { toRef } from 'vue';
+import { createPage } from '../../use/page';
+import type { Page } from '../../utils/page';
+
+const props = defineProps<{
+  page: Page;
+}>();
+
+createPage(toRef(props, 'page'));
+</script>

package/src/components/Calendar/CalendarSlot.vue

@@ -0,0 +1,36 @@
+<template>
+  <Component v-if="slot" :is="slot" v-bind="$attrs" />
+  <slot v-else />
+</template>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+};
+</script>
+
+<script setup lang="ts">
+import { useSlot } from '../../use/slots';
+import { VNode } from 'vue';
+
+export type CalendarSlotName =
+  | 'day-content'
+  | 'day-popover'
+  | 'dp-footer'
+  | 'footer'
+  | 'header-title-wrapper'
+  | 'header-title'
+  | 'header-prev-button'
+  | 'header-next-button'
+  | 'nav'
+  | 'nav-prev-button'
+  | 'nav-next-button'
+  | 'page'
+  | 'time-header';
+
+const props = defineProps<{
+  name: CalendarSlotName;
+}>();
+
+const slot = useSlot(props.name) as unknown as VNode|VNode[];
+</script>

package/src/components/Calendar/CalendarTitleSelect.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="vc-title-select-nav">
+    <BaseSelect v-model="value" :options="monthOptions" fit-content />
+    <BaseSelect v-model="value" :options="yearOptions" fit-content />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { useCalendar } from '../../use/calendar';
+import { usePage } from '../../use/page';
+import { getPageId } from '../../utils/page';
+import BaseSelect from '../BaseSelect/BaseSelect.vue';
+
+const props = defineProps({
+  monthFormat: { type: String, default: 'MMMM' },
+});
+
+const { move, minPage, maxPage } = useCalendar();
+const { page, getMonthItems, getYearItems } = usePage();
+
+const value = ref(getPageId(page.value.month, page.value.year));
+
+const defaultMinYear = 1900;
+const defaultMaxYear = 2100;
+
+const minYear = computed(() => {
+  if (minPage.value != null) return minPage.value.year;
+  if (maxPage.value != null) return maxPage.value.year - 200;
+  return defaultMinYear;
+});
+
+const maxYear = computed(() => {
+  if (maxPage.value != null) return maxPage.value.year;
+  if (minPage.value != null) return minPage.value.year + 200;
+  return defaultMaxYear;
+});
+
+const monthItems = computed(() =>
+  getMonthItems(page.value.year, props.monthFormat),
+);
+const monthOptions = computed(() =>
+  monthItems.value.map(item => ({
+    value: item.id,
+    label: item.label,
+    disabled: item.isDisabled,
+  })),
+);
+
+const yearItems = computed(() => getYearItems(minYear.value, maxYear.value));
+const yearOptions = computed(() =>
+  yearItems.value.map(item => ({
+    value: item.id,
+    label: item.label,
+    disabled: item.isDisabled,
+  })),
+);
+
+watch(
+  () => value.value,
+  val => move(val, { position: page.value.position, transition: 'none' }),
+);
+</script>
+
+<style lang="css">
+.vc-title-select-nav {
+  display: flex;
+  > * + * {
+    margin-left: 4px;
+  }
+}
+</style>