Tinu's APP.vue Setup

<script setup>
import { computed, provide, onMounted, onBeforeUnmount } from "vue"
import router from "@/router"
import { useGlobalStore } from "@/stores/GlobalStore"

// Component Imports
import BlockInfo from "@/lib-components/BlockInfo.vue"
// ...
// ...
// ...

// Mock Data: Add path to your local mock files
import * as FTVA from "/Users/tawopetu/Git/mock/mockFTVA"

// To Test FTVA Theming
provide(
    "theme",
    computed(() => "ftva")
)

// To Test Mobile Responsiveness
onMounted(() => {
    const globalStore = useGlobalStore()

    const updateWinWidth = () => {
        globalStore.winWidth = window.innerWidth
        // console.log(globalStore.winWidth)
    }

    // Set initial winWidth
    updateWinWidth()

    // Update winWidth on window resize
    window.addEventListener("resize", updateWinWidth)

    // Use onBeforeUnmount to clean up
    onBeforeUnmount(() => {
        window.removeEventListener("resize", updateWinWidth)
    })
})

// Provide-Inject config for testing BlockForm
const testKey = "blockFormData"
const testValue = MOCK.blockForm

provide("eventId", "9383207")
provide(testKey, testValue)
provide("registrationType", "both")
provide("libcalEndpoint", "https://proxy.calendar.library.ucla.edu/")
provide("libcalWaitlist", "")

// Test Routes
// Regular route
const route = router.push("visit/events-exhibitions/baby-doll-07-28-24")

// Routes to test breadcrumb nesting
// Route url with three levels:
// const route = router.push(
// '/explore-collections/watch-and-listen-online/senator-john-f.-kennedy-gives-press-conference-in-los-angeles'
// )

// Route url with five levels:
// const route = router.push(
//     '/explore-collections/watch-and-listen-online/ktla-collection/national-and-local-politics/ktla-news-demo-article'
// )

</script>

<template>
  <!-- Vite / Vue Icons -->
  <div>
    <div style="display: flex; justify-content: center">
      <a href="https://vitejs.dev" target="_blank">
        <img src="/vite.svg" class="logo" alt="Vite logo">
      </a>
      <a href="https://vuejs.org/" target="_blank">
        <img src="./assets/vue.svg" class="logo vue" alt="Vue logo">
      </a>
    </div>
    <hr>
    <br>
  </div>

  <!-- Template: Code block for rendering component -->
  <!-- ComponentName -->
  <!-- <div>
    <h2>ComponentName Component</h2>
    <br>
    <component />
    <br>
    <hr>
    <br>
    </div> -->

    <!-- Example rendered component -->
    <!-- BlockInfo -->
    <div>
     <h2>BlockInfo Component</h2>
     <br>
     <BlockInfo v-bind="FTVA.blockInfo" />
     <br>
     <hr>
     <br>
   </div>

   <!-- Add / Render additional components as needed -->

</template>

<style scoped>
.logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
}

.logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
    filter: drop-shadow(0 0 2em #42b883aa);
}
</style>