forked from verdnatura/salix-front
Reviewed-on: verdnatura/salix-front#68 Reviewed-by: Alex Moreno <alexm@verdnatura.es> Reviewed-by: Juan Ferrer <juan@verdnatura.es>
This commit is contained in:
commit
b55e216d6a
|
@ -0,0 +1,36 @@
|
|||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
const $props = defineProps({
|
||||
label: { type: String, default: null },
|
||||
value: {
|
||||
type: [String, Boolean],
|
||||
default: null,
|
||||
},
|
||||
info: { type: String, default: null },
|
||||
});
|
||||
const isBooleanValue = computed(() => typeof $props.value === 'boolean');
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="vn-label-value">
|
||||
<div v-if="$props.label || $slots.label" class="label">
|
||||
<div v-if="!$slots.label">{{ $props.label }}</div>
|
||||
<slot name="label"></slot>
|
||||
</div>
|
||||
<div v-if="$props.value || $slots.value" class="value">
|
||||
<span v-if="isBooleanValue">
|
||||
<QIcon :name="$props.value ? `check` : `close`" :color="$props.value ? `positive` : `negative`" />
|
||||
</span>
|
||||
<span v-else>
|
||||
<slot name="value"></slot>
|
||||
</span>
|
||||
</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>
|
Loading…
Reference in New Issue