92 lines
2.3 KiB
Vue
92 lines
2.3 KiB
Vue
<script setup>
|
|
import { dashIfEmpty } from 'src/filters';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useClipboard } from 'src/composables/useClipboard';
|
|
import { computed } from 'vue';
|
|
|
|
const $props = defineProps({
|
|
label: { type: String, default: null },
|
|
value: {
|
|
type: [String, Boolean, Number],
|
|
default: null,
|
|
},
|
|
info: { type: String, default: null },
|
|
dash: { type: Boolean, default: true },
|
|
copy: { type: Boolean, default: false },
|
|
});
|
|
|
|
const { t } = useI18n();
|
|
const { copyText } = useClipboard();
|
|
|
|
function copyValueText() {
|
|
copyText($props.value, {
|
|
component: {
|
|
copyValue: $props.value,
|
|
},
|
|
});
|
|
}
|
|
const val = computed(() => $props.value);
|
|
</script>
|
|
<template>
|
|
<div class="vn-label-value">
|
|
<QCheckbox
|
|
v-if="typeof value === 'boolean'"
|
|
v-model="val"
|
|
:label="label"
|
|
disable
|
|
dense
|
|
/>
|
|
<template v-else>
|
|
<div v-if="label || $slots.label" class="label">
|
|
<slot name="label">
|
|
<span>{{ label }}</span>
|
|
</slot>
|
|
</div>
|
|
<div class="value">
|
|
<slot name="value">
|
|
<span :title="value">
|
|
{{ dash ? dashIfEmpty(value) : value }}
|
|
</span>
|
|
</slot>
|
|
</div>
|
|
<div class="info" v-if="info">
|
|
<QIcon name="info" class="cursor-pointer" size="xs" color="grey">
|
|
<QTooltip class="bg-dark text-white shadow-4" :offset="[10, 10]">
|
|
{{ info }}
|
|
</QTooltip>
|
|
</QIcon>
|
|
</div>
|
|
<div class="copy" v-if="copy && value" @click="copyValueText()">
|
|
<QIcon name="Content_Copy" color="primary">
|
|
<QTooltip>{{ t('globals.copyClipboard') }}</QTooltip>
|
|
</QIcon>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.vn-label-value {
|
|
&:hover .copy {
|
|
visibility: visible;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.label,
|
|
.value {
|
|
white-space: pre-line;
|
|
word-wrap: break-word;
|
|
}
|
|
.copy {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.info {
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
:deep(.q-checkbox.disabled) {
|
|
opacity: 1 !important;
|
|
}
|
|
</style>
|