refactor: set base calendar and slot options

UCLALibrary · Dec 5, 2024 · 8dd8f3a · 8dd8f3a
1 parent 0852ec4
commit 8dd8f3a
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 52 deletions.
diff --git a/src/lib-components/BaseCalendar.vue b/src/lib-components/BaseCalendar.vue
@@ -1,9 +1,12 @@
 <script setup>
 import { computed, onMounted, ref, useTemplateRef } from 'vue'
 import format from 'date-fns/format'
+import BlockCardWithImage from './BlockCardWithImage.vue'
+import BlockEventDetail from './BlockEventDetail.vue'
+import BlockTag from './BlockTag.vue'
 import { useTheme } from '@/composables/useTheme'
 
-const { events, firstEventMonth } = defineProps({
+const { defaultEventCalendar, events, firstEventMonth } = defineProps({
   events: {
     type: Array,
     default: () => [],
@@ -14,6 +17,11 @@ const { events, firstEventMonth } = defineProps({
     default: () => [new Date()]
     // Sets calendar to month of earliest event
     // Default is current date
+  },
+
+  defaultEventCalendar: {
+    type: Boolean,
+    default: true
   }
 })
 
@@ -99,7 +107,7 @@ function showEvent(calEventObj) {
           view-mode="month"
         >
           <!-- Vuetify calendar event slot -->
-          <!-- slot prop holds each parsedEvent object -->
+          <!-- Slot prop holds each parsedEvent object -->
           <template #event="event">
             <button ref="eventItemRef" class="calendar-event-item" @click="showEvent(event.event)">
               <span class="calendar-event-title">
@@ -119,11 +127,34 @@ function showEvent(calEventObj) {
                 offset="10"
               >
                 <v-card width="320" :link="true" :to="selectedEvent.to">
-                  <!-- Inner component(s) slot -->
-                  <div v-if="$slots.calendarInnerComponent" class="calendar-slot-wrapper">
-                    <slot name="calendarInnerComponent" :event="selectedEvent" />
+                  <!-- Default Event Calendar -->
+                  <div v-if="defaultEventCalendar" class="calendar-event-popup-wrapper">
+                    <BlockCardWithImage
+                      :image="selectedEvent.image"
+                      :title="selectedEvent.title"
+                      :category="selectedEvent.category"
+                    />
+                    <div class="block-tag-wrapper">
+                      <BlockTag
+                        v-for="tag in selectedEvent.tagLabels"
+                        :key="`tag-${tag.title}`"
+                        :label="tag.title"
+                        :is-secondary="true"
+                      />
+                    </div>
+                    <BlockEventDetail
+                      :start-date="selectedEvent.startDateWithTime"
+                      :time="selectedEvent.startDateWithTime"
+                      :locations="selectedEvent.location"
+                    />
+                  </div>
+
+                  <!-- Slot for new components -->
+                  <div v-else-if="$slots.calendarSlotComponent" class="calendar-slot-wrapper">
+                    <slot name="calendarSlotComponent" :event="selectedEvent" />
                   </div>
-                  <!-- Default vuetify popup -->
+
+                  <!-- Default Vuetify Popup -->
                   <v-list v-else>
                     <v-list-item
                       :title="selectedEvent.title"

diff --git a/src/stories/BaseCalendar.stories.js b/src/stories/BaseCalendar.stories.js
@@ -10,7 +10,17 @@ export default {
   component: BaseCalendar,
 }
 
-export function Default() {
+export function DefaultVuetify() {
+  return {
+    data() {
+      return { ...mockCalendarEvents }
+    },
+    components: { BaseCalendar },
+    template: '<div style="display: flex;justify-content: center;"><base-calendar :events="events" :defaultEventCalendar="false" /></div>'
+  }
+}
+
+export function DefaultEvent() {
   return {
     data() {
       return { ...mockCalendarEvents }
@@ -20,7 +30,7 @@ export function Default() {
   }
 }
 
-export function DefaultFTVA() {
+export function DefaultFTVAEvent() {
   return {
     data() {
       return { ...mockCalendarEvents }
@@ -80,42 +90,3 @@ export function SameDayEvents() {
       </div>`
   }
 }
-
-export function FTVAComponents() {
-  return {
-    data() {
-      return {
-        ...mockCalendarEvents
-      }
-    },
-    provide() {
-      return {
-        theme: computed(() => 'ftva'),
-      }
-    },
-    components: { BaseCalendar, BlockCardWithImage, BlockEventDetail, BlockTag },
-    template: `<div style="display: flex;justify-content: center;"><base-calendar :events="events">
-        <template #calendarInnerComponent="{event}">
-          <block-card-with-image
-            :image="event.image"
-            :title="event.title"
-            :category="event.category"
-          />
-          <div class="block-tag-wrapper">
-            <block-tag
-              v-for="tag in event.tagLabels"
-              :key="tag.title"
-              :label="tag.title"
-              :isSecondary="true"
-            />
-          </div>
-          <block-event-detail
-            :start-date="event.startDateWithTime"
-            :time="event.startDateWithTime"
-            :locations="event.location"
-          />
-        </template>
-      </base-calendar>
-    </div>`
-  }
-}
diff --git a/src/styles/default/_base-calendar.scss b/src/styles/default/_base-calendar.scss
@@ -151,8 +151,8 @@
   }
 }
 
-/*************************************/
-/* Styles for Calendar Slot Components: 
+/*********************************/
+/* Calendar Event Popup Components: 
   - BlockCardWithImage
   - CardMeta
   - BlockTag
@@ -165,8 +165,8 @@
     border-radius: 8px;
   }
 
-  // Slot Wrapper
-  .calendar-slot-wrapper {
+
+  .calendar-event-popup-wrapper {
 
     .block-highlight {
       border-radius: 0;
@@ -237,5 +237,8 @@
       }
     }
   }
+
+   // Slot styles
+  .calendar-slot-wrapper{}
 }
 
diff --git a/src/styles/ftva/_base-calendar.scss b/src/styles/ftva/_base-calendar.scss
@@ -39,9 +39,17 @@
   }
 }
 
+/*********************************/
+/* Calendar Event Popup Components: 
+  - BlockCardWithImage
+  - CardMeta
+  - BlockTag
+  - BlockEventDetail
+*/
+
 .v-overlay-container {
 
-  .calendar-slot-wrapper {
+  .calendar-event-popup-wrapper {
     background-color: $page-blue;
 
     .ftva.block-highlight {
@@ -64,4 +72,7 @@
       }
     }
   }
+
+  // Slot styles
+  .calendar-slot-wrapper{}
 }