46 lines
1.3 KiB
Vue
46 lines
1.3 KiB
Vue
<template>
|
|
<v-dialog class="max-w-[720px]" :model-value="props.data != null" @update:model-value="(val) => !val && emits('close')">
|
|
<template v-slot:default="{ isActive }">
|
|
<v-card :title="`User @${props.data?.name}`">
|
|
<v-card-text>
|
|
<v-row>
|
|
<v-col cols="12" md="6">
|
|
<h4 class="field-title">Name</h4>
|
|
<p>{{ props.data?.name }}</p>
|
|
</v-col>
|
|
<v-col cols="12" md="6">
|
|
<h4 class="field-title">Nick</h4>
|
|
<p>{{ props.data?.nick }}</p>
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<h4 class="field-title">Entire Payload</h4>
|
|
<v-code class="font-mono overflow-x-scroll max-h-[360px]">
|
|
<pre>{{ JSON.stringify(props.data, null, 4) }}</pre>
|
|
</v-code>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
|
|
<v-btn
|
|
text="Close"
|
|
@click="isActive.value = false"
|
|
></v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</template>
|
|
</v-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps<{ data: any }>()
|
|
const emits = defineEmits(["close"])
|
|
</script>
|
|
|
|
<style scoped>
|
|
.field-title {
|
|
font-weight: bold;
|
|
}
|
|
</style> |