chore(refactor): ViewerComponent to script setup and ts

Signed-off-by: Max <max@nextcloud.com>

Author: max-nextcloud

src/components/ViewerComponent.vue

@@ -21,120 +21,69 @@
 		:mime
 		:source
 		v-bind="$attrs"
-		@loaded="onLoaded"
+		@loaded="onLoadedHandler"
 		@edit="toggleEdit" />
 </template>
 
-<script>
+<script setup lang="ts">
 import { getSharingToken } from '@nextcloud/sharing/public'
-import { defineComponent } from 'vue'
+import { computed, onMounted, provide, ref, useAttrs } from 'vue'
 import EditorReloader from './EditorReloader.vue'
 import SourceView from './SourceView.vue'
 
-export default defineComponent({
-	name: 'ViewerComponent',
-	components: {
-		SourceView,
-		EditorReloader,
-	},
-
-	provide() {
-		return {
-			isEmbedded: this.isEmbedded,
-		}
-	},
-
+defineOptions({
 	inheritAttrs: false,
-	props: {
-		filename: {
-			type: String,
-			default: null,
-		},
-
-		fileid: {
-			type: Number,
-			default: null,
-		},
-
-		active: {
-			type: Boolean,
-			default: false,
-		},
-
-		autofocus: {
-			type: Boolean,
-			// This is a public interface for Viewer we cannot change for now.
-			// eslint-disable-next-line vue/no-boolean-default
-			default: true,
-		},
-
-		shareToken: {
-			type: String,
-			default: () => getSharingToken(),
-		},
-
-		mime: {
-			type: String,
-			default: null,
-		},
-
-		source: {
-			type: String,
-			default: undefined,
-		},
-
-		isEmbedded: {
-			type: Boolean,
-			default: false,
-		},
-
-		onLoadedHandler: {
-			type: Function,
-			default: () => {},
-		},
-	},
-
-	data() {
-		return {
-			hasToggledInteractiveEmbedding: false,
-		}
-	},
-
-	computed: {
-		/** @return {boolean} */
-		useSourceView() {
-			return (
-				this.source
-				&& (!this.fileid
-					|| this.isEmbedded
-					|| this.isEncrypted)
-				&& !this.hasToggledInteractiveEmbedding
-			)
-		},
-
-		isEncrypted() {
-			return this.$attrs.e2EeIsEncrypted || false
-		},
-	},
-
-	mounted() {
-		if (!this.useSourceView) {
-			this.onLoaded()
-		}
-	},
-
-	methods: {
-		async onLoaded() {
-			this.onLoadedHandler()
-		},
-
-		toggleEdit() {
-			this.hasToggledInteractiveEmbedding = true
-		},
-
-		t,
-	},
 })
+
+const {
+	filename = undefined,
+	fileid = undefined,
+	// This is a public interface for Viewer we cannot change for now.
+	// eslint-disable-next-line vue/no-boolean-default
+	autofocus = true,
+	shareToken = getSharingToken(),
+	mime = undefined,
+	source = undefined,
+	onLoadedHandler = () => {},
+	...props
+} = defineProps <{
+	filename?: string | undefined
+	fileid?: number | undefined
+	active: boolean
+	autofocus?: boolean
+	shareToken?: string
+	mime?: string | undefined
+	source?: string | undefined
+	isEmbedded: boolean
+	onLoadedHandler?: () => void
+}>()
+
+provide('isEmbedded', props.isEmbedded)
+
+const hasToggledInteractiveEmbedding = ref(false)
+
+const attrs = useAttrs()
+const isEncrypted = computed(() => Boolean(attrs.e2EeIsEncrypted))
+
+const useSourceView = computed(() => source
+	&& (!fileid
+		|| props.isEmbedded
+		|| isEncrypted.value)
+	&& !hasToggledInteractiveEmbedding.value)
+
+onMounted(() => {
+	if (!useSourceView.value) {
+		onLoadedHandler()
+	}
+})
+
+/**
+ * Toggle interactive editing
+ */
+function toggleEdit() {
+	hasToggledInteractiveEmbedding.value = true
+}
+
 </script>
 
 <style lang="scss" scoped>