@eeplatform/nuxt-layer-common 1.2.11 → 1.3.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @eeplatform/nuxt-layer-common
 
+## 1.3.1
+
+### Patch Changes
+
+- 41bddb4: Layout header component - add default apps as props
+
+## 1.3.0
+
+### Minor Changes
+
+- 215fdff: Curriculum mgmt - initial release
+
 ## 1.2.11
 
 ### Patch Changes

package/components/Calendar.vue

@@ -0,0 +1,199 @@
+<template>
+  <v-card
+    :width="width"
+    :variant="variant"
+    :border="border"
+    :rounded="rounded"
+    :class="cardClass"
+  >
+    <!-- Month View (Default) -->
+    <CalendarMonth
+      v-if="view === 'month'"
+      :current="current"
+      :events="events"
+      :calendar-height="calendarHeight"
+      @day-click="onDayClick"
+    >
+      <template #header="headerProps">
+        <slot name="header" v-bind="headerProps" />
+      </template>
+      <template #day="dayProps">
+        <slot name="day" v-bind="dayProps" />
+      </template>
+    </CalendarMonth>
+
+    <!-- Week View -->
+    <CalendarWeek
+      v-else-if="view === 'week'"
+      :current="current"
+      :events="events"
+      :calendar-height="calendarHeight"
+      @minute-click="onMinuteClick"
+      @event-click="onEventClick"
+    />
+
+    <!-- Day View -->
+    <CalendarDay
+      v-else-if="view === 'day'"
+      :current="current"
+      :events="events"
+      :calendar-height="calendarHeight"
+      @hour-click="onHourClick"
+      @minute-click="onMinuteClick"
+      @event-click="onEventClick"
+    />
+
+    <!-- Year View -->
+    <CalendarYear
+      v-else-if="view === 'year'"
+      :current="current"
+      :events="events"
+      :calendar-height="calendarHeight"
+      @month-click="onMonthClick"
+    />
+  </v-card>
+</template>
+
+<script setup>
+import { ref, computed, watch } from "vue";
+import CalendarMonth from "./CalendarMonth.vue";
+import CalendarWeek from "./CalendarWeek.vue";
+import CalendarDay from "./CalendarDay.vue";
+import CalendarYear from "./CalendarYear.vue";
+
+// Props
+const props = defineProps({
+  // Calendar props
+  modelValue: {
+    type: Date,
+    default: () => new Date(),
+  },
+  events: {
+    type: Array,
+    default: () => [],
+    validator: (events) => {
+      return events.every(
+        (event) =>
+          event.startDate &&
+          event.endDate &&
+          event.startDate instanceof Date &&
+          event.endDate instanceof Date
+      );
+    },
+  },
+  view: {
+    type: String,
+    default: "month",
+    validator: (value) => ["day", "week", "month", "year"].includes(value),
+  },
+  height: {
+    type: String,
+    default: "calc(100vh - 100px)",
+  },
+  // Card styling props
+  width: {
+    type: String,
+    default: "100%",
+  },
+  variant: {
+    type: String,
+    default: "outlined",
+  },
+  border: {
+    type: String,
+    default: "thin",
+  },
+  rounded: {
+    type: String,
+    default: "lg",
+  },
+  cardClass: {
+    type: String,
+    default: "",
+  },
+});
+
+// Emits
+const emit = defineEmits([
+  "update:modelValue",
+  "dayClick",
+  "hourClick",
+  "eventClick",
+  "monthClick",
+]);
+
+// Reactive data
+const current = ref(new Date(props.modelValue));
+
+// Computed properties
+const calendarHeight = computed(() => props.height);
+
+// Watch for external changes to modelValue
+watch(
+  () => props.modelValue,
+  (newDate) => {
+    current.value = new Date(newDate);
+  }
+);
+
+// Handle day click
+const onDayClick = (dayData) => {
+  emit("dayClick", dayData);
+};
+
+// Handle hour click for day/week views
+const onHourClick = (hourData) => {
+  emit("hourClick", hourData);
+};
+
+// Handle minute click for table-based day view
+const onMinuteClick = (minuteData) => {
+  emit("hourClick", minuteData);
+};
+
+// Handle event click
+const onEventClick = (event) => {
+  emit("eventClick", event);
+};
+
+// Handle month click in year view
+const onMonthClick = (monthData) => {
+  const newDate = new Date(current.value.getFullYear(), monthData.month, 1);
+  current.value = newDate;
+  emit("update:modelValue", newDate);
+  emit("monthClick", monthData);
+};
+
+// Methods to expose for parent components
+const goToNextMonth = () => {
+  const newDate = new Date(current.value);
+  newDate.setMonth(newDate.getMonth() + 1);
+  current.value = newDate;
+  emit("update:modelValue", newDate);
+};
+
+const goToPrevMonth = () => {
+  const newDate = new Date(current.value);
+  newDate.setMonth(newDate.getMonth() - 1);
+  current.value = newDate;
+  emit("update:modelValue", newDate);
+};
+
+const goToToday = () => {
+  const today = new Date();
+  current.value = today;
+  emit("update:modelValue", today);
+};
+
+// Expose methods for parent component access
+defineExpose({
+  goToNextMonth,
+  goToPrevMonth,
+  goToToday,
+  current,
+});
+</script>
+
+<style scoped>
+/* Main calendar wrapper styles */
+</style>