Add smart trunctation to all table cell types

This commit is contained in:
Andrew Kingston 2021-03-25 09:45:23 +00:00
parent c95baec83f
commit 604d02cb4e
4 changed files with 27 additions and 18 deletions

View File

@ -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>

View File

@ -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}

View File

@ -8,5 +8,6 @@
div {
overflow: hidden;
text-overflow: ellipsis;
max-width: 320px;
}
</style>

View File

@ -192,8 +192,6 @@
justify-content: flex-start;
align-items: center;
gap: 4px;
max-width: 320px;
overflow: hidden;
}
.spectrum-Table-sortedIcon {
opacity: 0;