v-calendar-3 1.0.0

package/src/components/CalendarGrid/CalendarCell.vue

@@ -0,0 +1,112 @@
+<template>
+  <div
+    :data-cell-id="event.key"
+    class="vc-grid-event"
+    :class="[
+      `vc-${event.color}`,
+      {
+        'is-all-day': event.allDay,
+        'is-dragging': event.dragging,
+        'is-selected': event.selected,
+        'is-resizing': event.resizing,
+      },
+    ]"
+    :tabindex="1"
+    @mousedown.prevent="onEventMouseDown($event, event)"
+    @touchstart.passive="onEventTouchStart($event, event)"
+    @touchmove.passive="onEventTouchMove($event, event)"
+    @touchend.passive="onEventTouchEnd($event, event)"
+  >
+    <div class="vc-grid-event-content-wrapper">
+      <div class="vc-grid-event-content">
+        <template v-if="event.isWeekly">
+          <div class="vc-grid-event-summary">{{ event.summary }}</div>
+        </template>
+        <template v-else>
+          <span v-if="isMonthly" class="vc-grid-event-indicator" />
+          <div class="vc-grid-event-summary">{{ event.summary }}</div>
+          <div class="vc-grid-event-start-date-label">
+            {{ event.startTimeLabel }}
+          </div>
+          <div class="vc-grid-event-date-label">
+            {{ event.timeLabel }}
+          </div>
+        </template>
+      </div>
+      <!--Resize start-->
+      <div
+        v-if="resizable"
+        class="vc-grid-event-resizer is-start"
+        :class="{
+          'is-horizontal': resizableHorizontal,
+          'is-vertical': resizableVertical,
+        }"
+        @click.prevent
+        @mousedown="onEventResizeStartMouseDown($event, event)"
+        @touchstart.passive="onEventResizeStartTouchStart($event, event)"
+      />
+      <!--Resize end-->
+      <div
+        v-if="resizable"
+        class="vc-grid-event-resizer is-end"
+        :class="{
+          'is-horizontal': resizableHorizontal,
+          'is-vertical': resizableVertical,
+        }"
+        @click.prevent
+        @mousedown="onEventResizeEndMouseDown($event, event)"
+        @touchstart.passive="onEventResizeEndTouchStart($event, event)"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+import type { Event } from '../../utils/calendar/event';
+import type { DateRangeCell } from '../../utils/date/range';
+import { popoverDirective } from '../../utils/popovers';
+
+export default defineComponent({
+  name: 'CalendarCell',
+  directives: { popover: popoverDirective },
+});
+</script>
+
+<script setup lang="ts">
+import { useCalendarGrid } from '../../use/calendarGrid';
+
+const props = defineProps<{
+  cell: DateRangeCell<Event>;
+}>();
+
+const {
+  isDaily,
+  isMonthly,
+  onEventMouseDown,
+  onEventTouchStart,
+  onEventTouchMove,
+  onEventTouchEnd,
+  onEventResizeStartMouseDown,
+  onEventResizeEndMouseDown,
+  onEventResizeStartTouchStart,
+  onEventResizeEndTouchStart,
+} = useCalendarGrid();
+
+const event = computed(() => props.cell.data);
+
+const resizable = computed(() => event.value.resizable);
+const resizableHorizontal = computed(() => {
+  if (!event.value.resizable) return false;
+  if (isDaily.value) return false;
+  if (isMonthly.value) return true;
+  if (event.value.isWeekly) return true;
+  return false;
+});
+const resizableVertical = computed(() => {
+  if (!event.value.resizable) return false;
+  if (isMonthly.value) return false;
+  if (event.value.isWeekly) return false;
+  return true;
+});
+</script>

package/src/components/CalendarGrid/CalendarCellPopover.vue

@@ -0,0 +1,93 @@
+<template>
+  <Popover
+    :id="popoverId"
+    :class="[`vc-${color}`, `vc-${displayMode}`]"
+    @after-hide="onAfterHide"
+    ref="popoverRef"
+  >
+    <CalendarEventEdit
+      v-if="event"
+      :event="event"
+      v-bind="$attrs"
+      @close="hide"
+    />
+  </Popover>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, reactive, ref, toRefs } from 'vue';
+import { useCalendar } from '../../use/calendar';
+import type { Event } from '../../utils/calendar/event';
+import {
+  type PopoverOptions,
+  hidePopover,
+  showPopover,
+} from '../../utils/popovers';
+import Popover from '../Popover/Popover.vue';
+import CalendarEventEdit from './CalendarEventEdit.vue';
+
+interface State {
+  event: Event | null;
+}
+
+export default defineComponent({
+  name: 'CalendarCellPopover',
+  components: { Popover, CalendarEventEdit },
+  inheritAttrs: false,
+  props: {
+    popoverId: { type: String, default: 'vc-grid-popover' },
+  },
+  setup(props) {
+    const popoverRef = ref(null);
+    const state: State = reactive({
+      event: null,
+    });
+    const { displayMode, color } = useCalendar();
+
+    const popoverOptions = computed(
+      () =>
+        ({
+          id: props.popoverId,
+          placement: 'right',
+        } as Partial<PopoverOptions>),
+    );
+
+    function show(event: Event) {
+      state.event = event;
+      showPopover({
+        ...popoverOptions.value,
+        target: event.refSelector,
+      });
+    }
+
+    function update(event: Event) {
+      event.editing = false;
+      state.event = event;
+    }
+
+    function hide() {
+      hidePopover({
+        ...popoverOptions.value,
+      });
+    }
+
+    function isVisible() {
+      return !!popoverRef.value && (popoverRef.value as any).isVisible;
+    }
+
+    return {
+      popoverRef,
+      ...toRefs(state),
+      displayMode,
+      color,
+      show,
+      update,
+      hide,
+      isVisible,
+      onAfterHide() {
+        state.event = null;
+      },
+    };
+  },
+});
+</script>

package/src/components/CalendarGrid/CalendarDayCell.vue

@@ -0,0 +1,57 @@
+<template>
+  <CalendarCell
+    :cell="cell"
+    :class="[`is-${size}`, `is-${fill}`]"
+    :style="style"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useCalendarGrid } from '../../use/calendarGrid';
+import { Event } from '../../utils/calendar/event';
+import { MS_PER_HOUR } from '../../utils/date/helpers';
+import { DateRangeCell } from '../../utils/date/range';
+import { roundTenth } from '../../utils/helpers';
+import CalendarCell from './CalendarCell.vue';
+
+const props = defineProps<{
+  cell: DateRangeCell<Event>;
+}>();
+
+const { pixelsPerHour } = useCalendarGrid();
+
+const event = computed(() => props.cell.data);
+
+const position = computed(() => {
+  const { startTime } = props.cell;
+  const yHours = startTime / MS_PER_HOUR;
+  return Math.max(roundTenth(yHours * pixelsPerHour.value), 0);
+});
+
+const height = computed(() => {
+  const { startTime, endTime } = props.cell;
+  const heightHours = (endTime - startTime) / MS_PER_HOUR;
+  const fullHeight = 24 * pixelsPerHour.value;
+  return Math.max(
+    Math.min(heightHours * pixelsPerHour.value, fullHeight - position.value),
+    0,
+  );
+});
+
+const size = computed(() => {
+  if (height.value <= 16) return '2xs';
+  if (height.value <= 30) return 'xs';
+  if (height.value <= 48) return 'sm';
+  return 'md';
+});
+
+const style = computed(() => {
+  return {
+    top: `${position.value}px`,
+    height: `${height.value}px`,
+  };
+});
+
+const fill = computed(() => event.value.fill);
+</script>

package/src/components/CalendarGrid/CalendarEventDetails.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="vc-calendar-event-details">
+    <template v-if="single">
+      <div class="vc-field">
+        <div class="vc-label">Title</div>
+        <input v-model="single.summary" type="text" class="vc-input" />
+      </div>
+      <div class="vc-field">
+        <div class="vc-label">Start</div>
+        <VDatePicker v-model="startDate" mode="dateTime">
+          <template #default="{ inputValue, inputEvents }">
+            <input class="vc-input" :value="inputValue" v-on="inputEvents" />
+          </template>
+        </VDatePicker>
+      </div>
+    </template>
+    <div v-else-if="events.length">
+      <div class="vc-label">{{ events.length }} events selected</div>
+    </div>
+    <div v-else>
+      <div class="vc-label">No event selected</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type PropType, computed, ref } from 'vue';
+import { Event } from '../../utils/calendar/event';
+
+const props = defineProps({
+  events: { type: Array as PropType<Event[]>, required: true },
+});
+
+const single = computed(() => {
+  if (!props.events.length || props.events.length > 1) return null;
+  return props.events[0];
+});
+const startDate = ref(new Date());
+</script>
+
+<style>
+.vc-calendar-cell-details {
+  background: var(--vc-gray-100);
+  border: solid 1px var(--vc-gray-300);
+  min-width: 400px;
+  padding: 1rem 1.5rem;
+  margin: 2.5rem 0 1rem 1rem;
+  border-radius: var(--vc-rounded-lg);
+
+  .vc-field {
+  }
+  .vc-label {
+    font-size: var(--vc-text-sm);
+    color: var(--vc-gray-600);
+    font-weight: var(--vc-font-medium);
+    letter-spacing: var(--tracking-wide);
+  }
+  .vc-input {
+    font-size: var(--vc-text-sm);
+    display: block;
+    margin-top: 0.25rem;
+    shadow: var(--vc-shadow-sm);
+    border: 1px solid var(--vc-gray-300);
+    padding: 0.25rem 0.75rem;
+    border-radius: var(--vc-rounded-md);
+    width: 100%;
+  }
+}
+
+/* focus:ring-indigo-500 focus:border-indigo-500  */
+</style>

package/src/components/CalendarGrid/CalendarEventEdit.vue

@@ -0,0 +1,195 @@
+<template>
+  <div class="w-80">
+    <!--Header-->
+    <div class="flex items-center justify-between py-1 px-2 space-x-3">
+      <!--Label-->
+      <input
+        v-if="event.editing"
+        v-model="event.summary"
+        v-focus
+        placeholder="Add event label"
+        class="color-white placeholder-gray-300 bg-gray-600 px-2 py-1 rounded border border-gray-500"
+      />
+      <h3 v-else class="font-bold">{{ event.summary }}</h3>
+      <!--Buttons-->
+      <div class="flex justify-end items-center space-x-3">
+        <!--Edit button-->
+        <button
+          v-if="!event.editing"
+          type="button"
+          class="w-5 h-5 text-blue-500 hover:opacity-50"
+          @click="onToggleEditing()"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
+            />
+          </svg>
+        </button>
+        <!--Remove button-->
+        <button
+          type="button"
+          class="w-5 h-5 text-red-500 hover:opacity-50"
+          @click="onRemove"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+            />
+          </svg>
+        </button>
+        <!--Close button-->
+        <button
+          type="button"
+          class="w-5 h-5 hover:opacity-50"
+          @click="$emit('close')"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+    <div v-if="event.editing">
+      <div class="flex justify-end items-center space-x-2 mt-3 mb-1">
+        <!--Save button-->
+        <button
+          type="button"
+          class="flex justify-center items-center bg-blue-200 text-sm text-blue-800 hover:bg-blue-300 px-2 py-1 rounded"
+          @click="onSave"
+        >
+          Save
+        </button>
+        <!--Cancel button-->
+        <button
+          type="button"
+          class="flex justify-center items-center text-sm px-2 py-1 rounded hover:bg-gray-500"
+          @click="onCancel"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+    <div v-else class="py-2 px-3 space-y-2">
+      <!--Date-->
+      <div class="flex items-center">
+        <!--Date icon-->
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-5 w-5 text-gray-400 current-color"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+          />
+        </svg>
+        <!--Date label-->
+        <div class="ml-2 text-gray-200 font-medium">
+          {{ event.formatDate(event.startDate, 'WWWW, MMMM D') }}
+        </div>
+      </div>
+      <!--Time-->
+      <div class="flex items-center">
+        <!--Time icon-->
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-5 w-5 text-gray-400 current-color"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+        <!--Time label-->
+        <div class="ml-2 text-gray-200 font-medium">
+          <span v-if="event.allDay"> All Day </span>
+          <span v-else-if="event.isMultiDay"
+            >{{ event.startTimeLabel }}-{{ event.endTimeLabel }}</span
+          >
+          <span v-else
+            >{{ event.startTimeLabel }}-{{ event.endTimeLabel }}</span
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent, reactive, toRefs } from 'vue';
+import { useCalendarGrid } from '../../use/calendarGrid';
+import { Event } from '../../utils/calendar/event';
+
+export default defineComponent({
+  name: 'CalendarEventEdit',
+  emits: ['close'],
+  props: {
+    event: { type: Object as PropType<Event>, required: true },
+  },
+  directives: {
+    focus: {
+      mounted(el) {
+        el.focus();
+      },
+    },
+  },
+  setup(props) {
+    const { removeEvent } = useCalendarGrid();
+
+    const state = reactive({
+      // editing: false,
+    });
+    return {
+      ...toRefs(state),
+      onRemove() {
+        removeEvent(props.event);
+      },
+      onToggleEditing() {
+        props.event.editing = !props.event.editing;
+      },
+      onSave() {
+        props.event.editing = false;
+      },
+      onCancel() {
+        props.event.editing = false;
+      },
+    };
+  },
+});
+</script>