2023-11-02 11:29:09 +01:00
|
|
|
<script lang="ts">
|
2024-01-22 22:58:55 +01:00
|
|
|
import Ellipsis from '../utils/Ellipsis.svelte';
|
2023-11-02 11:29:09 +01:00
|
|
|
|
2024-01-22 22:58:55 +01:00
|
|
|
export let label: string;
|
|
|
|
export let backpath: string[] = [];
|
2023-11-02 11:29:09 +01:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<div class="upobject-label">
|
2024-01-22 22:58:55 +01:00
|
|
|
<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>
|
2023-11-02 11:29:09 +01:00
|
|
|
</div>
|
|
|
|
|
2023-12-28 21:03:28 +01:00
|
|
|
<style lang="scss">
|
2024-01-22 22:58:55 +01:00
|
|
|
.upobject-label {
|
|
|
|
max-width: 100%;
|
|
|
|
}
|
2023-11-11 21:37:54 +01:00
|
|
|
|
2024-01-22 22:58:55 +01:00
|
|
|
.backpath {
|
|
|
|
opacity: 0.66;
|
|
|
|
margin-right: 0.25em;
|
2023-11-02 11:29:09 +01:00
|
|
|
|
2024-01-22 22:58:55 +01:00
|
|
|
.component::after {
|
|
|
|
content: '∋';
|
|
|
|
margin-left: 0.2em;
|
|
|
|
margin-right: 0.4em;
|
|
|
|
font-size: 0.66em;
|
|
|
|
font-weight: bold;
|
|
|
|
position: relative;
|
|
|
|
top: -0.125em;
|
|
|
|
}
|
2023-11-02 11:29:09 +01:00
|
|
|
|
2024-01-22 22:58:55 +01:00
|
|
|
.component:last-child::after {
|
|
|
|
content: '';
|
|
|
|
}
|
|
|
|
}
|
2023-11-02 11:29:09 +01:00
|
|
|
</style>
|