Switch to the composition API for preview.

js/preview/preview_confirm.vue

@@ -1,12 +1,12 @@
 <template>
   <v-dialog
-    :model-value="modelValue"
+    :model-value="model"
     persistent
     max-width="500"
   >
     <v-card>
       <v-card-title>
-        {{ $t('preview.url.title') }}
+        {{ t('preview.url.title') }}
       </v-card-title>
       <v-card-text>
         <i18n-t keypath="preview.url.text" tag="p">
@@ -20,68 +20,60 @@
           text
           @click="close"
         >
-          {{ $t('preview.url.no') }}
+          {{ t('preview.url.no') }}
         </v-btn>
         <v-btn
           :loading="loading"
           color="green darken-1"
           text
           @click="ok"
         >
-          {{ $t('preview.url.yes') }}
+          {{ t('preview.url.yes') }}
         </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
 </template>
 
-<script>
-export default {
-  props: {
-    origin: {
-      type: String,
-      required: true,
-    },
-    action: {
-      type: Function,
-      required: true
-    },
-    modelValue: {
-      type: Boolean,
-      required: true
-    }
-  },
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
-  data() {
-    return {
-      dialog: true,
-      loading: false
-    };
-  },
+const { t } = useI18n();
 
-  computed: {
-    domain() {
-      return new URL(this.origin).hostname;
-    }
+const props = defineProps({
+  origin: {
+    type: String,
+    required: true,
+  },
+  action: {
+    type: Function,
+    required: true
   },
+});
+
+const model = defineModel({ type: Boolean });
+
+const loading = ref(false);
+
+const domain = computed(() => {
+  return new URL(props.origin).hostname;
+});
 
-  methods: {
-    close() {
-      this.$emit('update:modelValue', false);
-    },
+function close() {
+  model.value = false;
+}
 
-    async ok() {
-      this.loading = true;
-      try {
-        const file = await this.action();
-        this.close();
-        this.$emit('openPreview', file);
-      } catch(e) {
-        console.error(e);
-      } finally {
-        this.loading = false;
-      }
-    }
+async function ok() {
+  loading.value = true;
+  try {
+    const file = await props.action();
+    close();
+    emit('openPreview', file);
+  } catch(e) {
+    console.error(e);
+  } finally {
+    loading.value = false;
   }
-};
+}
 </script>

js/preview/preview_toolbar.vue

@@ -1,7 +1,7 @@
 <template>
   <v-card class="pa-2">
     <div class="d-flex align-center">
-      <span class="text-h6 flex-grow-1">{{ $t('preview.title') }}</span>
+      <span class="text-h6 flex-grow-1">{{ t('preview.title') }}</span>
       <v-tooltip bottom>
         <template v-slot:activator="{ props }">
           <v-btn
@@ -14,7 +14,7 @@
             <v-icon>{{ mdiDownload }}</v-icon>
           </v-btn>
         </template>
-        <span>{{ $t('preview.download') }}</span>
+        <span>{{ t('preview.download') }}</span>
       </v-tooltip>
       <v-tooltip bottom>
         <template v-slot:activator="{ props }">
@@ -27,13 +27,13 @@
             <v-icon>{{ mdiClose }}</v-icon>
           </v-btn>
         </template>
-        <span>{{ $t('preview.close') }}</span>
+        <span>{{ t('preview.close') }}</span>
       </v-tooltip>
     </div>
     <v-file-input
-      :label="$t('preview.file')"
+      :label="t('preview.file')"
       :clearable="false"
-      :accept="fileFormats"
+      :accept="acceptedFileFormats"
       :prepend-icon="mdiPuzzleCheck"
       dense
       full-width
@@ -44,38 +44,30 @@
   </v-card>
 </template>
 
-<script>
+<script setup>
+import { computed } from 'vue';
 import { mdiDownload, mdiClose, mdiPuzzleCheck } from '@mdi/js';
+import { useI18n } from 'vue-i18n';
 import { fileFormats } from './preview';
 
-export default {
-  props: {
-    filePreview: {
-      type: File,
-      required: true,
-    }
-  },
+const { t } = useI18n();
 
-  data() {
-    return {
-      fileFormats: fileFormats.join(','),
-      mdiClose,
-      mdiDownload,
-      mdiPuzzleCheck
-    };
-  },
+const props = defineProps({
+  filePreview: {
+    type: File,
+    required: true,
+  }
+});
 
-  computed: {
-    fileUrl() {
-       return URL.createObjectURL(this.filePreview);
-    }
-  },
+const acceptedFileFormats = fileFormats.join(',');
 
-  methods: {
-    openPreview(file) {
-      if (!file) return;
-      this.$emit('openPreview', file);
-    }
-  }
+const fileUrl = computed(() => {
+  return URL.createObjectURL(props.filePreview);
+});
+
+const emit = defineEmits(['openPreview']);
+function openPreview(file) {
+  if (!file) return;
+  emit('openPreview', file);
 }
 </script>