53 lines
1.2 KiB
Vue
53 lines
1.2 KiB
Vue
<script setup>
|
|
// Define props with validation
|
|
const props = defineProps({
|
|
path: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
name: {
|
|
type: Object,
|
|
required: true,
|
|
validator: (value) => {
|
|
// Basic validation to ensure data has a name property
|
|
return value && value.name
|
|
},
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<StaticElement name="parsed-name" size="m">
|
|
<div v-show="name" class="d-flex flex-row">
|
|
<span> {{ index }}</span>
|
|
<v-chip
|
|
v-for="(prefix, index) in name.value[path].prefix"
|
|
:key="`prefix-${index}`"
|
|
size="x-small"
|
|
class="mr-1 bg-indigo-lighten-3"
|
|
>{{ prefix }}</v-chip
|
|
>
|
|
<v-chip
|
|
v-for="(given, index) in name.value[path].given"
|
|
:key="`given-${index}`"
|
|
size="x-small"
|
|
class="mr-1 bg-blue-darken-3"
|
|
>{{ given }}</v-chip
|
|
>
|
|
<v-chip
|
|
v-show="name.value[path].family"
|
|
size="x-small"
|
|
class="mr-1 bg-blue"
|
|
>{{ name.family }}</v-chip
|
|
>
|
|
<v-chip
|
|
v-for="(suffix, index) in name.value[path].suffix"
|
|
:key="`suffix-${index}`"
|
|
size="x-small"
|
|
class="mr-1 bg-indigo-lighten-3"
|
|
>{{ suffix }}</v-chip
|
|
>
|
|
</div>
|
|
</StaticElement>
|
|
</template>
|