<template>
  <div class="row q-pa-lg">
    <q-btn
      label="Open KFileViewer"
      @click="popupOpen = true"
    />
    <KFileViewer
      v-model="popupOpen"
      :file="{name: 'file 1', contentUrl: 'https://upload.wikimedia.org/wikipedia/commons/0/0f/Eiffel_Tower_Vertical.JPG', fileType: 'image'}"
    >
      <template #left>
        <div
          class="text-h6"
          style="width: 300px;"
        >
          Left
        </div>
      </template>
      <template #right>
        <div
          class="text-h6"
          style="width: 600px;"
        >
          Right
        </div>
      </template>
    </KFileViewer>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import KFileViewer from '../components/KFileViewer/KFileViewer.vue'

const popupOpen = ref(false)

</script>
