130 lines
2.7 KiB
Vue
130 lines
2.7 KiB
Vue
<script setup>
|
|
import { computed } from "vue";
|
|
import {
|
|
releaseEntityDisplayLabel,
|
|
releaseEntityFacts,
|
|
releaseEntityTooltipText,
|
|
} from "@/components/release/releaseEntityFacts.js";
|
|
|
|
const emit = defineEmits(["open"]);
|
|
|
|
const props = defineProps({
|
|
type: {
|
|
type: String,
|
|
default: "entity",
|
|
},
|
|
label: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
entity: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
detail: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
facts: {
|
|
type: Array,
|
|
default: null,
|
|
},
|
|
});
|
|
|
|
const displayLabel = computed(() => releaseEntityDisplayLabel(props.label, props.entity));
|
|
const tooltipFacts = computed(() =>
|
|
Array.isArray(props.facts) && props.facts.length > 0
|
|
? props.facts
|
|
: releaseEntityFacts({ type: props.type, entity: props.entity || {}, detail: props.detail })
|
|
);
|
|
const tooltip = computed(() => releaseEntityTooltipText(tooltipFacts.value));
|
|
|
|
const open = () => {
|
|
emit("open", {
|
|
type: props.type,
|
|
label: displayLabel.value,
|
|
detail: props.detail,
|
|
entity: props.entity || {},
|
|
facts: tooltipFacts.value,
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<b-tooltip :label="tooltip || displayLabel" multilined type="is-dark">
|
|
<template #content>
|
|
<div class="release-entity-tooltip" data-testid="release-entity-tooltip">
|
|
<strong>{{ displayLabel }}</strong>
|
|
<dl>
|
|
<template v-for="fact in tooltipFacts" :key="`${fact.label}-${fact.value}`">
|
|
<dt>{{ fact.label }}</dt>
|
|
<dd>{{ fact.value }}</dd>
|
|
</template>
|
|
</dl>
|
|
</div>
|
|
</template>
|
|
<button
|
|
class="release-entity-link"
|
|
type="button"
|
|
:title="tooltip || displayLabel"
|
|
:aria-label="tooltip || displayLabel"
|
|
:data-entity-type="type"
|
|
@click="open"
|
|
>
|
|
<span>{{ displayLabel }}</span>
|
|
<i class="fas fa-circle-info" aria-hidden="true"></i>
|
|
</button>
|
|
</b-tooltip>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.release-entity-link {
|
|
align-items: center;
|
|
background: transparent;
|
|
border: 0;
|
|
color: #0747a6;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
font: inherit;
|
|
gap: 0.35rem;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
padding: 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.release-entity-link span {
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.release-entity-link i {
|
|
color: #52627a;
|
|
font-size: 0.78rem;
|
|
}
|
|
|
|
.release-entity-tooltip {
|
|
display: grid;
|
|
gap: 0.45rem;
|
|
max-width: min(28rem, 82vw);
|
|
text-align: left;
|
|
}
|
|
|
|
.release-entity-tooltip dl {
|
|
display: grid;
|
|
gap: 0.25rem 0.75rem;
|
|
grid-template-columns: max-content minmax(0, 1fr);
|
|
margin: 0;
|
|
}
|
|
|
|
.release-entity-tooltip dt {
|
|
color: #cbd5e1;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.release-entity-tooltip dd {
|
|
margin: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
</style>
|