<template>
<v-dialog
width="auto"
v-model="isShown"
transition="dialog-bottom-transition"
>
<v-card>
<v-card-title v-if="title"> {{ title }}</v-card-title>
<v-card-text>
<component v-if="checkText()" :is="text"></component>
<span v-else>{{ text }}</span>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
//
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script setup lang="ts">
import { defineProps, computed } from "vue";
const params = defineProps<{
show: boolean;
title?: string;
text: string | object;
confirmButtonText?: string;
closeButtonText: string;
}>();
const emit = defineEmits(["closeWindow", "confirmOperation"]);
const isShown = computed({
get() {
return params.show;
},
set(newValue) {
emit("closeWindow");
},
});
function checkText() {
return typeof params.text !== "string";
}
</script>
I am looking for a way to correctly type the prop "text" in my reusable modal window component. I currently use an object and it works, but I want to implement strong typing for better code quality. Note that v-dialog, v-card, etc., are components from Vuetify library.