45 lines
1.5 KiB
Vue
45 lines
1.5 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
import { dashIfEmpty } from 'src/filters';
|
|
|
|
const $props = defineProps({
|
|
label: { type: String, default: null },
|
|
value: { type: [Number, String, Boolean], default: null },
|
|
titleLabel: { type: String, default: null },
|
|
titleValue: { type: [Number, String, Boolean], default: null },
|
|
info: { type: String, default: null },
|
|
dash: { type: Boolean, default: true },
|
|
});
|
|
const isBooleanValue = computed(() => typeof $props.value === 'boolean');
|
|
</script>
|
|
<template>
|
|
<div class="vn-label-value">
|
|
<div v-if="$props.label || $slots.label" class="label">
|
|
<slot name="label">
|
|
<span :title="$props.titleLabel ?? $props.label">{{ $props.label }}</span>
|
|
</slot>
|
|
</div>
|
|
<div class="value">
|
|
<span v-if="isBooleanValue">
|
|
<QIcon
|
|
:name="$props.value ? `check` : `close`"
|
|
:color="$props.value ? `positive` : `negative`"
|
|
size="sm"
|
|
/>
|
|
</span>
|
|
<slot v-else name="value">
|
|
<span :title="$props.value">
|
|
{{ $props.dash ? dashIfEmpty($props.value) : $props.value }}
|
|
</span>
|
|
</slot>
|
|
</div>
|
|
<div class="info" v-if="$props.info">
|
|
<QIcon name="info">
|
|
<QTooltip class="bg-dark text-white shadow-4" :offset="[10, 10]">
|
|
{{ $props.info }}
|
|
</QTooltip>
|
|
</QIcon>
|
|
</div>
|
|
</div>
|
|
</template>
|