{#if !_readonly}
-{#if value && Array.isArray(value.parentInfo) && (value.parentInfo.length > 0 || $$slots.default)}
+{#if value != null && Array.isArray(value.parentInfo) && (value.parentInfo.length > 0 || $$slots.default)}
- {#each value.parentInfo as parentInfo}
-
-
+ {#if !compact}
+ {#each value.parentInfo as parentInfo}
+ 100 ? 2 : 1}
+ colorInherit
+ >
+ {parentInfo.title}
+
+ ›
+ {/each}
+ {:else}
+ {@const parentInfo = value.parentInfo[0]}
+ {@const shortTitle = (parentInfo.title?.charAt(0) ?? '') + '...'}
100 ? 2 : 1}
colorInherit
>
- {parentInfo.title}
+ {shortTitle}
- ›
- {/each}
+ ›
+ {/if}
{:else if $$slots.default}
@@ -66,17 +80,23 @@
display: inline-flex;
flex-shrink: 1;
margin-left: 0;
- min-width: 0;
min-width: calc(
(var(--cards-container-card-min-width, 2rem) + 1.26rem) * var(--cards-container-parents, 1) +
var(--cards-container-card-min-width, 2rem)
);
color: var(--theme-darker-color);
+ &.compact {
+ min-width: 1rem;
+ }
+
.separator {
flex-shrink: 0;
padding: 0 0.5rem;
color: var(--theme-content-color);
+ &.compact {
+ padding: 0 0.5rem 0 0;
+ }
}
:global(a:hover) {
color: var(--theme-caption-color);