v-calendar-3 1.0.0

package/src/use/page.ts

@@ -0,0 +1,78 @@
+import { type Ref, inject, provide } from 'vue';
+import { useCalendar } from '..';
+import { getMonthDates } from '../utils/date/helpers';
+import { type Page, getPageId } from '../utils/page';
+
+export interface MonthNavItem {
+  month: number;
+  year: number;
+  id: string;
+  label: string;
+  ariaLabel: string;
+  isActive: boolean;
+  isCurrent: boolean;
+  isDisabled: boolean;
+}
+
+export type YearNavItem = Omit<MonthNavItem, 'month'>;
+
+export type CalendarPageContext = ReturnType<typeof createPage>;
+
+const contextKey = Symbol('__vc_page_context__');
+
+export function createPage(page: Ref<Page>) {
+  const { locale, getDateAddress, canMove } = useCalendar();
+
+  function getMonthItems(year: number, mask: string): MonthNavItem[] {
+    const { month: thisMonth, year: thisYear } = getDateAddress(new Date());
+    return getMonthDates().map((d, i: number) => {
+      const month = i + 1;
+      return {
+        month,
+        year,
+        id: getPageId(month, year),
+        label: locale.value.formatDate(d, mask),
+        ariaLabel: locale.value.formatDate(d, 'MMMM'),
+        isActive: month === page.value.month && year === page.value.year,
+        isCurrent: month === thisMonth && year === thisYear,
+        isDisabled: !canMove(
+          { month, year },
+          { position: page.value.position },
+        ),
+      };
+    });
+  }
+
+  function getYearItems(startYear: number, endYear: number): YearNavItem[] {
+    const { year: thisYear } = getDateAddress(new Date());
+    const { position } = page.value;
+    const items = [];
+    for (let year = startYear; year <= endYear; year += 1) {
+      const enabled = [...Array(12).keys()].some(m =>
+        canMove({ month: m + 1, year }, { position }),
+      );
+      items.push({
+        year,
+        id: year.toString(),
+        label: year.toString(),
+        ariaLabel: year.toString(),
+        isActive: year === page.value.year,
+        isCurrent: year === thisYear,
+        isDisabled: !enabled,
+      });
+    }
+    return items;
+  }
+
+  const context = { page, getMonthItems, getYearItems };
+  provide(contextKey, context);
+  return context;
+}
+
+export function usePage(): CalendarPageContext {
+  const context = inject<CalendarPageContext>(contextKey);
+  if (context) return context;
+  throw new Error(
+    'Page context missing. Please verify this component is nested within a valid context provider.',
+  );
+}

package/src/use/slots.ts

@@ -0,0 +1,17 @@
+import { type SetupContext, inject, provide } from 'vue';
+
+type Slots = SetupContext['slots'];
+
+function contextKey(slotKey: string) {
+  return `__vc_slot_${slotKey}__`;
+}
+
+export function provideSlots(slots: Slots, remap: Record<string, string> = {}) {
+  Object.keys(slots).forEach(slotKey => {
+    provide(contextKey(remap[slotKey] ?? slotKey), slots[slotKey]);
+  });
+}
+
+export function useSlot(slotKey: string) {
+  return inject(contextKey(slotKey), null);
+}

package/src/use/timePicker.ts

@@ -0,0 +1,194 @@
+import { computed } from 'vue';
+import { useDatePicker } from '../use/datePicker';
+import {
+  type DateParts,
+  type SimpleDateParts,
+  getDatePartsOptions,
+  isDateParts,
+} from '../utils/date/helpers';
+import { arrayHasItems } from '../utils/helpers';
+
+const _amOptions = [
+  { value: 0, label: '12' },
+  { value: 1, label: '1' },
+  { value: 2, label: '2' },
+  { value: 3, label: '3' },
+  { value: 4, label: '4' },
+  { value: 5, label: '5' },
+  { value: 6, label: '6' },
+  { value: 7, label: '7' },
+  { value: 8, label: '8' },
+  { value: 9, label: '9' },
+  { value: 10, label: '10' },
+  { value: 11, label: '11' },
+];
+const _pmOptions = [
+  { value: 12, label: '12' },
+  { value: 13, label: '1' },
+  { value: 14, label: '2' },
+  { value: 15, label: '3' },
+  { value: 16, label: '4' },
+  { value: 17, label: '5' },
+  { value: 18, label: '6' },
+  { value: 19, label: '7' },
+  { value: 20, label: '8' },
+  { value: 21, label: '9' },
+  { value: 22, label: '10' },
+  { value: 23, label: '11' },
+];
+
+export interface TimePickerProps {
+  position: number;
+}
+
+export type TimePickerContext = ReturnType<typeof createTimePicker>;
+
+export function createTimePicker(props: TimePickerProps) {
+  const ctx = useDatePicker();
+  const {
+    locale,
+    isRange,
+    isTimeMode,
+    dateParts,
+    rules,
+    is24hr,
+    hideTimeHeader,
+    timeAccuracy,
+    updateValue: updateDpValue,
+  } = ctx;
+
+  function updateParts(newParts: Partial<DateParts>) {
+    newParts = Object.assign(parts.value, newParts);
+    const newValue = isRange.value
+      ? {
+          start: isStart.value ? newParts : dateParts.value[0],
+          end: isStart.value ? dateParts.value[1] : newParts,
+        }
+      : newParts;
+    updateDpValue(newValue, {
+      patch: 'time',
+      targetPriority: isStart.value ? 'start' : 'end',
+      moveToValue: true,
+    });
+  }
+
+  const isStart = computed(() => props.position === 0);
+  const parts = computed(
+    () => dateParts.value[props.position] || { isValid: false },
+  );
+  const partsValid = computed(() => isDateParts(parts.value));
+  const isValid = computed(() => !!parts.value.isValid);
+  const showHeader = computed(() => {
+    return !hideTimeHeader.value && isValid.value;
+  });
+
+  const date = computed(() => {
+    if (!partsValid.value) return null;
+    let date = locale.value.toDate(parts.value as Partial<SimpleDateParts>);
+    if ((parts.value as DateParts).hours === 24) {
+      date = new Date(date.getTime() - 1);
+    }
+    return date;
+  });
+
+  const hours = computed({
+    get() {
+      return (parts.value as DateParts).hours;
+    },
+    set(val) {
+      updateParts({ hours: val });
+    },
+  });
+
+  const minutes = computed({
+    get() {
+      return (parts.value as DateParts).minutes;
+    },
+    set(val) {
+      updateParts({ minutes: val });
+    },
+  });
+
+  const seconds = computed({
+    get() {
+      return (parts.value as DateParts).seconds;
+    },
+    set(val) {
+      updateParts({ seconds: val });
+    },
+  });
+
+  const milliseconds = computed({
+    get() {
+      return (parts.value as DateParts).milliseconds;
+    },
+    set(val) {
+      updateParts({ milliseconds: val });
+    },
+  });
+
+  const isAM = computed({
+    get() {
+      return (parts.value as DateParts).hours < 12;
+    },
+    set(value) {
+      value = String(value).toLowerCase() == 'true';
+      let hValue = hours.value;
+      if (value && hValue >= 12) {
+        hValue -= 12;
+      } else if (!value && hValue < 12) {
+        hValue += 12;
+      }
+      updateParts({ hours: hValue });
+    },
+  });
+
+  const options = computed(() =>
+    getDatePartsOptions(parts.value as DateParts, rules.value[props.position]),
+  );
+
+  const amHourOptions = computed(() => {
+    return _amOptions.filter(opt =>
+      options.value.hours.some(ho => ho.value === opt.value),
+    );
+  });
+
+  const pmHourOptions = computed(() => {
+    return _pmOptions.filter(opt =>
+      options.value.hours.some(ho => ho.value === opt.value),
+    );
+  });
+
+  const hourOptions = computed(() => {
+    if (is24hr.value) return options.value.hours;
+    if (isAM.value) return amHourOptions.value;
+    return pmHourOptions.value;
+  });
+
+  const isAMOptions = computed(() => {
+    const result = [];
+    if (arrayHasItems(amHourOptions.value))
+      result.push({ value: true, label: 'AM' });
+    if (arrayHasItems(pmHourOptions.value))
+      result.push({ value: false, label: 'PM' });
+    return result;
+  });
+
+  return {
+    ...ctx,
+    showHeader,
+    timeAccuracy,
+    parts,
+    isValid,
+    date,
+    hours,
+    minutes,
+    seconds,
+    milliseconds,
+    options,
+    hourOptions,
+    isAM,
+    isAMOptions,
+    is24hr,
+  };
+}

package/src/utils/attribute.ts

@@ -0,0 +1,107 @@
+import type { Placement } from '@popperjs/core';
+import { addDays } from './date/helpers';
+import { DateRange, type DateRangeSource } from './date/range';
+import {
+  Bar,
+  BarConfig,
+  Content,
+  ContentConfig,
+  Dot,
+  DotConfig,
+  Highlight,
+  HighlightConfig,
+  Profile,
+} from './glyph';
+import { arrayHasItems } from './helpers';
+import Locale from './locale';
+import type { PopoverVisibility } from './popovers';
+import { Theme } from './theme';
+
+export type PopoverConfig = Partial<{
+  label: string;
+  visibility: PopoverVisibility;
+  placement: Placement;
+  hideIndicator: boolean;
+  isInteractive: boolean;
+}>;
+
+export type EventConfig = Partial<{
+  label: string;
+}>;
+
+export type AttributeConfig = Partial<{
+  key: string | number;
+  hashcode: string;
+  content: ContentConfig;
+  highlight: HighlightConfig;
+  dot: DotConfig;
+  bar: BarConfig;
+  popover: PopoverConfig;
+  event: EventConfig;
+  dates: DateRangeSource[];
+  customData: any;
+  order: number;
+  pinPage: boolean;
+}>;
+
+let attrKey = 0;
+
+export class Attribute {
+  key: string | number = '';
+  hashcode = '';
+  highlight: Profile<Highlight> | null = null;
+  content: Profile<Content> | null = null;
+  dot: Profile<Dot> | null = null;
+  bar: Profile<Bar> | null = null;
+  event: EventConfig | null = null;
+  popover: PopoverConfig | null = null;
+  customData: any = null;
+  ranges: DateRange[];
+  hasRanges = false;
+  order = 0;
+  pinPage = false;
+  maxRepeatSpan = 0;
+  locale: Locale;
+
+  constructor(config: Partial<AttributeConfig>, theme: Theme, locale: Locale) {
+    const { dates } = Object.assign(
+      this,
+      { hashcode: '', order: 0, pinPage: false },
+      config,
+    );
+    this.key ||= ++attrKey;
+    this.locale = locale;
+    // Normalize attribute
+    theme.normalizeGlyphs(this);
+    // Assign dates
+    this.ranges = locale.ranges(dates ?? []);
+    this.hasRanges = !!arrayHasItems(this.ranges);
+    this.maxRepeatSpan = this.ranges
+      .filter(r => r.hasRepeat)
+      .map(r => r.daySpan)
+      .reduce((res, curr) => Math.max(res, curr), 0);
+  }
+
+  intersectsRange({ start, end }: DateRange) {
+    if (start == null || end == null) return false;
+    const simpleRanges = this.ranges.filter(r => !r.hasRepeat);
+    for (const range of simpleRanges) {
+      if (range.intersectsDayRange(start.dayIndex, end.dayIndex)) {
+        return true;
+      }
+    }
+    const repeatRanges = this.ranges.filter(r => r.hasRepeat);
+    if (!repeatRanges.length) return false;
+    let day = start;
+    if (this.maxRepeatSpan > 1) {
+      day = this.locale.getDateParts(addDays(day.date, -this.maxRepeatSpan));
+    }
+    while (day.dayIndex <= end.dayIndex) {
+      for (const range of repeatRanges) {
+        if (range.startsOnDay(day)) return true;
+      }
+      day = this.locale.getDateParts(addDays(day.date, 1));
+    }
+    return false;
+  }
+}

package/src/utils/cache.ts

@@ -0,0 +1,30 @@
+export default class Cache<T> {
+  keys: string[] = [];
+  store: Record<string, T> = {};
+
+  constructor(
+    public size: number,
+    public createKey: (...args: any[]) => string,
+    public createItem: (...args: any[]) => T,
+  ) {}
+
+  get(...args: any[]) {
+    const key = this.createKey(...args);
+    return this.store[key];
+  }
+
+  getOrSet(...args: any[]): T {
+    const key = this.createKey(...args);
+    if (this.store[key]) return this.store[key];
+    const item = this.createItem(...args);
+    if (this.keys.length >= this.size) {
+      const removeKey = this.keys.shift();
+      if (removeKey != null) {
+        delete this.store[removeKey];
+      }
+    }
+    this.keys.push(key);
+    this.store[key] = item;
+    return item;
+  }
+}