v-calendar-3 1.0.0

package/src/components/CalendarGrid/CalendarGridWeek.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="vc-grid-week-cells" :style="weekCellsStyle">
+    <template v-for="cell in cells" :key="cell.data.key">
+      <CalendarWeekCell
+        :cell="cell"
+        :min-day-index="minDayIndex"
+        :max-day-index="maxDayIndex"
+      />
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'CalendarGridWeek',
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import CalendarWeekCell from './CalendarWeekCell.vue';
+import { useCalendarGrid } from '../../use/calendarGrid';
+import { DateRangeCell } from '../../utils/date/range';
+import { Event } from '../../utils/calendar/event';
+import { CalendarDay } from '../../utils/page';
+
+const props = defineProps<{
+  days: CalendarDay[];
+}>();
+
+const { isMonthly, eventsContext } = useCalendarGrid();
+
+const minDayIndex = computed(() => props.days[0]?.dayIndex ?? 0);
+const maxDayIndex = computed(
+  () => props.days[props.days.length - 1]?.dayIndex ?? 0,
+);
+
+const cells = computed(() => {
+  const result: Array<DateRangeCell<Event>> = [];
+  const added: Record<string, boolean> = {};
+
+  props.days.forEach(day => {
+    const cells = eventsContext.value.getCells(day);
+    cells.forEach((cell: DateRangeCell<Event>) => {
+      if ((!cell.data.isWeekly && !isMonthly.value) || added[cell.data.key]) {
+        return;
+      }
+      result.push(cell);
+      added[cell.data.key] = true;
+    });
+  });
+
+  return result;
+});
+
+const weekCellsStyle = computed(() => {
+  const numDays = props.days.length;
+  return { gridTemplateColumns: `repeat(${numDays}, 1fr)` };
+});
+</script>

package/src/components/CalendarGrid/CalendarViewSelect.vue

@@ -0,0 +1,34 @@
+<template>
+  <BaseSelect
+    v-model="view"
+    :options="viewOptions"
+    class="vc-view-select"
+    show-icon
+  />
+</template>
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useCalendar } from '../../use/calendar';
+import { capitalize } from '../../utils/helpers';
+import BaseSelect from '../BaseSelect/BaseSelect.vue';
+
+const { locale, view } = useCalendar();
+
+const viewOptions = computed(() => {
+  const names = locale.value.relativeTimeNames;
+  return [
+    {
+      value: 'daily',
+      label: capitalize(names.day!),
+    },
+    {
+      value: 'weekly',
+      label: capitalize(names.week!),
+    },
+    {
+      value: 'monthly',
+      label: capitalize(names.month!),
+    },
+  ];
+});
+</script>

package/src/components/CalendarGrid/CalendarWeekCell.vue

@@ -0,0 +1,52 @@
+<template>
+  <CalendarCell
+    :cell="cell"
+    :class="[
+      'is-2xs',
+      `is-${fill}`,
+      {
+        'is-2xs': true,
+        'has-start': hasStart,
+        'has-end': hasEnd,
+      },
+    ]"
+    :style="style"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useCalendarGrid } from '../../use/calendarGrid';
+import { Event } from '../../utils/calendar/event';
+import { DateRangeCell } from '../../utils/date/range';
+import CalendarCell from './CalendarCell.vue';
+
+const props = defineProps<{
+  cell: DateRangeCell<Event>;
+  minDayIndex: number;
+  maxDayIndex: number;
+}>();
+
+const { isMonthly } = useCalendarGrid();
+
+const event = computed(() => props.cell.data);
+const hasStart = computed(() => props.minDayIndex <= props.cell.startDay);
+const hasEnd = computed(() => props.maxDayIndex >= props.cell.endDay);
+
+const fill = computed(() => {
+  if (isMonthly.value && !event.value.isWeekly) return 'transparent';
+  return event.value.fill;
+});
+
+const style = computed(() => {
+  const gridColumnStart = Math.max(
+    props.cell.startDay - props.minDayIndex + 1,
+    1,
+  );
+  const gridColumnEnd = Math.min(props.cell.endDay - props.maxDayIndex - 1, -1);
+  return {
+    gridColumnStart,
+    gridColumnEnd,
+  };
+});
+</script>

package/src/components/CalendarGrid/Constraints.ts

@@ -0,0 +1,40 @@
+type ConstraintType =
+  | 'MIN_DURATION'
+  | 'MAX_DURATION'
+  | 'BEFORE_DAY'
+  | 'AFTER_DAY'
+  | 'OUTSIDE_DAY';
+
+type ConstraintRecovery = false | 'RESIZE';
+
+interface ConstraintOptions {
+  durationMinutes?: number;
+  recover: ConstraintRecovery;
+}
+
+export interface Constraint {
+  type: ConstraintType;
+  options?: ConstraintOptions;
+}
+
+export class Constraints {
+  constraints: Constraint[];
+
+  constructor(constraints: Constraint[]) {
+    this.constraints = constraints.filter(c => this.validConstraint(c));
+  }
+
+  validConstraint(constraint: Constraint) {
+    switch (constraint.type) {
+      case 'MIN_DURATION':
+      case 'MAX_DURATION': {
+        if (!constraint.options?.durationMinutes) {
+          console.error(
+            `Invalid constraint option for ${constraint.type}. Missing duration.`,
+          );
+          return false;
+        }
+      }
+    }
+  }
+}

package/src/components/DatePicker/DatePicker.vue

@@ -0,0 +1,27 @@
+<template>
+  <template v-if="$slots.default">
+    <slot v-bind="slotCtx" />
+    <DatePickerPopover v-bind="$attrs" />
+  </template>
+  <DatePickerBase v-else v-bind="$attrs" />
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive } from 'vue';
+import { createDatePicker, emits, propsDef } from '../../use/datePicker';
+import { omit } from '../../utils/helpers';
+import DatePickerBase from './DatePickerBase.vue';
+import DatePickerPopover from './DatePickerPopover.vue';
+
+export default defineComponent({
+  inheritAttrs: false,
+  emits,
+  props: propsDef,
+  components: { DatePickerBase, DatePickerPopover },
+  setup(props, ctx) {
+    const datePicker = createDatePicker(props, ctx);
+    const slotCtx = reactive(omit(datePicker, 'calendarRef', 'popoverRef'));
+    return { ...datePicker, slotCtx };
+  },
+});
+</script>

package/src/components/DatePicker/DatePickerBase.vue

@@ -0,0 +1,53 @@
+<template>
+  <div
+    v-if="isTimeMode"
+    :class="`vc-container vc-bordered vc-${color} vc-${displayMode}`"
+  >
+    <TimePicker
+      v-for="position in positions"
+      :key="position"
+      :position="position"
+    />
+  </div>
+  <Calendar
+    v-else
+    :attributes="attributes"
+    ref="calendarRef"
+    @dayclick="onDayClick"
+    @daymouseenter="onDayMouseEnter"
+    @daykeydown="onDayKeydown"
+  >
+    <template #footer>
+      <template v-if="isDateTimeMode">
+        <TimePicker
+          v-for="position in positions"
+          :key="position"
+          :position="position"
+        />
+      </template>
+      <CalendarSlot name="dp-footer" />
+    </template>
+  </Calendar>
+</template>
+
+<script setup lang="ts">
+import { useDatePicker } from '../../use/datePicker';
+import Calendar from '../Calendar/Calendar.vue';
+import CalendarSlot from '../Calendar/CalendarSlot.vue';
+import TimePicker from './TimePicker.vue';
+
+const {
+  attributes,
+  calendarRef,
+  color,
+  displayMode,
+  isDateTimeMode,
+  isTimeMode,
+  isRange,
+  onDayClick,
+  onDayMouseEnter,
+  onDayKeydown,
+} = useDatePicker();
+
+const positions = isRange.value ? [0, 1] : [0];
+</script>

package/src/components/DatePicker/DatePickerPopover.vue

@@ -0,0 +1,37 @@
+<template>
+  <Popover
+    :id="datePickerPopoverId"
+    placement="bottom-start"
+    :class="`vc-date-picker-content vc-${color} vc-${displayMode}`"
+    ref="popoverRef"
+    @before-show="onPopoverBeforeShow"
+    @after-show="onPopoverAfterShow"
+    @before-hide="onPopoverBeforeHide"
+    @after-hide="onPopoverAfterHide"
+  >
+    <DatePickerBase v-bind="$attrs" />
+  </Popover>
+</template>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+};
+</script>
+
+<script setup lang="ts">
+import { useDatePicker } from '../../use/datePicker';
+import Popover from '../Popover/Popover.vue';
+import DatePickerBase from './DatePickerBase.vue';
+
+const {
+  datePickerPopoverId,
+  color,
+  displayMode,
+  popoverRef,
+  onPopoverBeforeShow,
+  onPopoverAfterShow,
+  onPopoverBeforeHide,
+  onPopoverAfterHide,
+} = useDatePicker();
+</script>

package/src/components/DatePicker/TimePicker.vue

@@ -0,0 +1,167 @@
+<template>
+  <div
+    class="vc-time-picker"
+    :class="[{ 'vc-invalid': !isValid, 'vc-attached': !isTimeMode }]"
+  >
+    <CalendarSlot name="time-header">
+      <div v-if="showHeader && date" class="vc-time-header">
+        <span class="vc-time-weekday">
+          {{ locale.formatDate(date, 'WWW') }}
+        </span>
+        <span class="vc-time-month">
+          {{ locale.formatDate(date, 'MMM') }}
+        </span>
+        <span class="vc-time-day">
+          {{ locale.formatDate(date, 'D') }}
+        </span>
+        <span class="vc-time-year">
+          {{ locale.formatDate(date, 'YYYY') }}
+        </span>
+      </div>
+    </CalendarSlot>
+    <div class="vc-time-select-group">
+      <BaseIcon name="Clock" size="17" />
+      <BaseSelect
+        v-model.number="hours"
+        :options="hourOptions"
+        class="vc-time-select-hours"
+        align-right
+      />
+      <template v-if="timeAccuracy > 1">
+        <span class="vc-time-colon">:</span>
+        <BaseSelect
+          v-model.number="minutes"
+          :options="options.minutes"
+          class="vc-time-select-minutes"
+          :align-left="timeAccuracy === 2"
+        />
+      </template>
+      <template v-if="timeAccuracy > 2">
+        <span class="vc-time-colon">:</span>
+        <BaseSelect
+          v-model.number="seconds"
+          :options="options.seconds"
+          class="vc-time-select-seconds"
+          :align-left="timeAccuracy === 3"
+        />
+      </template>
+      <template v-if="timeAccuracy > 3">
+        <span class="vc-time-decimal">.</span>
+        <BaseSelect
+          v-model.number="milliseconds"
+          :options="options.milliseconds"
+          class="vc-time-select-milliseconds"
+          align-left
+        />
+      </template>
+      <BaseSelect v-if="!is24hr" v-model="isAM" :options="isAMOptions" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { createTimePicker } from '../../use/timePicker';
+import BaseIcon from '../BaseIcon/BaseIcon.vue';
+import BaseSelect from '../BaseSelect/BaseSelect.vue';
+import CalendarSlot from '../Calendar/CalendarSlot.vue';
+
+const props = defineProps<{
+  position: number;
+}>();
+
+const timePicker = createTimePicker(props);
+defineExpose(timePicker);
+const {
+  locale,
+  isValid,
+  date,
+  hours,
+  minutes,
+  seconds,
+  milliseconds,
+  options,
+  hourOptions,
+  isTimeMode,
+  isAM,
+  isAMOptions,
+  is24hr,
+  showHeader,
+  timeAccuracy,
+} = timePicker;
+</script>
+
+<style lang="css">
+.vc-time-picker {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 8px 4px;
+  &.vc-invalid {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+  &.vc-attached {
+    border-top: 1px solid var(--vc-time-picker-border);
+  }
+  > * + * {
+    margin-top: 4px;
+  }
+}
+
+.vc-time-header {
+  display: flex;
+  align-items: center;
+  font-size: var(--vc-text-sm);
+  font-weight: var(--vc-font-semibold);
+  text-transform: uppercase;
+  margin-top: -4px;
+  padding-left: 4px;
+  padding-right: 4px;
+  line-height: 21px;
+}
+
+.vc-time-select-group {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 4px;
+  background: var(--vc-time-select-group-bg);
+  border-radius: var(--vc-rounded-md);
+  border: 1px solid var(--vc-time-select-group-border);
+  .vc-base-icon {
+    margin-right: 4px;
+    color: var(--vc-time-select-group-icon-color);
+  }
+  select {
+    background: transparent;
+    padding: 0px 4px;
+  }
+}
+
+.vc-time-weekday {
+  color: var(--vc-time-weekday-color);
+  letter-spacing: var(--tracking-wide);
+}
+
+.vc-time-month {
+  color: var(--vc-time-month-color);
+  margin-left: 8px;
+}
+
+.vc-time-day {
+  color: var(--vc-time-day-color);
+  margin-left: 4px;
+}
+
+.vc-time-year {
+  color: var(--vc-time-year-color);
+  margin-left: 8px;
+}
+
+.vc-time-colon {
+  margin: 0 1px 2px 2px;
+}
+
+.vc-time-decimal {
+  margin: 0 0 0 1px;
+}
+</style>