62 lines
1.4 KiB
Vue
62 lines
1.4 KiB
Vue
<template>
|
|
<v-expansion-panel>
|
|
<v-expansion-panel-title>
|
|
<div class="d-flex flex-row">
|
|
<div class="charactername">{{ characterName }}</div>
|
|
<div class="playername">( {{ playerName }} )</div>
|
|
</div>
|
|
</v-expansion-panel-title>
|
|
<v-expansion-panel-text>
|
|
<div>Alias: {{ alias }}</div>
|
|
<JsonEditorVue v-model="json" v-bind="editorConfig" />
|
|
</v-expansion-panel-text>
|
|
</v-expansion-panel>
|
|
</template>
|
|
|
|
<style>
|
|
.charactername {
|
|
font-weight: bold;
|
|
margin-right: 10px;
|
|
}
|
|
</style>
|
|
|
|
<script setup lang="ts">
|
|
import JsonEditorVue from 'json-editor-vue'
|
|
|
|
import { computed } from 'vue'
|
|
import { Character, ListCharacterRequest } from '../proto/character'
|
|
|
|
const editorConfig = {
|
|
mainMenuBar: false,
|
|
navigationBar: false,
|
|
readOnly: true,
|
|
}
|
|
|
|
const {
|
|
character = {
|
|
playerName: 'Unkown Player',
|
|
characterName: 'Player Character',
|
|
characterAlias: ['No Alias'],
|
|
json: "",
|
|
},
|
|
} = defineProps<{ character?: Character }>()
|
|
|
|
const playerName = computed(() => {
|
|
return character.playerName || 'Unnamed Player'
|
|
})
|
|
|
|
const characterName = computed(() => {
|
|
return character.characterName || 'Unnamed Character'
|
|
})
|
|
|
|
const alias = computed(() => {
|
|
return (character.characterAlias || [])
|
|
.map((entry) => '"' + entry + '"')
|
|
.join(', ')
|
|
})
|
|
|
|
const json = computed(() => {
|
|
return character.json || '{}'
|
|
})
|
|
</script>
|