Add smart trunctation to all table cell types
This commit is contained in:
parent
950b022798
commit
3c7aa63f51
|
@ -1,15 +1,20 @@
|
|||
<script>
|
||||
export let value
|
||||
|
||||
const displayLimit = 5
|
||||
$: attachments = value?.slice(0, displayLimit) ?? []
|
||||
$: leftover = (value?.length ?? 0) - attachments.length
|
||||
</script>
|
||||
|
||||
{#if value && value.length}
|
||||
{#each value as attachment}
|
||||
{#if attachment.type.startsWith('image')}
|
||||
<img src={attachment.url} alt={attachment.extension} />
|
||||
{:else}
|
||||
<div class="file">{attachment.extension}</div>
|
||||
{/if}
|
||||
{/each}
|
||||
{#each attachments as attachment}
|
||||
{#if attachment.type.startsWith('image')}
|
||||
<img src={attachment.url} alt={attachment.extension} />
|
||||
{:else}
|
||||
<div class="file">{attachment.extension}</div>
|
||||
{/if}
|
||||
{/each}
|
||||
{#if leftover}
|
||||
<div>+{leftover} others</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
|
|
|
@ -2,14 +2,19 @@
|
|||
import "@spectrum-css/label/dist/index-vars.css"
|
||||
|
||||
export let value
|
||||
|
||||
const displayLimit = 5
|
||||
$: relationships = value?.slice(0, displayLimit) ?? []
|
||||
$: leftover = (value?.length ?? 0) - relationships.length
|
||||
</script>
|
||||
|
||||
{#if value && value.length}
|
||||
{#each value as item}
|
||||
{#if item && item.primaryDisplay}
|
||||
<span class="spectrum-Label spectrum-Label--grey">
|
||||
{item.primaryDisplay}
|
||||
</span>
|
||||
{/if}
|
||||
{/each}
|
||||
{#each relationships as relationship}
|
||||
{#if relationship?.primaryDisplay}
|
||||
<span class="spectrum-Label spectrum-Label--grey">
|
||||
{relationship.primaryDisplay}
|
||||
</span>
|
||||
{/if}
|
||||
{/each}
|
||||
{#if leftover}
|
||||
<div>+{leftover} others</div>
|
||||
{/if}
|
||||
|
|
|
@ -8,5 +8,6 @@
|
|||
div {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 320px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -192,8 +192,6 @@
|
|||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
max-width: 320px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.spectrum-Table-sortedIcon {
|
||||
opacity: 0;
|
||||
|
|
Loading…
Reference in New Issue