56 lines
993 B
Vue
56 lines
993 B
Vue
<template>
|
|
<component
|
|
:is="as"
|
|
class="document-paper-field"
|
|
:class="[
|
|
spanClass,
|
|
{
|
|
'document-paper-field-readonly': readonly,
|
|
'document-paper-field-upload': upload
|
|
}
|
|
]"
|
|
>
|
|
<span>{{ label }}</span>
|
|
<slot>
|
|
<p class="document-paper-readonly-value">{{ value || "-" }}</p>
|
|
</slot>
|
|
</component>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from "vue";
|
|
|
|
const props = defineProps({
|
|
label: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
value: {
|
|
type: [String, Number],
|
|
default: ""
|
|
},
|
|
span: {
|
|
type: [Number, String],
|
|
default: 1
|
|
},
|
|
as: {
|
|
type: String,
|
|
default: "label"
|
|
},
|
|
readonly: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
upload: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
});
|
|
|
|
const spanClass = computed(() => {
|
|
if (String(props.span) === "full") return "document-paper-field-full";
|
|
if (Number(props.span) === 2) return "document-paper-field-wide";
|
|
return "";
|
|
});
|
|
</script>
|