43 lines
916 B
Vue
43 lines
916 B
Vue
<template>
|
|
<dl class="document-grid" :style="gridStyle">
|
|
<div
|
|
v-for="field in fields"
|
|
:key="field.key"
|
|
class="document-grid-cell"
|
|
:class="field.class"
|
|
>
|
|
<dt class="document-grid-label">{{ field.label }}</dt>
|
|
<dd class="document-grid-value">
|
|
<slot :name="field.key" :field="field">
|
|
{{ field.value ?? "-" }}
|
|
</slot>
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from "vue";
|
|
|
|
const props = defineProps({
|
|
fields: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
columns: {
|
|
type: [Number, String],
|
|
default: 4
|
|
}
|
|
});
|
|
|
|
const normalizedColumns = computed(() => {
|
|
const columns = Number(props.columns);
|
|
if (!Number.isFinite(columns)) return 4;
|
|
return Math.min(Math.max(Math.trunc(columns), 1), 6);
|
|
});
|
|
|
|
const gridStyle = computed(() => ({
|
|
"--document-grid-columns": normalizedColumns.value
|
|
}));
|
|
</script>
|