dev #89
|
@ -1,36 +1,37 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { computed } from 'vue';
|
import { computed } from 'vue';
|
||||||
const $props = defineProps({
|
const $props = defineProps({
|
||||||
label: { type: String, default: null },
|
label: { type: String, default: null },
|
||||||
value: {
|
value: {
|
||||||
type: [String, Boolean],
|
type: [String, Boolean],
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
info: { type: String, default: null },
|
info: { type: String, default: null },
|
||||||
});
|
});
|
||||||
const isBooleanValue = computed(() => typeof $props.value === 'boolean');
|
const isBooleanValue = computed(() => typeof $props.value === 'boolean');
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="vn-label-value">
|
<div class="vn-label-value">
|
||||||
<div v-if="$props.label || $slots.label" class="label">
|
<div v-if="$props.label || $slots.label" class="label">
|
||||||
<div v-if="!$slots.label">{{ $props.label }}</div>
|
<slot name="label"> {{ $props.label }}</slot>
|
||||||
<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">{{ $props.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>
|
</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>
|
</template>
|
||||||
|
|
Loading…
Reference in New Issue