frontend-elite-data-analysis/src/components/data-analysis/FileContainer.vue

<template>
  <va-card class="">
    <div class="h-200px">
      <va-button @click="showModal">FILE</va-button>
      <p>Meta: {{ fileView.filesSelected }}</p>
      <p>X: {{ channel.xAxis }}</p>
      <p>Y: {{ channel.yAxis }}</p>
      <Suspense>
        <FileModal ref="file_modal_ref"></FileModal>
      </Suspense>
    </div>
  </va-card>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { useChannelStore } from '@/stores/data-analysis/channel'
  import { useFileViewStore } from '@/stores/data-analysis/file-view'
  import FileModal from '@/components/data-analysis/FileModal.vue'

  const channel = useChannelStore()
  const fileView = useFileViewStore()

  /* File Modal Handling */
  let file_modal_ref = ref<InstanceType<typeof FileModal> | null>(null)
  const showModal = function () {
    file_modal_ref.value?.showModal()
  }

  defineExpose({ file_modal_ref, showModal })
</script>