50 lines
815 B
Svelte
50 lines
815 B
Svelte
<script lang="ts">
|
|
import Ellipsis from '../utils/Ellipsis.svelte';
|
|
|
|
export let label: string;
|
|
export let backpath: string[] = [];
|
|
</script>
|
|
|
|
<div class="upobject-label">
|
|
<Ellipsis value={label}>
|
|
{#if backpath.length}
|
|
<span class="backpath">
|
|
{#each backpath as component}
|
|
<span class="component">
|
|
{component}
|
|
</span>
|
|
{/each}
|
|
</span>
|
|
{/if}
|
|
<span class="label">
|
|
{label}
|
|
</span>
|
|
</Ellipsis>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.upobject-label {
|
|
flex-grow: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.backpath {
|
|
opacity: 0.66;
|
|
margin-right: 0.25em;
|
|
|
|
.component::after {
|
|
content: '∋';
|
|
margin-left: 0.2em;
|
|
margin-right: 0.4em;
|
|
font-size: 0.66em;
|
|
font-weight: bold;
|
|
position: relative;
|
|
top: -0.125em;
|
|
}
|
|
|
|
.component:last-child::after {
|
|
content: '';
|
|
}
|
|
}
|
|
</style>
|